DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Setting up react native app from ground upπŸ”₯βš›οΈ
Pramit Marattha for Aviyel Inc

Posted on

Setting up react native app from ground upπŸ”₯βš›οΈ

What is React Native?

React Native is a JavaScript framework that allows you to create real-time, natively rendered mobile apps for both iOS as well as Android platforms. It's built on React, Facebook's JavaScript toolkit for creating UIs, although it's designed for mobile platforms rather than the web. Web developers can now create mobile applications that look and feel fully native by leveraging the power of this library. Furthermore, because most of the written code can be shared across platforms, React Native makes it simple to develop for both Android as well iOS platforms simultaneously.In brief, we have the react js library and then we have the react-native library they work together so when you build the web application with the React js which is part of it that displays it to the browser with a separate library called react-dom. React and react-dom work together to allow you to build front-end browser client-side applications but react-native is something that you see along with the react library that can render out native components to a mobile device like an IOS device or an android. Therefore, understanding react.js is critical for comprehending react-native.

Pointers

Cross-platform

Let's imagine you're merely developing an app for two separate platforms, iOS and Android, you might have a swift project for iOS and Java/ Kotlin for Android, and they're two completely distinct codebases, so you'll need to hire two different devs, for the same projects which are quite expensive. Hence, one of the major advantages of using react-native is that you have a single code base. What this means is that if you want to build a mobile app for a variety of operating systems, you can do so using this single stack of technology because react-native helps to compile to both platforms, saving you not only time but also money.

single codebase

So, in terms of requirements, if you have a MacBook, you can simply create, compile, and test IOS and Android apps. You can create for Android and iOS on Windows, but you won't be able to compile or test for iOS. There are some workarounds where you can hack it by using the physical device or any other available third-party software.

NOTE: If you are building with react-native on windows you are going to be building and testing In Android only but if you are on a mac you can compile, run and build both IOS and Android applications.

Components in react-native

So, it's the same as when you use the React js library to create a web application. With react-native, you also have the concept of components. You can design your own components, but there are also a lot of built-in components to help developers construct native apps and User Interfaces with it.

built in components

Basic components include items such as the view, which is just a container component that includes text components, Image, text input, ScrollView, and Stylesheet. So there you have it, these are the most essential elements.

basic components
Basic components

You can also look inside the react-native documentation for a detailed overview.

Now, there are Button, Picker, Slider, and Switches for the UI component.

UI components
UI components

And then, there are list views components consisting of FlatLists(where if you want to display a bunch of items) and SectionLists(It is like a FlatList, but meant for sectioned List).

list Views
List views

Finally, there are platform-specific components, such as ActionSheetIOS and AlertIOS, which are components for the iOS platform. Then there are Android components, such as back handler, DatePickerAndroid, for the Android Platform.

Android component
Android Component
IOS component
IOS component

Therefore, React Native includes both Agnostic and Platform Specific components.

NOTE: You can use react-native to do everything that react provides, such as props, drilling, state handling, and all the other good stuff. In react-native, you can use both functional and class-based approaches. However, in this blog tutorial, we will construct the app using a functional-based approach.

Getting started with react-native

So, Without any further ado let’s jump right into creating a simple application.

The first step, visit the react-native documentation site.

Documentation

There are two approaches to learning React native. One method is to use expos CLI, which acts as a kind of wrapper that abstracts out and runs the react-native application, and all you really need on your PC is node.js .You can also test and run your application on your own Smartphone or handheld device. However, in this blog tutorial, we will be using the react-native CLI. If you're going to use the react-native CLI, a few things must be installed. The first one is Android Studio along with the Android SDK.

Android studio landing page

If you are using a Mac, you will also need Xcode installed, which can be obtained from the App Store. So, once you've installed XCode, you may have access to the iOS simulator.

xcode landing page

Installing android studio

So, let us now proceed to install the Android Studio.

The very first step is to open the installer and hit the next button.

setup

After that, check-marking the Android Virtual Device and again click next.

Choosing components

Now, select the path for your installation and hit next.

Installation Path

Finally, click the install button and wait for the Android Studio to be installed on your PC, which should take about 5 to 10 minutes.

Choosing start menu folder

If everything went well you can finally launch your android studio.

Completing setup

The next step is, check that you have Android 10 with API level 29 installed. So go ahead and install all of the necessary SDK.

Configure SDK

Click on the SDK manager and make sure you have Android API level 29 installed.

SDK manager

Android 10 API level 9

After that, we need to create an emulator, so after installation, go to Android Studio and click on configure, then select AVD manager, which is an abbreviation for Android Virtual Device Manager.

AVD

After that, click on Create Virtual Device, select a device, and then click NEXT.

Selecting Hardware

Select the required SDK version, then click NEXT.

System Image

Rename the device name, and then click FINISH. Your device will be created, and finally, click the Play button.

AVD

The emulator gets launched. So emulator is just an Android device running right inside your desktop.

emulator

Installing Xcode

This article will help you install Xcode on your Mac.

Freecodecamp article

After you have successfully installed Xcode on your MacBook, you can either open the simulator in Xcode or go to the terminal and type open -a simulator, which will launch the iPhone 11 simulator.

Building a react-native project

Create one folder first, open your vscode inside it and open your terminal. React Native has a built-in command-line interface, which you can use to generate a new project. You can access it without installing anything globally using Β npx, which ships with Node.js and also, you can install the react-native CLI via. globally by typing .

npm install -g react-native-cli 

