How To Use React Native To Make Mobile App

Build Your Mobile App in 10 Days With React Native

Wondering how it is possible to develop your first ever REACT NATIVE application in 2021 in just 10 days? Well, today we are living in a highly tech-driven world, where everything is possible if you are on the right path and equipped with the right tools. And this statement is 100% true when it comes to developing a mobile application with React Native.

In this post, we'll be starting with the basics of the concept and walk through everything that helps you build a fully-functional app with REACT NATIVE. So whether you are an entrepreneur who has been planning to start with the new React Native app or a developer who hasn't ever got a chance to learn about this framework, then this place is for both of you to get started!

Short Note: By the end of this article, we will have an app structure that you are surely able to run on a real device or simulator for testing!

So let's begin the game!

Before you directly get into learning different components of React Native, it is worth starting your journey by understanding the basics of the framework. Since we are surrounded by various technologies, tools and frameworks that undoubtedly make app developer's life simplified and sorted, but on the other side, the wide choice of technologies are putting everyone in the dilemma of what is the best approach of developing a mobile app in less time and cost without compromising with the quality.

And one great option that outshined for the cross-platform app development is React Native. It is developed and supported by Facebook but currently being used by some of the world's leading brands including Instagram, Tesla, Walmart, Uber Eats, Discord, Wix and more.

What is React Native?

In a nutshell, React Native is a JavaScript library that allows app developers to create an application that looks, feel and perform closely like a Native application. It uses the same fundamental UI building blocks as regular iOS and Android apps. All you need to do is to just put those building blocks together by using JavaScript and React. And the most exciting part about using React Native is that it uses almost the same concept for building cross-platform apps that are being used for creating web applications.

But, there is no DOM with React Native as it leverages on UI components which are provided by the leading platforms including Android and iOS. It does not use WebViews like Cordova or PhoneGap. The basic principle of React Native is to bring the React to the mobile app development, therefore, it is based on learning once and writing anywhere. React Native uses RCTBridgeModule to make a connection between Native code and JavaScript Code.

Apart, here are the quick key highlights of React Native:

React Native is an open-source framework ideal for hybrid app development.
Offering a wide choice of native-like UI components.
React Native apps contain 85 to 90% codes consisting of JavaScript and JSX code.

Rewarding Benefits of Choosing React Native For App Development

One app that targets multiple app platforms including iOS, Android, Windows or Web with the same codebase and efforts.
It boasts large community support for developers.
It adds the native support to your app which means that you can choose a native code that fits your use case or app type.

Now where to go from here?

With this short note, we would highly encourage those to read this React Native App development tutorial who have just started with JavaScript as we have laid down the valuable points in a very sorted manner that even beginners can easily grasp.

Getting Started With The Tutorial of React Native App Development

To get started, you need to dive deep into the React Native's ecosystem and start installing prerequisites for the React Native setup.

1. Requirements for Setting React Native App

Since you are targeting to complete the development project as early as in 10 days, therefore, make sure you have created the right environment for the React Native. While React Native app development companies are already backed by such things, so this is for the developers who are handling the project alone.

So to deploy any sort of React Native app on your machine, you may require:

Machine dependency:

Node.js: Node.js is required to develop your JavaScript code with React Native. If you have not installed Node.js, then click here to get it from the official website. To build a React Native app, it is recommended to go for LTS 10.x.x version.

Watchman: It's a Facebook product specially developed for watching file changes. It is highly recommended to install for better performance.
For iOS users: You will need the homebrew macOS package to install watchman: brew install watchman.
For Window users: There is no watchman so you can stick to Node.js as well as python2.

Also, regardless of what type of machine you are using, make sure you have installed the Java SE Development Kit (JDK) from here the version should be at least or more than >=8.

To setup native SDK for specific platforms you need:

iOS: Make sure you have installed Xcode, which is free to install or probably pre-installed on the machine.
Android: For Android, we would recommend you to follow these guidelines.

2. Installing React

The first step is obviously to install React. Whether you hire mobile app development company or doing it yourself, everyone has to follow this link to pursue "Get Started" documentation. And when it comes to building a React Native application, there are two ways to get started:

Creating-React-Native-App Without Toolchain
Building React Native App from CLI [npm install -g react-native-cli]

The basic difference between these two options is to decide whether you want to build your RN project with Expo or not. Expo is a toolchain that turned into create-React-Native-App library that removes various barriers from the front-end development segment and speeds up the process a little.

So we have decided to go with the Expo, as our aim was to build an app in 10 days without realising this fact that this route will add barriers on the backend.

With Expo, you may eliminate some barriers at the frontend. But when you need to implement certain libraries to the development lifecycle, then you will quickly understand the lack of support with Expo.

So finally get started with the building process of React Native App, our team of mobile app developers recommended you to go and install react-native-cli . Open the terminal and run this below command.

npm install -g react-native-cli

(The CLI is an essential tool as it is used to scaffold a starter project containing everything that you need to develop and run a React Native App. npm)

To make sure that you have successfully run the CLI tool, you can consider this below command:

3. Folder Structure of React Native App

To get started with the project, you need to create a project directory by using the CLI tool that you have installed just before.

Once React is installed, you are advised to get started with the folder structure by following these steps:

Add a folder in the root and name it "app".
Move App.js file into the root app with the name of App.
Next, update the index.js import statement to "import App from ./app/App.js".
Finally, create the folder inside the "app".

Run "react-native init emojidictrn" in your terminal and just name it whatever you want to add in your project directory. Once you run the command in the terminal, a folder has been created at your system with the name of "App" will be welcomed by the wide choice of files as shown in the below image.

But from the above image, let us direct you about what files or directories are essential for your project:

