Read | Practice | Advance
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.
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.
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.
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.1
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.
To reduce the size, go to android/app/build.gradle and change the following variables to true:
def enableSeparateBuildPerCPUArchitecture = true
def enableProguardInReleaseBuilds = true
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"}
Now after re-running react-native run-android
you should see two (much smaller - between 4MB and 5MB) APKs in the output directory.
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:
<itemname="android:windowFullscreen">
true
</item>
Set the name in android/app/src/main/res/values/strings.xml
:
<resources>
<string
name="app_name">
start up app
</string>
</resources>
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.
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 This email address is being protected from spambots. You need JavaScript enabled to view it.