Pages

Wednesday, March 27, 2019

Setup React Native + Ubuntu development environment and run project

Facebook has created tremendous excitement in the app market by introducing React Native framework for mobile app development. It is very important for business people and technical people to understand the importance of React Native to ensure the success of their apps. Here are 5 basic insights and 7 reasons as to why React Native has been so successful.
  1. A framework for writing real, natively rendering mobile applications for iOS, Android, and Windows platform.
  2. Uses a bridge to translate all JavaScript code to the target device’s native language (Java on Android and Objective-C on iOS).
  3. Uses the same standard UI building blocks as regular iOS and Android apps.
  4. Enables fast and efficient mobility solutions with unified development teams for both web and mobile apps.
  5. Used to build popular apps such as Facebook, Instagram, Skype, Airbnb, Walmart, Tesla, and many more.
We have to follow the below step for integrating React Native 

Before Starting React Native Following things must be installed in your PC

1 - JAVA JDK - with setup environment
2 - Android Studio
3 - Android SDK
4 - NodeJs 
5 - NPM


For the above 5 steps I have provided a reference link at the bottom of the page you can easily get the idea from there.


- Click React Native CLI Quick start
- Select Linux And Android (Select Whatever OS And System that you are used)

Step 2) install -> npm install -g react-native-cli

Step 3) Add the following lines to your $HOME/.bash_profile config file:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

e.g) /mnt/350gb/ReactNative/Projects/initDemo$ source ~/.bash_profile

- After set PATH of the environment, you have to save that file using this command
    -> terminal>source ~/.bash_profile
    -> terminal>source ~/.bashrc

Step 4) Install Watchman
- https://facebook.github.io/watchman/docs/install.html#buildinstall
- Follow all steps from the above link

Error: If you found an error like this: "your system lacks libtoolize"
Solution: Install libtool using the following command

Command: sudo apt-get install libtool

Step 5) Create Project 
 - For create project execute below command
-  Go to your directory where you want to store react native project and then open a terminal to create  project
 - Terminal> react-native init <Project name>

Step 6) Go to Your main project where android and ios project stored
  - Now we have to start npm so for that we need to enter the following command
  - Command: sudo react-native start 
  - If it will ask for password then enter your system password for allow admin access
  - Than after open new terminal tab and go to your project directory where android and ios project stored the same as above and run following command
  - Command: react-native run-android
  
Step 7) When we run an application from cmd and it will display info like this
info Running /mnt/350gb/Sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081

info Starting the app on emulator-5554 (/mnt/350gb/Sdk/platform-tools/adb -s emulator-5554 shell am start -n com.initdemo/com.initdemo.MainActivity)...

Then we have to again execute one command to solve the problem regarding port 

- For that we need to execute following command
- terminal > :/mnt/350gb/ReactNative/Projects/initDemo$ cd /mnt/350gb/Sdk/platform-tools
- terminal > :/mnt/350gb/Sdk/platform-tools$ adb -s emulator-5554 reverse tcp:8081 tcp:8081


Now it's working fine but still found any hurdle(any issue) then don't be hesitate to ask me to contact me

Email: nileshpanchal6121990@gmail.com


Ref Links 
Youtube links