Getting started with React Native (Installation and Setup)

In this blog, I will explain the installation and setup of a React Native application.

Introduction

To start with React Native, set up your environment using either Expo for simplicity or the React Native CLI for more control. Both require Node.js and a package manager like npm.

Set Up Your Environment

To set up React Native with Expo and React Native CLI, follow the instructions below for each option.

1. Setting up React Native with Expo

 Install Node.js and npm

• First, ensure you have Node.js and npm (Node Package Manager) installed on your system
• Download Node.js from Node.js official site. It comes with npm.

Install Expo CLI

• Use npm to install Expo CLI globally:

Create a New Expo Project

• Create a new React Native project using the Expo CLI:

• Navigate to your project folder:

Run the Expo App

• Start the Expo development server:

• You can use the Expo Go app on your Android or iOS device (download it from the Play Store or App Store).
• Scan the QR code in the terminal or in your browser to see your app.

2. Setting up React Native CLI

You can create a React Native application using either the Quickstart method or the standard approach, both requiring Node.js installation, which I assume you have already completed.

• 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 faced an issue on Quickstart 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
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 the Application that has your SDK path.

then use commands on your terminal.

Now you look it’s run on your device.

Some useful commands which we are aware

1. the command for increasing the 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 configurations have been done. So, we need to modify our App.js file for our Application. 

Here is the Output of the project

Conclusion

In conclusion, choose Expo for ease or the React Native CLI for full control. Both setups require Node.js and a package manager, enabling quick app development.

Read more interesting React Native Blogs by Mobikul.

Thanks for reading this blog.