Concepts of React Native — Part 2

Image for post
Image for post

📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

History

Earlier, native apps needed to be developed separately for different platforms such as using Java or Kotlin for Android, and C or C++ or Swift for iOS. A developer need to be aware of all the tech stack (or languages) involved in platform-specific application development.

Then came React Native. Facebook released the first version of React Native in March 2015. React Native applications are real mobile applications and not just web applets. Now a days, React Native is the most popular framework for developing cross-platform mobile (native) applications.

Introduction of React Native has solved the complete above process. How ?

  • This framework has made it possible to create native mobile apps for multiple platforms (for iOS and Android) simultaneously.
  • You can develop full-blown mobile applications for both iOS and Android using a single language, i.e., JavaScript.
  • This is a huge advantage, as it saves a lot of time and money and also eliminates the steep learning curves that are associated with each platform’s native development language (Java or Kotlin for Android, and C or C++ for iOS).

◉ Code structure in React Native

Image for post
Image for post

◉ Why Use React Native?

Cross-Platform

One of the most significant advantages of React Native is that you can develop an application for both Android and iOS ecosystems simultaneously by writing the same code with just a few modifications for each platform.

JavaScript

There is no need to know the languages used for platform-specific application development, as React Native uses only JavaScript, probably the most popular programming language right now, for the development of mobile applications.

Performance (hot reloading)

React Native enables speedy development of mobile applications since a similar code is used for applications for both platforms. It also facilitates a hot reloading feature that makes sure that small changes done to the application are immediately visible to the developer.

Large Developers’ Community

A huge developers’ community ensures that all the queries are resolved in time, and therefore, adequate support is available for the React Native framework.

It Keeps Getting Better

The community, as mentioned above, also keeps updating React Native with new functionalities and making sure that bugs do not occur.

Used by Many Companies

Though the framework is relatively new, many companies have already migrated the applications to this framework. Additional companies are looking to use the framework to speed up the process of development and maintenance.

Excellent Career Opportunities

React Native has become very popular lately due to advantages like cross-compatibility. Consequently, this popularity has led to high demand for React Native developers.

◉ React Native — Architecture

There are other frameworks which allows the developers to build mobile apps using JavaScript, then what’s so special about React Native? All the other frameworks render the app in a web view which doesn’t at all give native like feel where as React native renders the native views itself.

It’s very natural to think that in react native, the code we write in javascript is directly converted to corresponding native languages, but it’s NOT. As native languages swift, objective C for IOS and java for android are strongly typed but javascript is not. But in real, for each view in native which needs to be rendered, there’s a corresponding component in react native. For example react native has TextInput component for UITextView in IOS and TextView in android. So when we write code for TextInput component in javaScript, the corresponding views gets rendered from native.

Components

React Native platform has three parts. The first one is Native Modules, i.e iOS and Android native modules which are already known to us.

The second one is JavaScript VM, it is where the JavaScript code runs. All iOS and android devices use JavaScript core, which is the engine used to run the JS code. In iOS devices, react native uses the engine provided by the IOS platform itself where as for android devices, JSCore is bundled along with the app.

The third is the RN bridge, through which the communication between native and react native happens by message passing.

Image for post
Image for post

Threading Model

Main Thread: This is the thread which gets spawned when the application is started. It starts the JS thread to execute the JS code while the main thread listens to any touch, scroll events. The JS thread sends instructions of what views are to be rendered now, in the form of messages through RN bridge.

JavaScript Thread: This the place where the actual JS logical code, like API calls etc gets executed.

Pros and Cons of react native over native development

Advantages:

  1. Cross platform development with single set of code, there’s no absolute need to learn multiple languages.
  2. Build time in native is a sure pain. Hot reloading provided by react native saves the dev’s time for quicker development of features.
  3. Highly customisable in user’s perspective, for suppose if the app is developed using react native and the app has some 5 features. The users of the app can choose the features only which they want out of the available 5 features. Which is a plus point in terms of saving the space on mobile.

Disadvantages:

  1. Not all native corresponding components are available in react native. Although there are external libraries which are developed but some of them doesn’t serve the whole purpose.
  2. The main thing is that the developer community is small and isn’t evolved enough.
  3. The app size increases by a significant amount because of JSCore engine in android app.
  4. Due to bridge communication through messages back and forth, some fast events like scroll can sometimes cause blank screen.

There are both advantages and disadvantages in significant amount. Depending on the app requirements we have to choose whether to use react native or not.

◉ React native component lifecycle

Image for post
Image for post
RN lifecycle

Constructor: This is the place where the state of the component is initialised. This is the only place where we can set the state directly like this without the setState function.

this.state = { value: initialState };

