Setup your first React Native app and publish to Play Store

React native is a framework for building mobile app with JavaScript leveraging ReactJs which basically uses native UI components. If you are familiar with ReactJs or come from front end background, Reactjs creates virtual DOM which act as shadow to the real DOM available. When an element changes, that change is reflected on the real DOM by Virtual DOM corresponds to each element. However, in React Native, there is no DOM rather than Native Components which are provided by platforms such as iOS and Android. There are no web views here.

Step 1: Set Up Environment

In order to build the eventual APK to upload to the store, you need to install Android Studio. After installing make sure the version of SDK is 27 as this is what react Native uses.

 Step 2: Install the JDK

Make sure a recent Java Development Kit installed (like version 8). The installation differs depending on your platform. You can use Oracle’s Java SDK or use SDKMAN to install other options, like OpenJDK.

Step 3: Install React Native CLI and Initialize the Skeleton

Next, install the React Native Command Line Interface. Make sure you have Node installed which varies depending on your operating system. (I am using version 8.12.0).

npm install -g react-native-cli@2.0.1Code language: CSS (css)

You should have a command react-native available to you, which includes the init option.

react-native init startupapp

This will create the startupapp directory and put a React Native project inside, with a runnable skeleton. Change to the directory, connect your Android phone or run an emulator (after having installed Android Studio), and run the project.

NOTE: If Android Studio prompts you to open a project before you can create an emulator, you can point to the startupapp/android directory.

cd startupapp

react-native run-android

The output will be generated in android/app/build/outputs/apk/debug. You should see an app-debug.apk that is around 8MB in size.

Step 4: Reduce the Output size of the App

To reduce the size, go to android/app/build.gradle and change the following variables to true:

def enableSeparateBuildPerCPUArchitecture = trueCode language: JavaScript (javascript)

def enableProguardInReleaseBuilds = trueCode language: JavaScript (javascript)

You’ll also have to remove the ndk section of default Config to removing the conflicting configuration in ndk abiFilters error:

ndk { abiFilters "armeabi-v7a", "x86"}Code language: JavaScript (javascript)

Now after re-running react-native run-android you should see two (much smaller – between 4MB and 5MB) APKs in the output directory.

Step 5: Adjust the App to be Full-screen on Android

To get your app to not show the title bar, go to android/app/src/main/res/values/styled.xml and add the following inside the <styles> element

<item name="android:windowFullscreen">true</item>Code language: HTML, XML (xml)

Step 6: Setup App Name and Icon

Set the name inandroid/app/src/main/res/values/strings.xml:

<resources>Code language: HTML, XML (xml)

 <string name="app_name">start up app</string>Code language: HTML, XML (xml)

</resources>Code language: HTML, XML (xml)

For the icon, it’s best to open your project in Android Studio (use the android directory) and create a ‘drawable’ directory in assets. Then right-click and say New -> Image Asset. This will let you import your large icon and overwrite ic_launcher which is what is used for the launcher icon, generating all the versions you need for the Play Store. Re-deploy with react-native run-android and you should see a proper name and icon on your apps list.

Step 7: Launch the App on the Play Store

The last step is publishing what you have done on the Play Store. The standard docs have great advice on this as well as a pre-launch checklist. Besides reading the developer policies (which you should do) you need to sign up for a developer account and pay the $25 registration fee.

Hope this will help you for a quick start. You can leave comments below for any help or confusion. I will try to address those as soon possible. Also, you can contact iXora Solution React Native Team for any assistance on your project implementation at Contact-iXoraReactNative