To create a React Native Application, we need to install Node JS., With the help of Node JS, we can import all the Library require for creating a React Native App just like React JS.
Install Node JS
Since React Native is a Javascript Library, to setup React Native we have to install Node JS & install Node Package Manager.
Download Node JS and install it in your System based on your Operating system.
https://nodejs.org/en/download/
Once installed, automatically the node package manager will be installed., (npm)
Assuming the latest version of npm installed., npm versions > 5.2.0 has default npx binary.
where npx is just a simple binary/tool required for using the packages in npm.
Now Open terminal or any command prompt, and try the following to check the version of Node JS.
1 2 |
$ node -v v16.17.1 |
Install React Native Library
Now Once the Node JS installed with the above steps, we need to include the react native library with the help of Node JS.
Use the below npm command including option -g, which says global, where the create-react-native-app library will be installed globally in Node JS archive in our system.
1 2 3 |
$ npm i create-react-native-app added 1 package, and audited 2 packages in 3s found 0 vulnerabilities |
Step 2 is to create a project from scratch or we can choose any template..
1 2 3 4 |
$ create-react-native-app BasicReactNativeApp ? How would you like to start › - Use arrow-keys. Return to submit. ❯ Default new app Template from expo/examples: https://github.com/expo/examples |
Here we selected Default new app., Hence a Empty React Native Project is created for us.
1 2 3 4 5 6 7 8 |
$ create-react-native-app BasicReactNativeApp ✔ How would you like to start › Default new app ✔ Downloaded and extracted project files. Using npm to install packages. ✔ Installed JavaScript dependencies. ✔ CocoaPods CLI Installed Successfully. |
Once the above command executed successfully, we could see React Native folder created with files(Basic Template) named “BasicReactNativeApp“. Open Code base in any available JS Editor.
1 2 3 4 5 6 |
$ ls -ltr total 16 -rw-r--r-- 1 tutorialflow staff 68 Nov 22 09:57 package.json -rw-r--r-- 1 tutorialflow staff 890 Nov 22 09:57 package-lock.json drwxr-xr-x 5 tutorialflow staff 170 Nov 22 09:57 node_modules drwxr-xr-x 15 tutorialflow staff 510 Nov 22 10:06 BasicReactNativeApp |
The most commonly/widely used editor is VSCode Editor which is easy to make Javascript code changes..
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ cd BasicReactNativeApp/ $ ls -ltr total 1784 -rw-r--r-- 1 tutorialflow staff 166 Oct 26 1985 metro.config.js -rw-r--r-- 1 tutorialflow staff 307 Oct 26 1985 index.js -rw-r--r-- 1 tutorialflow staff 106 Oct 26 1985 babel.config.js -rw-r--r-- 1 tutorialflow staff 481 Oct 26 1985 App.js drwxr-xr-x 8 tutorialflow staff 272 Nov 22 10:03 ios -rw-r--r-- 1 tutorialflow staff 195 Nov 22 10:03 app.json drwxr-xr-x 10 tutorialflow staff 340 Nov 22 10:03 android -rw-r--r-- 1 tutorialflow staff 478 Nov 22 10:03 package.json -rw-r--r-- 1 tutorialflow staff 887564 Nov 22 10:06 package-lock.json drwxr-xr-x 578 tutorialflow staff 19652 Nov 22 10:06 node_modules |
Nowe we could see the node_modules created with all the REact Native libraries required for React Native project.
Also we could see android folder and ios folder created for Android Device and IOS device.,
Now open the Project(File->Open Folder) in VS code Editor and open BasicReactNativeApp folder in VS Code , the code base looks like below.
From the code we could see, the index.js is the main file called by the React Native App, which again include the App.js file component.
Hence App.js code will be displayed in Home screen when running react native application..
Run on the connected device(e.g., Android)
To run on IOS device, use the following command.
1 |
$ pod install |
To run on android device, Just use the following command.
- Prerequisite:
- Install Android Library/SDK in your system for creating an android build.,
- Connect to Android Device via USB Cable or WIFI with the help of Android Studio.,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$ npx react-native run-android info Starting JS server... info JS Server running info Installing the app... .. .. <=============> 100% EXECUTING [7m 36s] > :expo-constants:createDebugExpoConfig > IDLE > IDLE.. BUILD SUCCESSFUL in 28m 9s 214 actionable tasks: 209 executed, 5 up-to-date info Connecting to the development server... 8081 info Starting the app on "RZ8N805X1DW"... Starting: Intent { cmp=com.basicreactnativeapp/.MainActivity } |
Once the above command executed, a new command window will be opened for Metro.., showing background processing of react native executing, connecting to android device connected to System.
Now in your connected Device, or Emulator we could see the React Native App running in Android Device like below.