Enter fullscreen mode Exit fullscreen mode

react native CLI

Now, wait for it to install fully. Now that, it is installed globally, it’s time to initialize the application. So for that simply type.

react-native init niceworld 

Enter fullscreen mode Exit fullscreen mode

niceworld project

It will take some time to get fully installed.

File Structure

After your app is installed, now it will provide some instructions on β€œhow to run the application for both IOS and Android”.

Run instructions for android

So for IOS, you need to go inside the folder and simply type npx react-native run-ios

For android, if you are on windows you need to go inside the folder and type

npx react-native run-android

Enter fullscreen mode Exit fullscreen mode

Let’s run our application. So, for that simply type react-native run-android for android and react-native run-ios for IOS. It should automatically open the emulator.

emulator

Now that we've got everything up and running. Let's fix and add some features to our app. Go to our App.js because it is the application's entry point and root component, just like it is in a standard React application, where you embed and import various other different components.

The first step is to remove all of the boilerplate that it provides and start from scratch. Now, just as if we were using a react library to create a web app, we can use either functional components or class-based components, and if you use a class, you can use life cycle methods such as component did mount and component did unmount, and so on. Hooks can thus be used if functional components are used. In this blog tutorial, we'll use functional components with hooks. The first thing we'll do is import react and create a function called APP. Let's return it from within that function. Keep in mind that you can use HTML tags inside the return statement only.

We must use react-native components. So, proceed to the top and import two items. One is the View component, and the other is the Text component, both of which will be from react-native. Now, inside the return, use the imported view component. So the view component is the container that supports the layout with Flexbox, allowing us to style our layout with flexbox, and it also maps directly to the native view equivalent on whatever platform react native is running on, allowing us to embed other components within the view.

Flexbox layout

Use the imported text component within the return statement now. Text is a react component that simply displays text.

Now its time to add some styles to our project..

//App.js

import React from 'react';

import {View, Text} from 'react-native';

const App = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Hello World</Text>
    </View>
  );
};

export default App;

Enter fullscreen mode Exit fullscreen mode

As you can see, writing styles inside the component can get a little messy, so let's add the styleSheet component from react-native. This component aids in the differentiation of the styles.

So import the StyleSheet component from react-native and copy the following code.

//App.js

import React from 'react';

import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',
  },

  text: {
    color: 'blue',

    fontSize: 30,
  },
});

export default App;

Enter fullscreen mode Exit fullscreen mode

Your application should look like this inside the emulator.

hello world

Now, let's try to add some images to our app; for this, there is a component in react-native called the Image component. Provide the source props and pass in the object so two curly braces with a URI and provide the image URL link inside the image. After that, let's add some styles to it as well.

Copy the following code inside your App.js.

//App.js

import React from 'react';

import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>

      <Image source={{uri: 'img.png'}} style={styles.img} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',
  },

  text: {
    color: 'blue',

    fontSize: 30,
  },

  Img: {
    width: 100,

    height: 100,
  },
});

export default App;

Enter fullscreen mode Exit fullscreen mode

Conclusion

Using React Native, we've now produced a completely functional mobile app that works and looks beautiful. In the realm of mobile app development, React Native has become extremely popular, and its popularity is only growing. Remember that React Native is the most widely used framework for developing mobile apps, and it's here to stay. The framework's growing popularity has resulted in an increased need for React Native developers, which shows no signs of slowing down, making this a very appealing career choice.

Happy Coding!!

Follow @aviyelHQ or sign-up on Aviyel for early access if you are a project maintainer, contributor, or just an Open Source enthusiast.

Join Aviyel's Discord => Aviyel's world

Twitter =>[https://twitter.com/AviyelHq]

Top comments (6)

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

As stated in the terms:

Posts must contain substantial content β€” they may not merely reference an external link that contains the full post.

You should make the entire post here instead of posting a portion and leave the rest in an external site. If you only want to promote that external site, you can use the listings option.

Edit: Thanks for including the whole post!

Cheers!

Collapse
 
pramit_marattha profile image
Pramit Marattha Author • Edited on

"merely" means "only" correct ?
I have not broken any terms and services.

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

Then again, if you actually read the terms, this is in the same item:

Users must make a good-faith effort to share content that is on-topic, of high-quality, and is not designed primarily for the purposes of promotion or creating backlinks.

This post is basically a "teaser" of the full post in an external site. Even if it wasn't against the terms (and it is), you should consider that is extremely annoying for users to be reading an article thinking it will be the entire thing, just to reach a link to an external site (not to mention a light theme site that will be literally painful if you come from DEV's dark theme).

Is is actually that hard to put the entire thing here?

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
lukeshiru profile image
Info Comment hidden by post author - thread only accessible via permalink
Luke Shiru • Edited on

The following text is missing in the post above, and present on the linked post, and is not a "conclusion", is part of the "guide":

Copy the following code inside your App.js.

//App.js

import React from 'react';

import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>

      <Image source={{uri: 'img.png'}} style={styles.img} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',
  },

  text: {
    color: 'blue',

    fontSize: 30,
  },

  Img: {
    width: 100,

    height: 100,
  },
});

export default App;
Enter fullscreen mode Exit fullscreen mode

And even if the conclusion was the only thing missing I ask again:

Is it really that hard to post the entire thing here?

Collapse
 
bello4 profile image
bello oladepo

Nice walk through πŸ‘πŸ‘

Some comments have been hidden by the post's author - find out more

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs