Using React Native CLI

1. Creating New Project

Example: Create a new React Native project

npm install -g react-native-cli
react-native init MyProject

Command	Description	Notes
react-native init	Initialize a new React Native project	Creates project structure and dependencies
--template	Specify a template for project creation	Use with `react-native-template-typescript` for TypeScript support
--version	Specify a React Native version	Use to create project with specific version (e.g., `0.72.0`)

Note: Ensure Node.js (v16 or newer) and Watchman are installed before initializing a project.

2. Running on iOS

Example: Running on iOS Simulator

react-native run-ios

Option	Values	Description
--simulator	`iPhone 14`	Specifies the simulator to use
--configuration	`Debug`	Build configuration to use (e.g., Debug, Release)
--scheme	`MyApp`	Name of the Xcode scheme to use
--project-path	`ios/`	Path to the iOS project directory

Note: Ensure Xcode and the iOS Simulator are installed and configured correctly.

Warning: The iOS simulator must be running before executing react-native run-ios.

3. Running on Android

Example: Run on Android emulator

npm run android

Command	Description	Notes
npm run android	Builds and runs the app on an Android emulator or connected device	Requires Android Studio with AVD or physical device connected via USB
npm run android -- --deviceId <device-id>	Runs the app on a specific Android device or emulator	Use `adb devices` to list available devices

Note: Ensure that the Android SDK and required system images are installed in Android Studio.

Warning: If you encounter build errors, make sure your ANDROID_HOME environment variable is set correctly.

4. Starting Metro Bundler

Example: Starting Metro Bundler

# Start the Metro bundler
npx react-native start

# Start with custom port
npx react-native start --port 8081

# Clear cache before starting
npx react-native start --reset-cache

Command	Description	Options
npx react-native start	Starts the Metro bundler	None
--port <number>	Specifies the port to run the bundler on	Default: 8081
--reset-cache	Clears the Metro bundler cache	Useful when facing build issues

Note: The Metro bundler is responsible for packaging your app's JavaScript code and serving it to the device or emulator.

5. Linking Native Dependencies

Note: This section covers linking native dependencies in React Native projects using the CLI. It assumes you have a basic understanding of native modules and platform-specific code.

Linking native dependencies in React Native allows you to integrate native libraries and modules into your project. This is typically done using the react-native link command or through automatic linking mechanisms introduced in React Native 0.60+.

Command	Description	Notes
react-native link	Links native dependencies to the project	Deprecated in favor of automatic linking in RN 0.60+
npx react-native link <package-name>	Links a specific native dependency	Useful for selective linking of packages

Example: Linking a Native Module

react-native link react-native-vector-icons

Example: Manual Linking (Legacy)

react-native link

Linking Process Overview

Run react-native link to automatically link dependencies
For manual linking, update native project files (iOS/Android)
Verify that the linking was successful by checking native project configurations

Warning: Manual linking can lead to inconsistencies. Prefer automatic linking where possible.

6. Building for Release

Example: Build Release APK for Android

cd android
./gradlew assembleRelease

Step	Description	Command	Notes
1. Setup Keystore	Generate a keystore file for signing	`keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000`	Store this file securely and never commit it to version control
2. Configure Gradle	Update `android/gradle.properties`	`MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=**** MYAPP_RELEASE_KEY_PASSWORD=****`	Use environment variables or secure secrets in CI/CD
3. Build Release APK	Run the release build task	`./gradlew assembleRelease`	Output located at `android/app/build/outputs/apk/release/app-release.apk`

Note: For iOS, use Xcode or react-native run-ios --configuration Release to build a release version.

Warning: Ensure all development dependencies are removed or disabled in release builds to reduce bundle size.

Release Build Checklist

Keystore is generated and secured
Build configuration updated with keystore details
App version incremented for release
Debug logs disabled in release mode
Bundle size optimized for production

7. Cleaning Build Cache

Example: Clean Build Cache

# Clean React Native build cache
npx react-native clean-build-cache

# Or with specific platform
npx react-native clean-build-cache --platform ios
npx react-native clean-build-cache --platform android

Command	Description	Notes
npx react-native clean-build-cache	Clean the build cache for React Native project	Removes all cached build artifacts to resolve build issues
--platform <ios\|android>	Specify platform to clean	Optional flag to target specific platform build cache

Note: This command removes all build artifacts and may take some time to complete. It's useful when facing persistent build errors or cache-related issues.

8. Generating Release APK

Example: Generate Release APK

cd android
./gradlew assembleRelease

Command	Description	Notes
./gradlew assembleRelease	Generates a release APK for Android	Must be run from the `android` directory

Note: Ensure you have signed your app with a release key before generating the APK.

Warning: The release APK will be generated in android/app/build/outputs/apk/release/app-release.apk.

9. Logging Device Output

Example: Logging to Device Console

console.log("This is a log message");
console.warn("This is a warning");
console.error("This is an error");

Method	Description	Notes
console.log()	Logs information to the console	Standard logging method
console.warn()	Logs a warning message	Displayed with warning icon
console.error()	Logs an error message	Displayed with error icon and stack trace

Note: In React Native, console output is sent to the device's console and can be viewed in the React Native Debugger or Flipper.

10. Upgrading React Native

Note: Ensure you have a clean git repository or backup before upgrading.

Command	Description	Notes
npx react-native upgrade	Upgrades the React Native version	Automatically updates dependencies and configs
npx react-native upgrade <version>	Upgrades to a specific version	Example: `npx react-native upgrade 0.72.0`

Example: Upgrade to latest version

npx react-native upgrade

Example: Upgrade to specific version

npx react-native upgrade 0.72.0

Upgrade Process Steps

Backup your project
Run npx react-native upgrade
Resolve any merge conflicts in config files
Update dependencies if needed
Test the upgraded app