Introduction To React Native (Installation and Setup)

This is my first blog for React Native Application. In this blog, I will explain about the setup up of React Native Application. I have facing many issues on the setup of React Native, at last, I have success about it. I have followed the facebook react native document for the set.

They provide us with 2 methods for creating the application. first one is Quickstart and second by React-Native. As the first install Node . I have assumed you have installed Node.

• QuickStart

  you can use npm to install the create-react-native-app command line utility:

  npm install -g create-react-native-app

  1	npm install -g create-react-native-app

  Then run the following commands to create a new React Native project called “Awesome Project”:

  create-react-native-app AwesomeProject cd AwesomeProject npm start

  1	create-react-native-app AwesomeProject cd AwesomeProject npm start

  This will start a development server for you.

but I have face issue on Quickstart is cookies management is not working.

• Building Project with Native Code-
  Follow Some Installation process.

1. Install React Native CLI
   
    npm install -g react-native-cli

   1	npm install -g react-native-cli

   
    
2. Install JAVA.
3.  Install Android Studio.
4. Install Android SDK
5. Configure ANDROID_HOME in the environment variable.
6. Install watchman Guide
7. Installing watchman on Ubuntu
   
   $ cd ~ $ git clone https://github.com/facebook/watchman.git $ cd watchman/ $ git checkout v4.7.0 $ sudo apt-get install -y autoconf automake build-essential python-dev $ ./autogen.sh $ ./configure $ make $ sudo make install $ watchman --version $ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && watchman shutdown-server

   1 2 3 4 5 6 7 8 9 10 11 12

   $ cd ~ $ git clone https://github.com/facebook/watchman.git $ cd watchman/ $ git checkout v4.7.0 $ sudo apt-get install -y autoconf automake build-essential python-dev $ ./autogen.sh $ ./configure $ make $ sudo make install   $ watchman --version $ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches  && echo 999999 | sudo tee -a  /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee  -a /proc/sys/fs/inotify/max_user_instances && watchman  shutdown-server

   
    

Now create first React Native Application.

Now Run your first Application on your Device. First of all, we add “local.property” file in the android folder structure of Application that has your SDK path. 

then use commands on your terminal.

Now you look its run on your device.

Some useful command which we aware

1. the command for increasing size of the watchman-
   
   $ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf $ sudo sysctl -p

   1 2	$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf $ sudo sysctl -p

   
    
2. fix babel Issue
   
   npm add @babel/runtime npm install

   1 2	npm add @babel/runtime npm install

   
    
3. ADB commands
   
   adb kill-server adb start-server

   1 2	adb kill-server adb start-server

   
    

All setups and configuration have done. So, we need to modify our App.js file for our Application. I will explain ReactNative Basic  Information in my next blog.

References: https://facebook.github.io/react-native/docs/getting-started.html

https://medium.com/@vonchristian/how-to-setup-watchman-on-ubuntu-16-04-53196cc0227c