How To Build and Test React Native Apps On iOS and Android?

As a digital entrepreneur, you might know the value of React Native push notifications for your business.

It is considered the most powerful communication tool for businesses when interacting with their audience. It keeps the audience updated about any important information, announces sales and offers, and eventually drives more eCommerce conversions.

But knowing its benefits, are you looking for a guide on how to create and test React Native on mobile platforms like iOS and Android? You don’t have to worry anymore! This article will be uniquely helpful.

So, the react-native-push-notifications library helps you set up controllers to consume local or remote notifications for two operating systems primarily used in mobile technologies, such as iOS and Android.

It enables you to create iOS and Android mobile apps and benefit from code reuse across platforms.

As a result, you must understand how to build and test it on iOS and Android apps.

In this article, we will discuss what React Native is and how to build and test React Native apps on iOS and Android.

Before we start, let us give you A Short Overview Of React Native.

What is React Native?

React Native, which is based on “React,” is a JavaScript-based framework for writing native mobile applications for iOS and Android platforms and Facebook’s JavaScript library for building user interfaces generally on the web. But, rather than targeting the browser, React Native targets mobile platforms.

Why Should You Use React Native?

A web developer can use React Native to write smooth, fast mobile apps from the comfort of a familiar framework and a single JavaScript codebase. With the help of React Native, developers can write accurate, natively rendered mobile applications for iOS and Android.

It helps build apps on two platforms at once while maintaining the look, feel, and productivity of an app built on specific iOS or Android platforms.

Developers use React Native for various reasons, including

• It is lightweight.
• It offers engaging performance, especially for quickly-changing data.
• It has a component structure that encourages developers to naturally write more modular, reusable code.

Now let’s see how to build and test React Native apps on iOS and android.

How To Build React Native Apps On iOS and Android?

To get started with building your React Native apps, you might need to set up the environment required for running React Native.

But how?

Okay, so Android Studio is the most convenient for core android development. Despite this, we only require SDKs for Android. The development can be done using an editor, for example, “VScode.”

Let’s discuss some steps to build React Native apps. Here, we go!

Steps for setting up a React Native Project without Android Studio on Linux.

Step 1-  Download in npm and node. We will download a version manager nvm (setup both node and npm)

sudo apt install curl

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

    source ~/.bashrc

    nvm install vxx.x.x

Step 2-  Download in Java SDK 8

   sudo apt-get openjdk-8-jdk  

Step 3-Download React Nativecli.

npm i -g react native-cli   

Step 4- Download the Android SDK tools

Install the latest SDK tools from the website, Android Studio. You can find the SDK manager for your OS in the Command line tools section at the bottom. The version file at the time of writing was Linux-7302050_latest.zip.

• Extract the downloaded file
• It will contain a folder called cmdline-tools. (The contents may change in later versions).
• You need to copy the contents inside the cmd line-tools folder to /opt/android by

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

• To set a path, you must now update the. bashrc file in your home folder.

ANDROID STUDIO CMD-LINE PATH

export ANDROID_HOME=/opt/android

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest

export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

• After updating them, the .bashrc file runs source~/.bashrc to reflect the changes.
• Run SDK Manager in the terminal to initialize it.
• Now download the required dependencies for our react-native environment  (the versions might change later).

sudo SDK manager “platform-tools” “platform; android-29” “tools” “patcher;v4” “build-tools;29.0.2” 

• If the sudo SDK manager does show the command. You can directly access the SDK manager by this path.

  sudo /opt/android/cmdline-tools/latest/bin/sdkmanager

• Now you can list the downloaded dependencies by SDK manager –list

Step 5 -Connect a manual android device and enable USB debugging.

    In Settings -> About phone

   Continuously tap the Build Number

   Go to Settings -> Developer options

   Enable USB debugging

You can also check your connected device by ADB devices. ( ensure the file transfer is also selected on connecting android devices)

Step 6 – Build a react-native app

react-native init projectname

 cd projectname

    react-native start 

Step 7- run your application on an Android device through;

   react-native run-android

Step 8-  If everything goes well :), the app will be loaded into your phone now.

Now We Will Set Up React Native On Mac Os Without An Android Studio.

#Steps To Setup React Native Without Android Studio on Mac OS

Step 1- Download 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

Step 2-  Download React Nativecli.

npm i -g react-native-cli

Step 3-  Download  Homebrew and download the watchman service following the below-mentioned command.

sudo curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash

    brew install watchman

Step 4-  Set 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

Step 5- Build a react-native app.

react-native init projectname

   cd projectname

   react-native start

Step 6- Run your app on an iPhone device.

react-native run-ios

Now the setup for both Android and iOS is ready. After setting up, you can use the same source code to develop an app on iOS and Android.

How to test React Native apps?

There are two ways to test a mobile app:

• Manual Testing
• Automated testing

Manual Testing:

Testing mobile apps freehand is easy, but it is time-consuming and needs lots of effort and repeated tasks to be done every time a build is ready for testing. We might need functional validation, UI/UX checks, and regression testing of the last built code for every build. However, you can always have a mobile app testing checklist for fast and smooth results.

Automated Testing:

Mobile automation testing is the perfect solution for the modern world. It saves time-consuming and costs saviour. App test automation can also provide documentation for your test cases and scenarios. Write it once and run it several times.

Conclusion

So, this was the guide for how to build and test React Native app for iOS and Android. Therefore, if you are looking for the best React push notification provider to make your business faster and smoother, always choose Wonderpush.

Author Bio

Wonderpush– We are the best push notification platform that provides a simple, inexpensive way to send push notifications to Apps and Websites. You do not require any programming skills to get started as we provide full-featured APIs that will suit the most demanding developers.