React Native – Basic Commands Explained with Examples

React Native is a popular open-source framework developed by Facebook that allows developers to build natively-rendered mobile apps for iOS and Android using the React JavaScript library. It has quickly become one of the most widely-used tools for cross-platform mobile development due to its performance, flexibility, and large ecosystem of components and tools.

According to a 2020 developer survey by JetBrains, React Native is used by 42% of mobile developers, making it the most popular cross-platform mobile framework. It‘s employed by companies like Facebook, Instagram, Airbnb, Walmart, and many more to build their mobile apps.

In this guide, we‘ll take an in-depth look at the basic commands and workflows used in React Native development. Whether you‘re a web developer looking to get into mobile or an experienced mobile developer exploring cross-platform solutions, understanding these fundamentals will give you a solid foundation for building React Native apps.

Setting Up Your Environment

Before you can start building React Native apps, you‘ll need to set up your development environment. This involves installing:

• Node.js (v12 or newer)
• A JDK (Java Development Kit)
• Android Studio (for Android development)
• Xcode (for iOS development)

You can check if you have Node.js installed by running:

node -v

If you don‘t have Node.js, you can download it from the official website or use a version manager like nvm.

Once Node.js is set up, you can install the React Native CLI globally with:

npm install -g react-native-cli

For detailed setup instructions for each platform, please refer to the React Native environment setup docs.

Platform	Required Tools
Android	– Node.js – JDK – Android Studio
iOS	– Node.js – Watchman – Xcode

While not required, you may also want to install a source control management tool like Git to track changes in your code and collaborate with other developers.

Creating a New Project

With your environment set up, you‘re ready to create your first React Native project. The React Native CLI provides the init command to generate a basic project structure:

react-native init MyProject

This will create a new directory called MyProject with the following structure:

MyProject
├── __tests__
├── android
├── ios
├── node_modules
├── .gitignore
├── App.js
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
└── yarn.lock

Some key files and directories include:

• App.js: The main entry point for your React Native application
• index.js: Registers the App component with the native platform
• android/: Contains the Android project and native code
• ios/: Contains the iOS project and native code
• package.json: Lists the project‘s dependencies and defines various scripts

After generating the project, be sure to run npm install or yarn install to install the required dependencies.

Running Your App

To see your app in action, you can run it on an emulator/simulator or physical device using the following commands:

Platform	Command
Android	react-native run-android
iOS	react-native run-ios

These commands will launch a development server and compile your app for the selected platform. If you have an emulator/simulator running or a device connected, it will automatically install and launch the app.

You can also specify a particular device with the --device flag:

react-native run-android --device emulator-5554
react-native run-ios --device "John‘s iPhone"

The development server supports hot reloading, so any changes you make to your JavaScript code will be reflected in the app without needing to recompile.

For more advanced control over the build process, you can also run the following commands separately:

• react-native start: Starts the Metro development server
• react-native run-android --variant=release: Build and run a release build for Android
• react-native run-ios --configuration Release: Build and run a release build for iOS

Debugging Your App

Debugging is an essential part of app development, and React Native provides several tools to help diagnose and fix issues.

Console Logs

The trusty console.log() is a quick and easy way to output values and trace code execution. Logs will appear in the Metro bundler output and your IDE‘s console.

For example:

console.log(‘User tapped the button‘);
console.log(‘User input:‘, inputValue);

React Developer Tools

React Developer Tools is a browser extension that allows you to inspect and modify the React component hierarchy. You can use it to view component props and state, as well as manipulate them in real-time.

To use React Developer Tools with React Native, first install the extension in Chrome or Firefox. Then, run the following command to enable it:

react-native devtools

Now you can open the developer tools in your browser and select the "React" tab to view your component tree.

Debugging with Chrome DevTools

For more advanced debugging, you can use Chrome DevTools to set breakpoints, step through code, and inspect variables.

First, enable remote debugging in your app by adding the following line to your code:

import { unstable_enableLogBox } from ‘react-native‘;
unstable_enableLogBox();

Then, run your app and open the developer menu by shaking the device or pressing Command-D in the simulator. Select "Debug JS Remotely" to open a new Chrome tab with the debugger attached.

You can now set breakpoints, step through code, and use the console to interact with your app‘s JavaScript context.

Performance Monitoring

React Native also includes a performance monitor called Systrace that allows you to profile your app‘s performance and identify bottlenecks.

To use Systrace, first install the react-native-performance package:

npm install --save-dev react-native-performance

Then, import it in your code and wrap the sections you want to profile with the Systrace.beginEvent() and Systrace.endEvent() methods:

import Systrace from ‘react-native-performance/systrace‘;

Systrace.beginEvent(‘Render User Profile‘);
// Render the user profile...
Systrace.endEvent();

To view the trace output, run the following command:

react-native profile-android
# or
react-native profile-ios

This will generate a trace file that you can open in the Chrome DevTools performance tab to analyze your app‘s performance.

Working with Native Modules

One of React Native‘s key strengths is its ability to interface with native platform APIs and libraries. You can write your own native modules in Java/Kotlin (for Android) or Objective-C/Swift (for iOS) and expose them to your JavaScript code.

For example, let‘s say you want to create a native module that generates a random number on the native side. Here‘s how you might implement it for Android:

// RandomNumberModule.kt
package com.myapp.random

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.Promise
import java.util.Random

class RandomNumberModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "RandomNumberModule"

    @ReactMethod
    fun getRandomNumber(promise: Promise) {
        val random = Random().nextInt(100)
        promise.resolve(random)
    }
}

And the corresponding JavaScript code to use it:

import { NativeModules } from ‘react-native‘;

const { RandomNumberModule } = NativeModules;

async function getRandomNumber() {
  try {
    const randomNumber = await RandomNumberModule.getRandomNumber();
    console.log(‘Random number:‘, randomNumber);
  } catch (error) {
    console.error(‘Error getting random number:‘, error);
  }
}

For more details on native modules, check out the React Native native modules docs.

Building and Deploying Your App

When you‘re ready to share your app with others, you‘ll need to build a release version and deploy it to the app stores or a distribution service.

Android

To build a release APK for Android, first create a signing key:

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Then, add your signing config to android/app/build.gradle:

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(‘my-release-key.keystore‘)
            storePassword ‘YOUR_KEY_STORE_PASSWORD‘
            keyAlias ‘my-key-alias‘
            keyPassword ‘YOUR_KEY_PASSWORD‘
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

Finally, build the release APK:

cd android
./gradlew assembleRelease

The generated APK will be located at android/app/build/outputs/apk/release/app-release.apk.

To publish your app to the Google Play Store, you‘ll need to create a developer account and follow the Google Play launch checklist.

iOS

To build a release IPA for iOS, you‘ll first need to set up code signing in Xcode. Open the ios/MyProject.xcodeproj file in Xcode and select your project in the navigator. Then, go to the "Signing & Capabilities" tab and select your team and signing certificate.

Next, update the release scheme to use your distribution certificate. Go to "Product > Scheme > Edit Scheme" and select the "Run" scheme. Under "Build Configuration", select "Release".

Finally, build the app archive by going to "Product > Archive". This will open the Xcode Organizer window where you can select your app and click "Distribute App" to generate the IPA file.

To publish your app to the App Store, you‘ll need to create an App Store Connect account and follow the App Store submission guidelines.

For more details on deploying to app stores, refer to the React Native deployment docs.

The Future of React Native

React Native has come a long way since its initial release in 2015, and it continues to evolve and improve. Here are some of the key trends and developments shaping the future of React Native:

Improved Performance

One of the main focuses of recent React Native releases has been improving performance, particularly around startup time and memory usage. The new "Hermes" JavaScript engine, released in 2019, offers significant performance gains over the previous JavaScriptCore engine.

Additionally, the React Native team is working on a new "TurboModules" system that will make it easier to write high-performance native modules and reduce the overhead of crossing the JavaScript-native bridge.

Simplified Upgrades

Upgrading React Native versions has historically been a painful process, often requiring manual changes to native files and dealing with breaking changes. The React Native community has been working to address this with tools like the React Native Upgrade Helper and the React Native CLI‘s upgrade command.

In the future, the goal is to make upgrades even more seamless and less error-prone, allowing developers to take advantage of the latest features and improvements with minimal hassle.

Increased Adoption

As React Native continues to mature and prove its value, more and more companies are adopting it for their mobile development needs. According to the 2020 State of JavaScript survey, React Native has the highest satisfaction rating among mobile frameworks, with 90% of developers who have used it saying they would use it again.

This increasing adoption is driven by React Native‘s ability to deliver high-quality, performant apps with a single codebase, as well as its growing ecosystem of libraries, tools, and support.

Improved Documentation and Resources

The React Native documentation has undergone significant improvements in recent years, with a focus on providing clear, up-to-date guidance and examples. The React Native website now includes a dedicated "Learn" section with tutorials, guides, and API references.

Additionally, the React Native community has created a wealth of resources, including blog posts, video courses, and open-source libraries, making it easier than ever to get started with React Native and find solutions to common problems.

Conclusion

In this guide, we‘ve covered the basic commands and workflows essential to React Native development, including:

• Setting up your development environment
• Creating and running projects
• Debugging and profiling your code
• Working with native modules
• Building and deploying your app

By mastering these fundamentals, you‘ll be well-equipped to build high-quality, performant mobile apps with React Native.

But this is just the beginning. As you dive deeper into React Native development, you‘ll discover a rich ecosystem of libraries, tools, and best practices to help you create even more ambitious and impactful apps.

Some key areas to explore further include:

• State management with libraries like Redux, MobX, and Recoil
• Navigation with React Navigation or React Native Navigation
• Cross-platform UI libraries like NativeBase and React Native Elements
• Testing with Jest, React Native Testing Library, and Detox
• Continuous integration and delivery with services like CircleCI and Bitrise

As a full-stack developer experienced in React Native, I can attest to its power and flexibility as a mobile development platform. By combining the best of web and native technologies, React Native allows teams to move fast, share code, and deliver exceptional user experiences across multiple platforms.

If you‘re new to React Native, I encourage you to start small, experiment often, and don‘t be afraid to make mistakes. The React Native community is incredibly welcoming and supportive, and there are countless resources available to help you learn and grow.

And if you‘re an experienced developer considering React Native for your next project, I can confidently say that it‘s a worthwhile investment. The productivity gains and development velocity offered by React Native are hard to match, and the platform‘s stability and performance have proven themselves in countless production apps.

So what are you waiting for? Dive in, start building, and see for yourself why React Native has become the go-to choice for cross-platform mobile development. The future of mobile is exciting, and with React Native in your toolkit, you‘ll be ready to build the apps of tomorrow, today.