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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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.

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

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

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.

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

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.

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

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.

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

Select the required SDK version, then click NEXT.

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

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

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 

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 

It will take some time to get fully installed.

After your app is installed, now it will provide some instructions on “how to run the application for both IOS and 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

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.

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.

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;

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;

Your application should look like this inside the emulator.

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;

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]