Anton Zuev
Anton Zuev

iOS Developer

How to convert a React app to a React Native app

2020-10-26

How to convert a React app to a React Native app
  1. Introduction
  2. Similarities
  3. Differences
  4. Steps to follow
  5. Conclusions

Introduction

In this article we are going to talk about the differences between React and React Native. Also about how you can convert a React app into a React Native app.

Let's first briefly talk about React. React is a JavaScript library used to create user interfaces. It was initially released by Facebook in 2013. React uses a concept of virtual DOM to represent what your UI should look like while changing the state of your application.

React Native is a mobile framework used to create mobile applications with JavaScript. It uses the React library to build the user interface components and define the business logic of an application. It was also released by Facebook, in 2015. A novel feature that React Native provides is live reloading that allows you to see the changes made to the code immediately. This feature has been available in web development for some time, but in the realm of mobile development, it was a new concept.

Similarities

# Both use React.

Both the user interfaces for React web and React Native apps will have the same general JavaScript structure with pros, state, and all component lifecycle React methods. You can use the same state management libraries (e.g. Redux) in React Native as you would for React on the web.

# JSX

React Native uses JSX as a templating language in the component's render method to define the user interface. Although the base components used in React Native are not DOM elements (like <div> for example), it uses the same syntax, since it is all JSX.

# Browser debugging

JavaScript code in React Native is typically parsed into a device's JavaScript engine, called JavaScript Core. However, if you enable debugging mode on a mobile simulator, you will be able to run JavaScript through a browser's JS engine and therefore have access to tools like Chrome's debugging tools. This allows you to use console.log() and read a browser's console. You can also inspect the XHR requests that are made, and if you're using Redux, you can also take advantage of the Redux development tools.

# Package.json

All JavaScript dependencies can be managed with yarn or npm and you will see all those dependencies in a package.json file. This allows you to use NPM packages and popular dependencies such as lodash, date-fns and immutable. However, any dependencies that rely on HTML, SVG, or the browser canvas will not be able to be used with React Native.

Differences

# Base components

React Native comes with a set of built-in components that can be used to render UI elements on the page. These are different than the standard <div>, <p>, <input>, and other DOM elements used with React on the web. Some of the React Native components are <Text>, <View>, <TextInput>, and <Image>. Of course, there are many others and there are also some third-party components that you can download from NPM.

# Styles

Styling is not done with CSS in React Native, however the syntax is quite similar. To apply styles in React Native, you create a StyleSheet object and apply it to the style attribute of a component. The property and values ​​used in the StyleSheet object are similar to what you would find in CSS, but the name uses camelCase and there are also many features missing from React Native styles that you would otherwise find in regular CSS.

# Navigation

React Native has 2 popular options for implementing native navigation in an app: React Navigation and React Native Navigation. Very original names ;)). Personally, React Native Navigation is my preferred solution as it uses the actual native navigation API associated with iOS and Android, while the React Navigation implementation is done exclusively in JavaScript.

Honestly, incorporating navigation libraries into React Native can be a pain when it comes to complex nested routing and styling navigation-related elements isn't always easy. Implementing navigation in React web applications is much easier.

# Platform specific code

React Native can detect which platform an app is running on (iOS or Android) and serve a different set of code based on that platform. This can be done either by separating the React components into files ending in ios.js and android.js or it can be done using the Platform module that ships with React Native.

# JavaScript Runtime

React Native runs its JavaScript code through the device's JavaScript core, unless the app is running in debug mode, in which case the browser's JavaScript engine runs the JavaScript code.

React Native runs in 2 different threads. The main thread is responsible for rendering the user interface and receiving gestures from the user, while the JavaScript thread is responsible for defining the structure of the user interface and handling the business logic of the application.

The architecture of React Native is quite interesting and you can find many good talks on YouTube from Facebook developers talking about the inner workings of React Native. Here are two talks worth watching if you're interested in learning more: one, two .

Steps to follow

To convert a React web app into a React Native app you have to follow the following steps:

  1. Create a React Native app from scratch. For that you have to execute the commands like "npx react-native init SampleProject" or for a Typescript project "npx react-native init SampleProject –template react-native-template-typescript"
  2. Remove css files from all files. You have to remove all import 'simple.css' or require ('simple.css') in all files. React Native uses another styling system.
  3. Convert React components to React Native components. React Native uses its own components and we have to change the DOM components to React Native components.!
  4. Create the styles for components. You have to create the StyleSheet objects that are used in the React Native world to style the views. const styles = StyleSheet.create({ container: { flex: 1, padding: 24, backgroundColor: "#eaeaea" }, title: { marginTop: 16, paddingVertical: 8, borderWidth: 4, borderColor: "#20232a", borderRadius: 6, backgroundColor: "#61dafb", color: "#20232a", textAlign: "center", fontSize: 30, fontWeight: "bold" } });
  5. Change the navigation libraries to React Native ones. There is a version of React Router for React Native: React Router Native. There are also the React Navigation and React Native Navigation libraries.
  6. If your React code somehow uses the Node.JS API (fs,os,Path etc) or uses objects like window() or history(), you have to change the code according to the context to use the React Native API.

Conclusions

Overall, I think it's pretty easy to convert a React app to a React Native one. There are also some important differences. Yes, it is true that React Native does not have a developer community as large as the community that surrounds web applications, so it is not surprising that there are not as many libraries for React Native. Additionally, debugging code in React Native can be difficult at times, which can be the cause of some frustration. Although React Native is arguably the best tool for hybrid (cross-platform) mobile apps, there is still a way to go. Native applications take advantage of mobile capabilities in the best possible way, but the difference between a native application and a hybrid application is becoming smaller and smaller.