App.js: This is the first file in React Native app that actually works as an entry point of the development process. Whatever codes you write inside this file, will directly reflect on the mobile device.
Node_Module: It is the main folder that contains all the essential dependencies or packages that are required to develop and run this project.
Package.json: It is a folder where you will find the list of all the installed dependencies.
Index.js: It is an entry point to trigger the app on a device or simulator.
iOS: A folder that contains an Xcode project and the code sets that are required to bootstrap this app for the iOS device.
Android: A folder that holds all the Android-related codes to bootstrap this app for Android devices.

Apart from folder structuring, keep in mind the terms and functions of the app that you need:

Screens: These are known to be the main views of the app.

Assets: Basically you will have two folders in this directory- images and animations.

Components: This is where you will store all the components that you have shared.

Config: This is where you can set up your app's colour scheme in a Color.js file to easily manage things.

You can ignore these files as of now, and keep your focus on the steps of running your project.

4. Running the Application

To run your app, react-native-cli tools come with some default snippets of code that add some action to your app. All you need is to run the app using a terminal.

So for iOS, we are using Simulator and for Android, you can use an emulator. And keep in mind that we haven't made any changes in the coding. Therefore, to run the app, just run the "npm start" command. It will start the metro bundler to track any file changes in a .js file in your project.

However, make sure this command is running in a separate window while you are building a project for iOS and Android.

Let start with the application running:

Running an App on iOS

No matter how many screens you have or what kind of content it has, you just need to run this command "react-native run-ios" in another window.

This command will start building your app and start it on iOS simulator. Since you are building these files for the very first time, this process will take some good amount of time. Once the process is done, your device will open up the screen like below image:

To run your app on any specific iOS device, you need to add a flag and run a command "xcrun simctl list devices". For example, you need to build and run an app for iPhone 11, then you can run this "react-native run-ios — simulator="iPhone 8 Plus" command.

Running on Android

To run your React Native Android app, you will require an Android device. Also, you can choose an Android virtual device which allows you to emulate an Android device on your computer.

To run your app on an Android emulator, open the Android studio and choose the option to "open an existing project/folder". If you are trying to run it on a virtual device, then you can run the command "react-native-run-android" from another terminal window.

You will see this screen, once it is done!

Once your project is successfully built, you will get this message on your screen!

SHORT NOTE: To see the app in action on both the devices, you can use the below mentioned code that is available in App.js.

The result of these codes can be easily seen on your screen by pressing "Cmd+R" on iOS and double "R" on Android devices. You will see the screen as in the image below.

However, keep in mind that the file renders this App Component in "index.js" in the root directory. You can consider the below codes for that:

AppRegistry is the entry point from where any app component and root component of the app should register by using "AppRegistery.registerComponent". The purpose of using this code is to allow the native system to load the bundle of the app and run the app by starting "Appregistry.runApplication".

So with all these steps and instructions, you have successfully developed your project, now it's turn to develop an app with the components in it.

Basic Steps to Develop React Native App

To get started with any app development project, you need to create a project that you have already generated by using the CLI tool. Now, the next step is to gather the components to build an app.

Components are the visual elements that you actually see on the screen in React Native App. By choosing the best app development company, you can easily overcome this step, but still we have covered the major components available to use by the React Native core.

Basic or Core Components including Text, Image, View, ScrollView, TextInput, StyleSheet.
Components for listing the products such as Flatlist and SectionList.
UI Components that add functionality to your app are Picker, Slider, Button, Switch and more.
Android specific components such as ToastAndroid, ViewPagerAndroid, TimePickerAndroid, DatePickerAndroid, PermissionsAndroid and more.
iOS specific components including ActionSheetIOS, SegmentedControlIOS, AlertIOS, PushNotificationsIOS and more.
Other components including Alert, Animated, CameraRoll, Dimensions, Clipboard, StatusBar, Keyboard, Linking, ActivityIndicator, WebView and Modal and more.

That's not all! There are many more components and APIs available in React Native core that you can choose from the official documentation as per the need of the project.

Let's get started with the development process…

So before getting into the development process, decide what exactly you are developing in your app.

Since we are targeted to develop an app as quickly as in 10 days, therefore, we will proceed with the small application to just familiarize yourself with the basic components and enable you to get started with the app.

The end result of your app will be like this below image:

Let's get started with the coding of this app…

Developing this page is nothing but a matter of quick efforts as this text is directly coming from the component's state.

All you need is to create a new src/components directory in the root of the project and inside components create a file called Emojidict.js that actually adds these emojis to the screen.

Here's the codes.

Now as we have mentioned above, you can modify App.js file in order to display the components by using below codes.

If you will check the screen on the simulator after running these codes, then you will find the below results on your screen.

Yes, firstly, you need to consider the EmojiDict file and then proceed importing the basic components from the React Native. After that, it's time to use View components that put a container element that supports layout styling with flexbox and other styles via CSS. You can use StyleSheet to add styles to view. So in short, you can say that View components are primarily used for styling and layout of children elements.

Now it's turn to add text by using the Text component by using the below codes.

The end result of these coding will be:

So finally, with this we have completed our first React Native app, as we suggest you to hire mobile app developer to go beyond this functionality. To develop a full fledged application, there are multiple features and functionalities that you need to integrate like push notifications, UI design, user registration, click button, and more. Therefore we recommend you to go for expert guidance.

Conclusion

If you have finally decided to develop a cross-platform application for your business, then undoubtedly React Native is one of the most popular choices of frameworks that enables you to build applications with beautiful Native UI. With this tutorial, hopefully you have learned how you can get started with the basic React Native app in 10 days.

This tutorial really works, if you are ready to devote long hours to indulge in learning the process of app development. Rest, it would be recommended to hire a mobile app development company that helps you develop a fully-functional app that perfectly fits your business needs.