How to use the command react-native (with examples)

React Native is a framework that allows developers to build native mobile applications using React. This command line tool provides various functionalities for starting, building, and testing React Native projects. In this article, we will explore different use cases of the react-native command.

Use case 1: Initialize a new React Native project

Code:

react-native init project_name

Motivation: This use case is used to create a new React Native project with the specified project name. It sets up the project structure and installs the necessary dependencies.

Explanation:

• react-native init: This command initializes a new React Native project.
• project_name: This argument specifies the name of the project.

Example output:

✔ Initializing git repository...
⠋ Installing required CocoaPods dependencies...
✨   Done installing iOS dependencies
Successfully created project project_name.

Use case 2: Start the metro bundler

Code:

react-native start

Motivation: The metro bundler is responsible for compiling the JavaScript code and assets of a React Native project. This command starts the metro bundler, allowing you to develop and run the application.

Explanation:

• react-native start: This command starts the metro bundler.

Example output:

info Metro Bundler ready.

Use case 3: Start the metro bundler with a clean cache

Code:

react-native start --reset-cache

Motivation: Sometimes, the metro bundler cache can cause issues during development. This command starts the metro bundler with a clean cache, ensuring that you have the latest changes.

Explanation:

• react-native start: This command starts the metro bundler.
• --reset-cache: This flag clears the metro bundler cache.

Example output:

info Metro Bundler ready.

Use case 4: Build and run the application on Android

Code:

react-native run-android

Motivation: This use case is used to build the current React Native application and start it on a connected Android device or emulator. It allows you to test and debug your application on the Android platform.

Explanation:

• react-native run-android: This command builds and runs the React Native application on Android.

Example output:

> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Nexus_5_API_30(AVD) - 11' for app:debug
Installed on 1 device.

Use case 5: Build and run the application on iOS

Code:

react-native run-ios

Motivation: This use case is used to build the current React Native application and start it on an iOS simulator. It allows you to test and debug your application on the iOS platform.

Explanation:

• react-native run-ios: This command builds and runs the React Native application on iOS.

Example output:

Building...
Build succeeded.

Use case 6: Build and run the application in release mode on Android

Code:

react-native run-android --variant=release

Motivation: When preparing the React Native application for production, it’s important to build and test it in release mode. This use case builds the current application in release mode and starts it on a connected Android device or emulator.

Explanation:

• react-native run-android: This command builds and runs the React Native application on Android.
• --variant=release: This flag specifies the build variant as release.

Example output:

> Task :app:installRelease
Installing APK 'app-release.apk' on 'Nexus_5_API_30(AVD) - 11' for app:release
Installed on 1 device.

Use case 7: Print Android logs to stdout

Code:

react-native log-android

Motivation: Debugging and monitoring logs is an essential part of the development process. This use case starts logkitty and prints Android logs to the console.

Explanation:

• react-native log-android: This command starts logkitty and prints Android logs to stdout.

Example output:

07-14 16:45:04.827  2897  2906 I ReactNativeJS: Running application "app" with appParams: {"rootTag":1,"initialProps":{}}

Use case 8: Print iOS simulator logs to stdout

Code:

react-native log-ios

Motivation: Similar to the previous use case, this command starts tail system.log for an iOS simulator and prints logs to stdout. It allows developers to monitor and debug the application during development.

Explanation:

• react-native log-ios: This command starts tail system.log for an iOS simulator and prints logs to stdout.

Example output:

Jul 14 16:46:08 iPhone SpringBoard[78944] <Notice>: Application 'UIKitApplication:com.example.app[0x575][79063]' exited voluntarily

Conclusion:

In this article, we explored various use cases of the react-native command. We learned how to initialize a new React Native project, start the metro bundler, build and run the application on different platforms, print logs, and more. The react-native command is an essential tool for React Native developers, providing them with the necessary functionalities to develop and test their applications efficiently.