React Native is a framework for Javascript to create native mobile apps. Facebook announced this framework in 2015 to create iOS and Android apps using same javascript codebase instead of writing the different code for different platforms. It uses the same building blocks as iOS and Android apps use to build apps, with react architecture and javascript.
React Native Setup
Setting react native on windows machine is very easy. There are few steps to follow
1) Install JDK7 or newer version of Java from official website.
2) Install NodeJS
3) Install Android SDK
4) Set environment variable for JAVA_HOME and ANDROID_HOME
5) Install React Native CLI globally using the command
npm install react-native-cli –g
This will provide you a utility/command react-native to manage and configure projects.
6) Create React Native project using command
react-native init <project-name>
If everything gets fine you will see the following output on console
added 319 packages and updated 2 packages in 63.072s To run your app on iOS: cd D:\PROJECTS\Android\MyPU react-native run-ios - or - Open ios\MyPU.xcodeproj in Xcode Hit the Run button To run your app on Android: cd D:\PROJECTS\Android\MyPU Have an Android emulator running (quickest way to get started), or a device connected react-native run-android
In the above snippet MyPU is the project name. You can run the build on the virtual machine by configuring it in android studio but better to run it on physical device as running virtual machine is very slow process. To run build on physical device follow the steps :
*) Connect your device to machine (Android Device)
*) On developer option from Setting -> Developer options
7) Now change the directory to created project. In our case MyPU. Use cd command from terminal to change the directory to MyPU
cd MyPU
8) Run the following command to run android build
react-native run-android
A react packager will be started to load dependency graph as a new process and it will take few minutes to generate android build. If build process is successful then you will see on the command prompt
BUILD SUCCESSFUL Total time: 2 mins 47.906 secs 'adb' is not recognized as an internal or external command, operable program or batch file. Starting the app (D:\SOFTWARE\LANGUAGE\ANDRIOD\AndroidSDK1/platform-tools/adb sh ell am start -n com.mypu/com.mypu.MainActivity... Starting: Intent { cmp=com.mypu/.MainActivity }
And app will be visible on your connected physical device 🙂
Issue 1 : Unable to load script
There can be error on your connect device showing
Unable to load script from assets “index.android.bundle”
To solve this problem
1) Stop the existing running command by pressing Ctrl + C.
2) Create the folder assets under android/app/src/main/assets
3) Now you need to change the android bundle output using the following command
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4) Now run the command again to run android build
react-native run-android
Issue 2 : SDK Version Mismatch
If you have Android SDK version mismatch in build.gradle and the one installed in your system, then the following error will be shown your console
FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > Failed to find Build Tools revision 23.0.1 * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED
Solution
Open Project-Name/android/app/build.gradle file and under
android { compileSdkVersion 25 buildToolsVersion "25.0.2" defaultConfig { applicationId "com.demorn" minSdkVersion 16 targetSdkVersion 22 versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } }
update the compileSdkVersion and buildToolsVersion to the version that you have installed under Android/sdk/build-tools.
Bonus : Directory Structure of React Native App
Directory structure is a way how you construct or bind your code and into folders. Even though this does not matter in the initial phase of app but it is the best practice to use a simple directory structure of app for better understanding. You can follow any directory structure to construct your app. But personally I use this structure to make my apps.