Getting started with React Native Apps

I recently started off with mobile application development using react native. In this blog post I’m going to teach you the basic steps that need to be followed to create a React Native Android App and run it on Android Emulator.

1. Create a Standalone app in react-native.

react-native init MyApp

2)Create a new device on Android Emulator and start it. Then check if the device is available, using following command.

adb devices
List of devices attached
emulator-5554   device

2) Go inside the MyApp folder. Then run the below command to install the app on the started device.

cd MyApp
react-native run-android

3) This will install the app on the device, but will show you with an error :

unable to load script from assets index.android.bundle

4) To fix this error, you can run the following commands one after the other. Refer [1] for more details.

mkdir android/app/src/main/assets
npm add @babel/runtime
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
react-native run-android

5) The above will fix the issues and will show you the welcome screen of the sample React Native App.

6) Then open the MyApp project with your favorite IDE and open the App.js file. Then do some modifications to the welcome message. Now we are going to see whether our modification is reflected in the app.

Run react-native run android command again. You will see the modifications are not shown on the app.

So we have to re-bundle assets of the app[2]. Run this command to re-bundle assets and run it again on the Emulator.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest andro id/app/src/main/res

To see the logs from the device open a new terminal and do the following.

cd MyApp
adb logcat

References:

[1] https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows/51011429

[2] https://stackoverflow.com/questions/45074757/react-native-is-stuck-at-old-version-app