- ReactNative provides application experiences on native platforms .
- At present ReactNative supports ios and Android application development.
- React Native is popular in developers as it supports learn once, write anywhere.
- In this demo,”We will learn to setup ReactNative in Windows 8.1 machine for Android application development”.
- We need to install Android SDK and build tool that is API version 23.Also We need to have Java JDK installed in the machine.Again set the JAVA_HOME and ANDROID_HOME system variable with proper path.
- ReactNative command line interface can be installed using npm install react-native-cli –g command.The following screenshot shows the terminal with ReactNative CLI installation.
- On successful installation of ReactNative CLI we can now generate a sample project, Lets name it as ReactNativeAndroidDemo.To create a ReactNative project use react-native init ReactNativeAndroidDemo.The following screenshot shows the terminal for generating a ReactNative based project.
- The generated project structure of ReactNativeAndroidDemo looks like following screenshot where we have 2 main directory for Android and IOS platform
- The following screenshot shows the detailed directory structure of Android platform which is a Gradle based project structure.
- The following screenshot shows the ADB monitor which can be open using monitor command in the terminal.This monitor windows helps the developer to check message and device status and many other configuration parameters.For this demo I have used Moto G 1st Generation phone with Lollipop version 5.1 .
- Now we can run the application using react-native run-android command.But we got an error screen with RED background with some message that unable to load JS bundle.The following screenshot shows the error screens.
- We can solve the previous error by following some steps.We have run the adb reverse command.The following screenshot shows the terminal with adb reverse command in execution.
- We need to start the JS server using react-native start command.The following screenshot shows the terminal with packager instantiation in execution.
- Finally we can run the react-native run-android command to run the application.The following screenshot shows the preceding command in execution.
- On successful execution of the previous command we can see the application screen in the device monitor with a message ‘welcome to ReactNative’.
- Now we can shake the device to open the rage shake menu.The following screenshot shows the rage shake menu appeared after shaking the device.
- We can select the Dev Setting option from the rage shake menu to configure Auto reload on JS change and FPS debugging to check performace.The following screenshot shows these option present inside the dev setting option.
- Now we can see the modified screen with FPS counter fisplayed onn the top right side of the screen.The following screenshot shows the output of this demo.
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/ReactNativeAndroidDemo
