You can use your knowledge on React to develop the native android and ios mobile application. In order to get started.
- Make sure you have installed node. Download and install using this link :Node.js
- Open command line and verify you have npm installed using command: npm -v
- Now, from the command install create-react-native-app build tool using command : npm install -g create-react-native-app
- Now you can use tool to create your project using command : create-react-native-app MyFirstMobileApp
- Now, go inside the project directory : cd MyFirstMobileApp
- Now its time to start the project, simply run command : npm start
Your app will start with following info in the command line:
You will also see the bar code above this information. If you did not see, type 'q'.
Now, your first react-native mobile app is ready to be tested in your smart phone.
For Android phone, go to play store and find and install expo client and install it.
For Apple phone, go to App Store and install expo client.
Now, open a expo client in the and sign up or sign in.
Now click "Scan QR Code", and scan the bar code displayed in command line.
Now you see the app is loading in your phone, and you can see the process on command line too.
Console has info that the app is bundled and started in phone.
This is the sample counter app running in the Android phone.
Working with expo is easy start, but you have another option to move forward : React Native CLI. This way you can use andorid studio virtual devices to test and develop your app. You can also use connected devices to test the aab or apks file generated for the application.
Steps:
1. Make sure node, python2, jdk8 are installed and added to environment variable.
2. Install react native cli, npm install -g react-native-cli
3. Install android studio, as explained in this page. https://facebook.github.io/react-native/docs/getting-started
4. You can create a react native application using react-cli : react-native init YourProject
5. In order to see your app is working on devices,
1. Open Andorid Studio
2. Click File > New > New Project
3. Give application name, Eg. dummyTestApp
4. Click Next,
5. Click Next on Target Android Devices ( you dont need to select anything, go with default)
6. Chose Blank Activity
7. Then click Finish.
8. Now, Add virtual devices of your choice. And Click run. The deivice screen popup should appear. ( It it is giving error because of windows hyper-visor installed, disable the hyper-visor feature from windows )
9. Go to terminal for your react-native project and run, react-native run-android
10. Wait for some time, your app will be running on virtual device.
In order to run the app in connected device,
1. Generate signed aab or apks files for your app, https://facebook.github.io/react-native/docs/signed-apk-android#generating-the-release-apk
2. Use any option from the android official page, and go to this link, https://developer.android.com/studio/command-line/bundletool
3. Download the jar file, and use it to host your app to local device. For detail : https://medium.com/mindorks/android-app-bundle-part-2-bundletool-6705b50bea4c
java -jar ~/Downloads/bundletool-all-0.3.3.jar build-apks
--bundle=app/build/outputs/bundle/debug/bundle.aab
--output=my_app.apks
--connected-device
Further reading and references :
Now, your first react-native mobile app is ready to be tested in your smart phone.
For Android phone, go to play store and find and install expo client and install it.
For Apple phone, go to App Store and install expo client.
Now, open a expo client in the and sign up or sign in.
Now click "Scan QR Code", and scan the bar code displayed in command line.
Now you see the app is loading in your phone, and you can see the process on command line too.
This is the sample counter app running in the Android phone.
Working with expo is easy start, but you have another option to move forward : React Native CLI. This way you can use andorid studio virtual devices to test and develop your app. You can also use connected devices to test the aab or apks file generated for the application.
Steps:
1. Make sure node, python2, jdk8 are installed and added to environment variable.
2. Install react native cli, npm install -g react-native-cli
3. Install android studio, as explained in this page. https://facebook.github.io/react-native/docs/getting-started
4. You can create a react native application using react-cli : react-native init YourProject
5. In order to see your app is working on devices,
1. Open Andorid Studio
2. Click File > New > New Project
3. Give application name, Eg. dummyTestApp
4. Click Next,
5. Click Next on Target Android Devices ( you dont need to select anything, go with default)
6. Chose Blank Activity
7. Then click Finish.
8. Now, Add virtual devices of your choice. And Click run. The deivice screen popup should appear. ( It it is giving error because of windows hyper-visor installed, disable the hyper-visor feature from windows )
9. Go to terminal for your react-native project and run, react-native run-android
10. Wait for some time, your app will be running on virtual device.
In order to run the app in connected device,
1. Generate signed aab or apks files for your app, https://facebook.github.io/react-native/docs/signed-apk-android#generating-the-release-apk
2. Use any option from the android official page, and go to this link, https://developer.android.com/studio/command-line/bundletool
3. Download the jar file, and use it to host your app to local device. For detail : https://medium.com/mindorks/android-app-bundle-part-2-bundletool-6705b50bea4c
java -jar ~/Downloads/bundletool-all-0.3.3.jar build-apks
--bundle=app/build/outputs/bundle/debug/bundle.aab
--output=my_app.apks
--connected-device
Further reading and references :
- Learn React Basic
- Development tool, Expo SDK
- Github link for this sample project ( Pull the code, do npm install and start the app using npm start)
- Android App Bundle bundletool, https://medium.com/mindorks/android-app-bundle-part-2-bundletool-6705b50bea4c
Comments
Post a Comment