ComponentWillMount: This method is called only once at the start for a component before render. It’s safe here to change the state of the component.

Unlike web, if we navigate from view A to B, view A doesn’t get unmounted. It stays mounted in the back, so when navigated back from B to A, this method doesn’t get called again.

So, how to know whether view A is actively visible or not? We can’t rely on componentWillMount for obvious above reasons. To achieve this, we have to register for didFocus, willFocus, didBlur and willBlur events like this.

Render: This is where the component renders with the assigned state. Its not safe to setState here, as it triggers render again and which will lead to an infinite loop.

ComponentDidMount: This method is called after completing render only for the first time. Here we can alter the state as render gets called right after this if there’s any state change.

If there’s any update in props/state further, the lifecycle will be like this.

Image for post
Image for post

componentWillReceiveProps: This is called only when there’s change in props passed from parent so that we can re-render.

shouldComponentUpdate: This method can be used to avoid unwanted re-renders for better performance. So, based on the received new props, we can decide whether to update the component or not.

componentWillUpdate: This is called when the the above method returns true. We should not call setState here.

componentDidUpdate: This is called after the re-render, again its not safe to change the state here as it leads to infinite loop. If necessary then state can be updated by putting a proper condition.

At last componentWillUnmount is called before un-mounting the component. This is where we can unregister all listeners, call disposers etc.

◉ Create a React Native Application: To-do App

We are going to make our mobile application, and we will call it To-do. This application will allow us to add and manage tasks in the application. In this tutorial, we will focus on running the app in Android OS, so the code is optimised accordingly. We recommend using an Android mobile for this tutorial.

Our final mobile application will look like this. Let’s get started!

Set-Up the Development Environment

Image for post
Image for post

“Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript codebase.” — Expo documentation

Navigate to https://expo.io/learn. We will use the Expo framework to develop our React Native application. There you will find all the instructions you need to start creating.

Image for post
Image for post
  • The first step is not relevant in our case; so let’s skip it and directly start with Step 02, which is to install nodeJS on the computer.
Image for post
Image for post
  • After nodeJS is installed, we need to follow Step 03 and get the command-line tool for Expo; for that, type the following command in the command prompt or terminal
npm install Expo-cli — global
  • After the Expo-cli tool is installed, we need to follow Step 04 and create our project. To do that, type the following command in the command prompt or terminal.
expo init todo-app

Next, choose blank from this screen for a blank application while including Expo workflow features.

Image for post
Image for post

Enter the name of your application, and press Enter to continue setting up the application.

Image for post
Image for post
  • To start the application, you can navigate to the newly created project folder and type “npm start.” To stop the application, press Ctrl + C.
cd todo-app
npm start

The development server will start running, and a new tab will open in your web browser with the Expo manager screen.

Image for post
Image for post

There are two ways you can now preview the application:

  • You can either run the app on an Android emulator, which you can get by installing Android Studio on the computer.
  • Or, you can install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes in the code.

Install a text editor of your choice. We are using the Visual Studio Code in this tutorial. Still, you can also use other editors like Atom and Sublime Text if you are more comfortable with those.

Image for post
Image for post

Now, we have all the tools we need to create a new React Native application. We have already created one, the To-do app. So let’s get started by creating the components of our mobile application.

Create Components of the App

Similar to React, everything here is a component. Everything you see here is a separate component that has been combined to create a complete mobile application. The following are the components that we will be creating for this application:

  • App
  • This component will act as a container for all the other components to come together and provide a complete application
  • Header
  • As the name suggests, this component will be the header of the mobile application
  • Display Image
  • This component is used here to display the image on the main screen
  • To-do Item
  • Each task added is a separate component
  • To-do Input
  • This component is used to add tasks to the application

It is very important to visualize a React Native application in terms of components before starting to work on it, and that’s precisely what we are doing here.

Let’s now start with the development of To-do App:

Image for post
Image for post
  • Open the project folder in the text editor, and inside the src folder, create a components folder into which we will add all our components.
Image for post
Image for post

We have completed the development of our To-do mobile application, and it should be working as illustrated below. Let’s go ahead and summarize all that we have done to create this mobile application.

Image for post
Image for post

Summary of the Steps:

  1. Set-up an environment for the development of the application
  2. Install the Expo app on the mobile device to preview the application in real-time.
  3. Visualize the application in terms of components and then maintain the project structure accordingly in the text editor
  4. Add all the components to the project
  5. Make sure each component works as expected
  6. Enjoy the result and feel free to tweak the design and functionality as you want

for further read on …

We have now created a fully functional mobile application using React Native that works and looks great! We hope you were able to follow all of the instructions easily and can sit back and bask in your accomplishment!

React Native with Redux

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app