Monday, June 18, 2018

How to Create your First React Native Application - Android

React Native is one of the most popular ways to build mobile applications these days. Here, We will share step-by-step guide to building your first react native application.
In our last tutorial we have provided step by step guide how to set up the tools and environment for react native that enable us to start building cross platform android and iOS applications using react native.

Create Your First React Native App

Now Follow the below steps to create first android project in react native :

How to Create your First React Native Application

Step-1 :  Create a new Project

Open command prompt in windows and create the react native project called as "MobileApp".
Command :
react-native init MobileApp

Once you enter above command in command prompt, wait for some time because it will create "MobileApp" project in you specified directory and download the  project configuration file from the server.
After the project file setup and configuration, project structure look like this :

Step-2 : Create "assets" folder inside your project directory 

Now create assets folder inside the project directory that is "MobileApp\android\app\src\main". You can manually create assets folder :

< OR >

you can create folder by using command as well.
Command :
mkdir android/app/src/main/assets

Step-3 : Running your React Native application


Lets run the below command to run the react native application in emulator or physical device.

  • Switch to project directory.
cd MobileApp

  • Run the below command that helps to bundle you android application project.
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

  • Run the Final step to run react native application in emulator or physical device.
react-native run-android

< OR >

Also you can combine last two command in one, In this case case you have to execute command only once.
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

< OR >

You can automate the above steps by placing them in scripts part of package.json like this:
"android-window": "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"

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

More Useful Commands

There are several other useful commands provided by create-react-native:

  • npm test : Runs the jest test runner on your tests
  • npm run ios : Like npm start, but also attempts to open your app in the iOS Simulator if you’re on a Mac and have it installed.
  • npm run android : Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup).
  • npm run eject : This will start the process of “ejecting” from Create React Native App’s build scripts. You’ll be asked a couple of questions about how you’d like to build your project.
Video Demo to Run React Native Application in android device :



Hope you like this tutorial, In case of any issues, do comment in comment box below.


3 comments: