Perfect React Native application setup — Industry standards

What is the difference between a react-native’s boilerplate “Welcome” app and this “Industry standard” app?

Photo by LUM3N on Unsplash

I am sure, here you’ll find answer to this question. Then I’ll take you along the journey how to create that industry standard app which will be customer acceptable and ready for deployment.

WHY?

Main reason is, the getting started app you get after following the steps on “https://reactnative.dev/docs/environment-setup” will not be the one you want to publish on production for yourself or your corporate clients. You will require a name for your application that may contain space “My App” or a corporate bundle identifier “com.org.myapp” and many other things that you may search for scattered resources over the internet when the time comes.
Also, you don’t want android robo for your production app. You want your app to show a beautiful splash screen when started.

What’s here?
All the steps collated at one place for creating a professional react-native app.
Without any further adue, let’s begin.

This post covers the process of creating a new professional android application using react-native framework. This should be a one-time activity for any application. All the images and details in this document are captured while creating the “My App” app.
As of this post, I will cover ANDROID platform in detail, and references for iOS whereever required.

Topics covered are as follows:

  • Infrastructure & environment setup.

Infrastructure & environment setup

  1. My system during demo: iMac desktop with “macOS Mojave” v-10.14.5
    (You may have any OS. Make sure, you need macOS if you wish to run a iPhone build.)

Create a react-native app with appname

Let’s assume following:
App Name : “My App”
package / bundle : com.org.myapp

NOTE:
‘$ ’ symbol throughout this post in all commands is only for display. you dont have to actually use it in commands.
We are creating a react-native app using react-native-cli and not via expo.

  1. react-native version: 4.10.0

2. Open terminal at desired location to create new react-native app and use following commands:

$ npx react-native init myapp
$ cd myapp
$ code .

(“code .” this will open your project in VSCode. If it doesn’t, your terminal is not aligned with VSCode. You can manually open project in VSC)

Run on android emulator and resolve port conflicts
(if any)

  1. Download and install android Studio. It will come with AVD(Android Virtual Device).

$ npm start

  1. This will start the react-native app. Now we have to run it on an emulator.

$ npm run android

  1. This will open your app on emulator.

If you face any port conflict issue with ‘8081’

If you face any port conflict issue while executing “npm start”, like 8081 is already in use, only then follow the one-time config process below. Else, you are good to proceed to the next step — “Update application name and bundle/package”.

Let’s change the settings so our application listens to port “8090”:
PURPOSE: Resolve the PORT conflict issue on iOS MAC. In my case, port 8081 was used by Mcafee.)

  • Launch emulator on 8090:

$ ./emulator -port 8090 -avd AVD2_1_HVGA

  • Perform below changes in “package.json” (you will find this file at the root of your project):

change below 2 properties of “scripts” object as following:
{
“android”: “react-native run-android --port=8090”,
“start”: “react-native start --port=8090”,
}

Open android studio and open our app’s android project in android studio.
Now run the app in emulator. (First time, you have to run the app via android studio, else the app won’t work)
Once the app is open in emulator, follow below steps:

hit “cmd+m” after the app opens in the emulator.
hit “Settings” > “Debugging: Debug server host & port for device”
enter “10.0.2.2:8090” and hit “OK”

step-by-step screens

Now, continue from #6 of the previous step. (i.e. $ npm start)
Kill the app in emulator.
‘$ npm start’ in terminal to start react’s debug server.
Start the app on emulator. Welcome to React screen will appear and project will run successfully.

This should resolve all the port conflict issues. These are one-time settings. Next time onwards you don’t need to perform above steps.

Update application name and bundle/package

The default bundle identifier or package name of our react-native app will be something like “com.myapp”. We do not want to keep this identifier for our production app. Generally for both iOS and Android, industry prefers it to be like:
“com.<org>.<app>” — eg. “com.abc.google” or “com.mytech.myapp”
Remember, package name cannot have a space or special character. Atlease I’ve never tried that.
So let’s change our app’s name and identifier.

  1. We will change the app name from “myapp” to “My App”

Voila!!! we have successfully renamed our react-native application for android & iOS.

after #6

Add Launcher Icon (App icon)

Launcher-icon is also known as app-icon. There are a various articles and blogs suggesting you to manually copying the new icon in specific directory. Nothing wrong in that way, although it is an old way to do it.

Let’s target android first. From Android 8.0, concept of adaptive launcher icon is one of many standardisations that Android introduced.

  1. Choose/create an image for your mobile app icon.
    Make sure image size is below 1024kb and you get a (512*512 px) image, preferably square shaped ‘.png’ file for crisp & clear icon.
image asset
image asset

2. Open our project in android studio. Let it finish loading completely.
Right click on project > New > Image Asset

3. Using “Path:” field, browse and upload your desired app icon image.
There are various options to zoom/skew, set background color, etc
Use these options to bring out the best as required.

That’s it. Follow steps and click Finish. Your icons for android are set.

IOS has a comparactively simple process to change app icon.
Open projectname.xcodeproj/projectname.xcworkspace.
Click on the folder named ‘Images.xcassets’.
Click on ‘AppIcon’ in first column.
Drag-n-drop all the required icons as per the mentioned dimensions.
(You can use online tool https://appicon.co to generate app icons of all dimensions.)

Add native Splash screen

(without any glitches or flickering)

For this step, I couldn’t find any better resource than the below medium post by “Appstud”. Its perfectly explained step by step and i give it full credits to seamlessly integrate splash screen in our react-native project using “react-native-splash-screen”.

Although, to cover in very short, let me try to add few steps for android.

  1. $ npm install –save react-native-splash-screen

6. Add the image assets to the project

7. Android assets are located in “android/app/src/main/res”. There is a folder for each pixel density.

8. Follow next steps to create the splash screen:

9. Create a background_splash.xml file in android/app/src/main/res/drawable (create the drawable directory if it doesn’t exist)

10. Create a colors.xml in android/app/src/main/res/values with the following contents:

11. Open android/app/src/main/res/values/styles.xml and replace the contents with

12. Tell the app to boot on the splash screen

13. Open android/app/src/main/AndroidManifest.xml and modify the contents as follows:

14. Create a file “android/app/src/main/java/[your_package_name]/SplashActivity.java” with the contents:

15. Install and configure react-native-splash-screen

16. In android/app/src/main/java/[your_package_name]/MainActivity.java, make these modifications:

17. Create a file android/app/src/main/res/layout/launch_screen.xml (the name is important) with the contents:

Aah! That’s all folks.. it’s a bit lengthy process, although finally you should have a native, glitch-free and smooth running splash screen in your react-native android app.

NOTE: I have covered major changes only for android. I request you to refer above mentioned medium post for changes pertaining to iOS, as this post is getting a bit too long. Apologies for the inconvenience.

Now that you have an application skeleton ready, you can start adding some awesome features using react.

The react-native app structure / architecture will be explained in a separate architecture post very soon.

That’s all folks!

Say thanks by buying me a coffee

My other react-native stories:

😀Thank you😀
😀Clapping is motivating
😀Do not hesitate to applause

Thank you.
Clapping is motivating :)

Solutions architect in IT organization. Experience on wide range of solutions for web and mobile apps with cloud integration.

Get the Medium app