Develop iOS and Android Apps from Scratch with React Native

Develop iOS and Android Apps from Scratch with React Native

React Native enables the developer to build high-performing apps for Android and iOS. 
React Native is a JavaScript framework released by Facebook. It is useful to build a mobile app in a much easier way. One can say that it is the React.js version of developing mobile apps.

 What is React Native?

It is based on React, a JavaScript library, to create a user interface for the webpages. On the other hand, React Native creates a user interface for mobile platforms.

Using React Native, a web developer can create mobile apps with the comfort of a familiar framework and single codebase. React Native is used to create a native app for both iOS and Android. 

It helps in creating mobile apps for two platforms at once. At the same time, it maintains the look and feels of the app as if it was built specifically for the iOS or Android platform.

In the developer community, React is popular for the following reasons:

  1. It is lightweight
  2. It offers great performance.
  3. It encourages developers to follow modular-based coding practices.

React is useful for creating web apps, while React Native is used for creating mobile apps. So, it tends to have differences that developers need to know. They need to use the <view> component rather than of <div> and <image> instead of <img>. Compared to other popular frameworks available in the market, React Native has the largest ecosystem.

The developer will have the same experience as he would have while working with other frameworks. It will be best to have knowledge of Java and mobile app development.

React Native is Native in a true sense

React Native is a Native development platform in the true sense, while other cross-platform frameworks run code in a browser, for example, Ionic. It might provide good UI and other interactive features, but it still uses a web browser that is not a native feature.

React component tells its appearance, and React handles the rendering process. The abstraction layer distinguishes two components.

React uses HTML tags to render web components. The same layer will work as the bridge and is responsible for invoking rendering APIs on Android and iOS. On Android, React Native components renders to native Views, while on iOS, they will render to real UI views.

React Native runs an app using the JavaScript engine available on the host platform without blocking the main thread of UI, and it will bring the following benefits:

  • Behavior
  • Animations
  • Native Performance

Similar cross-platform development tools like Cordova and Titanium cannot come closer to this level of native performance or UI appearance.

React Native Gives A Much Stronger Developer Experience

React Native offers a great developer experience compared to standard development for Android and iOS development. React Native app is built using Javascript, which will give many web development advantages.

One advantage is to refresh an application to see the changes made by the code. It seems like a boon compared to the time spent building and rebuilding traditional mobile applications.

It makes development effortless by providing intelligent error reporting and debugging tools.

React Native supports Code Push

Code Push is a service that updates the app on the user’s device without clicking on the update button from the app store. React Native uses Code push, a cloud service by Microsoft, for the same purpose.

Getting started with React Native

It requires a little effort to get ready React Native to write native code for Android and iOS using a single JavaScript codebase.

First, to build a React Native app, we must set up the development environment and install the missing dependencies required to run React Native. Traditional android app development requires an Android studio but React Native developers require only Android SDKs for the same purpose and an editor like VScode.

Setting up a react native project without Android Studio on Linux.
  1. Installing npm and node. We will install a version manager nvm.sudo apt install curlcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashsource ~/.bashrc
    nvm install vxx.x.x

  2. Installing java sdk 8
    sudo apt-get openjdk-8-jdk

  3. Install react native CLI
    npm i -g react-native-cli

  4. Download the Android SDK tools

    Download the latest SDK from official website, android studio. You can find the sdkmanager for your OS on the Command line tools only section at the bottom. At the time of writing this post, the version file is commandlinetools-linux-8512546_latest.zip

    4.1. Extract the downloaded file.

    4.2. It contains a folder cmdline-tools.

    4.3. You need to copy the contents inside the cmdline-tools folder to /opt/android by

    *sudo cp -r . bin lib /opt/android/cmdline-tools/latest

    4.4. Now you need to update the .bashrc in your home folder for setting path.

    4.5. After updating the .bashrc file run source ~/.bashrc to reflect the changes.

    4.6. Run sdkmanager in the terminal to initialise it.

    4.7. Now install the required dependencies for our react-native environment.

    sudo sdkmanager “platform-tools” “platforms;android-29” “tools” “patcher;v4” “build-tools;29.0.2”

    4.7.1 If sudo sdkmanager does shows the command. You can directly access the sdkmanager by this path.

    4.8. Now you can list the installed dependencies by sdkmanager –list

  5. Connecting a physical android device and enabling USB debugging

  6. Create a react-native app


    react-native init projectname

    cd projectname

    react-native start

  7. To run your app on an android device


    react-native run-android

Now we will setup react native on Mac OS without android studio.

Setup react native without android studio on Mac OS

  1. Installing nvm
    sudo apt install curl
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bash
    source ~/.bashrc
    nvm install vxx.x.x

  2. Install react native CLI.
    npm i -g react-native-cli

  3. Install Homebrew and install watchman service
    sudo curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
    brew install watchman

  4. Setting up xcode
    https://apps.apple.com/us/app/xcode/id497799835?mt=12
    After xcode installation, install cmd line tools for xcode under xcode -> preferences -> Locations

  5. Create a react-native app
    react-native init projectname
    cd projectname
    react-native start

  6. To run your app on an iphone device
    react-native run-ios

Set up for Android and iOS is complete. A developer can now write the same source code to develop an app for Android and iOS.

Setup react native without android studio on Mac OS

  1. Installing nvm
    sudo apt install curl
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bash
    source ~/.bashrc
    nvm install vxx.x.x

  2. Install react native CLI.
    npm i -g react-native-cli

  3. Install Homebrew and install watchman service
    sudo curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
    brew install watchman

  4. Setting up xcode
    https://apps.apple.com/us/app/xcode/id497799835?mt=12
    After xcode installation, install cmd line tools for xcode under xcode -> preferences -> Locations

  5. Create a react-native app
    react-native init projectname
    cd projectname
    react-native start

  6. To run your app on an iphone device
    react-native run-ios

Set up for Android and iOS is complete. A developer can now write the same source code to develop an app for Android and iOS.

Wrap up

There are enormous benefits to using React Native. It saves time and cost. Development efforts were cut down by half. So it must be a strong choice for the next mobile app development project. One team can develop an app for two platforms by using React Native and can work on a common React framework.

Recent Post