Switching from React JS to React Native!

Are you a React web developer? If yes, then you’ll be excited to hear that you’re very close to being a React Native mobile developer. The skills and good practices we’ve built around React carry over to React Native.

The biggest and probably most important difference between React JS and React Native are the tags. While in React JS you could use basic HTML tags in your code, React Native uses its own kind of tags. These different tags can be imported from react-native upon the creation of your file.

import React from 'react';
class MyComponent extends React.Component {
  render(){
    return (
      <React.Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </React.Fragment>
    );
  }
}
export default MyComponent;

We can even do some basic styling inside of the tag. Pretty simple right? You just use the same tags you would use in HTML, but with React Native we have to use their own kind of tags.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class ReactNative extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

We can see some key differences between the two code snippets. While you still import react the same way, you need to also import react-native. And those new tags I’ve been talking about are just what you’ll be importing. Each and every single tag that you want to use needs to be imported from react-native.

The most basic and fundamental tag is View. React docs describe View as a container that, “supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, android.view, etc.” View is basically what makes react-native so flexible to work on any other phone.

DOM ?
We know the DOM is specific to web browsers and React Native runs in a native mobile environment, without a browser. React Native translates our React code into native components for each platform we’ve chosen (most popularly, iOS, or Android). This means we have no DOM elements, click events, or CSS, but we do have substitutes that are very similar.

NPM Packages
Most of your favorite tooling found on NPM is going to work with React Native. As mentioned before, React Native has no DOM. Therefore, any NPM libraries that rely on the DOM will not work with React Native. Our biggest loss here is going to be UI libraries. Various libraries that give us pre-formatted form fields with error handling, validation, and other nifty features are not compatible with React Native.

On the bright side, we do get our favorite state management libraries we’re using with React on the web. This is one of the major benefits of coming to React Native with a background in React. You know how to work with data and how to handle async callbacks. It works just the same in React Native. It is even possible to package your state management business logic in a private NPM package and share it between your React and React Native solutions!

Text and Image tags are pretty self-explanatory. the only thing I feel the need to explain is that an image’s URL needs to be put in an object in the tag. and the key for that URL is called the uri.

The last important thing that I want to touch on is styling! Styling can be done pretty simply in react-native. Instead of doing your styling in a separate CSS page, you can do your styling in the same file. Import Stylesheet from react-native and give your tags style attributes. The way that I prefer to do this is to create a variable and call StyleSheet.create and give it an object, and in that pass in an object for each tag you would like to add styling to.

React Native is a very useful tool in these phone-centered times. If you’re familiar with React JS it should be pretty simple to pick up!

ReactJS and React Native Apps
Companies who’ve already adopted ReactJS or React Native did so for different reasons. Here are the most notable adopters.

Instagram. The Instagram team wanted to build a website, a one-page app, to let web visitors also access the social platform. And ReactJS seemed the best fit for this purpose. The web app was optimized and appeared to be quick and comfortable for users. Now, both mobile and web Instagram apps are built with React.

Netflix. Netflix, which adopted ReactJS in 2015, is now using it together with Gibbon, a rendering layer. Back then, Netflix chose to React due to its one-way-ticket model of data flow and declarative approach to programming.

Airbnb. The company decided to switch to ReactJS due to its component reusability, very simple code refactoring, and iterating. Now it’s used in internal structures of the company’s mobile app and webpage.

Uber Eats. The main idea behind creating the platform was to join three types of participants: restaurants, drivers, and clients. The hardest part that developers faced was interpreting the actual restaurant dashboard from the web to mobile, both Android and iOS. Going React Native was the only way. Although only a part of the Uber Eats mobile app is built on React Native, the developers have achieved the expected results. The framework capacity helped them scale up and grow the service.

If you’re good at React, you should definitely give a try to React Native!