How To Setup Your First React Native App

Setting Up With Android SDK

Before the advent of cross platform app development libraries/framework, developers had a hard time developing mobile apps. The Java language is used for building android apps while IOS apps for apple devices are built with Swift. This meant that a particular app had to be built with different languages for each of the 2 major platforms. Consequently, a developer had to be proficient in these different languages in other to build an app across platforms.

Now, cross platform frameworks/libraries like React Native and flutter has circumvented this challenge by making provisions for a single source code to be reproduced across platforms.

In this field, React Native has gained popularity and usage over other similar cross platform libraries/frameworks primarily because it is written with JavaScript — which is arguably the most popular programming language. Also, React Native has almost similar syntax with React, a major framework on JavaScript. A developer versed in React can easily learn React Native.

Setting Up Your First React Native App

In my previous write, I explicitly wrote on setting up a React Native app with the Expo cli but it appears that Android SDK is a much better and preferred environment for app development but alas unlike Expo, its setup time is much higher and prone to failure.

N/B: This setup is based on the Linux Ubuntu distro and android mobile device.

Setting Up Android SDK

• Download and install the android SDK to the ‘home’ folder in your local machine/computer with this link — Download Android SDK
• Then, Open your default terminal and run…

sudo apt update 

…to update your packages.

• Next, install the java development kit with ….

sudo apt install openjdk-8-jdk

• Next, cd into your root folder

cd ~

• Run the command:

 ls -a

…to confirm you have .bashrc

• Now, open the .bashrc with with the command:

 gedit $HOME/.bashrc

• Add the following lines of code at the bottom of the $HOME.bashrc

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

• Now, load the added configurations into your current shell with:

source $HOME/.bashrc 

• You can verify if the ANDROID_HOME config. has been added to your path by running:

echo $PATH

Right about now, you have successfully setup the android SDK on your local machine.

You should now setup your android device to enable it gain access to your local machine for onward development.

Setting Up Your Android Device

• Enable the developer options in your Android mobile device by navigating to the About menu in settings. Consistently tap the build number therein 7 times to enable the developer options.
• Then, navigate to the now enabled developer options in settings, within it, enable USB debugging, also, allow install app through USB.
• Now, connect your Android device to your local machine via USB and ensure your local machine is connected to the internet.

At this point, your mobile is setup. Now, you need to install your react-native app to your mobile through your local machine via USB.

Setting Up And Installing The ReactNative Development App

With your mobile still connected to your local machine;

• On your terminal, run:

react-native init IntendedProjectName

N/B: The IntendedProjectName is just an alias for your desired project name.

…The Above command initializes a React Native development environment on your machine.

• cd into the just initialized folder:

cd IntendedProjectName

• Then, run:

react-native run-android

…This command builds and installs the development app on your mobile device. On successful completion, the development app automatically opens on your mobile device.

Setting Up Your App Development To Run On WIFI instead of USB

If you want your app development to run on WIFI instead of USB cable, you would have to configure the development app in your mobile with the IP address of your local machine.

• On your terminal, run:

ifconfig

• If the command doesn’t exist, then install it with:

apt-get install net-tools

• After installation, run:

ifconfig 

…again.

• Then, copy the first IP address in the second line of the second column of the displayed content.

Copy the IP address within the highlighted section in your terminal

• Shake your mobile device briskly until options/settings menu is displayed
• Within the Settings menu, navigate to Dev Settings>Debugging>Debug server host & port for device. Paste the copied IP address into the input tag and add ‘:8081’ as a suffix. Example below:

 192.168.43.105:8081

• Save and exit the Settings menu.

Finally, your React Native App is setup and running.

• To start hacking, open the IntendedProjectName with your preferred text editor and run:

npm start

Happy Hacking!!!