LinuxCommandLibrary

react-native-start

Initialize new React Native projects

TLDR

Start the server that communicates with connected devices

$ react-native start
copy

Start the metro bundler with a clean cache
$ react-native start --reset-cache
copy

Start the server in a custom port (defaults to 8081)
$ react-native start --port [3000]
copy

Start the server in verbose mode
$ react-native start --verbose
copy

Specify the maximum number of workers for transforming files (default is the number of CPU cores)
$ react-native start --max-workers [count]
copy

Disable interactive mode
$ react-native start --no-interactive
copy

SYNOPSIS

react-native-start [options]

PARAMETERS

--port <number>, -p <number>
    Specifies the port on which the Metro bundler will run. Default is 8081.

--host <string>
    Defines the host address the bundler should listen on. Defaults to 'localhost'.

--reset-cache, -r
    Clears the Metro bundler's cache before starting. Useful for resolving bundling issues.

--no-interactive
    Disables interactive mode, preventing the display of the development menu in the terminal.

--max-workers <number>
    Sets the maximum number of worker processes Metro can use for bundling.

--config <path>
    Specifies an alternative path to a Metro configuration file (e.g., metro.config.js).

--verbose
    Enables verbose logging output from the bundler, showing more detailed information.

--https
    Starts the development server with HTTPS instead of HTTP.

--cert <path>
    Path to the SSL certificate file when using HTTPS.

--key <path>
    Path to the SSL private key file when using HTTPS.

DESCRIPTION

The react-native-start command is the primary method to launch the Metro bundler, which serves as the essential development server for React Native applications. It compiles JavaScript code (including JSX and TypeScript), bundles static assets (like images and fonts), and efficiently delivers them to your React Native device or simulator.

By default, the bundler listens on port 8081, making the bundled application accessible to the client app running on a device or emulator. It continuously monitors your project files for changes, recompiling and pushing updates. This command enables crucial developer features such as Fast Refresh and Hot Module Replacement (HMR), providing instantaneous feedback on code modifications without requiring a full app restart. It is an integral part of the react-native-cli and is fundamental for any local React Native development workflow, streamlining the process by managing dependencies and serving the JavaScript bundle efficiently.

CAVEATS

Requires Node.js and npm/yarn to be installed and properly configured.

Can be resource-intensive (CPU and memory) for large projects or when the --reset-cache option is frequently used.

Common issues include port conflicts (if the default port 8081 is already in use) and network firewall restrictions that might prevent connections.

Relies heavily on the metro-bundler package; issues with its installation or version can affect react-native-start's functionality.

INTERACTIVE MODE

When run without the --no-interactive flag, react-native-start presents an interactive menu in the terminal. This menu allows developers to perform common actions such as reloading the app, opening the debugger, or toggling Fast Refresh, significantly enhancing the development workflow and providing quick access to essential tools.

METRO BUNDLER INTEGRATION

The react-native-start command is essentially a convenient wrapper that initializes and manages the Metro bundler. Metro is a highly optimized JavaScript bundler designed specifically for React Native, focusing on speed and efficiency for large codebases. It is crucial for transforming your source code into a format runnable on mobile devices.

FAST REFRESH

A key development feature enabled by react-native-start is Fast Refresh. This allows you to see changes to your React components instantly on your device or simulator without losing component state. It dramatically speeds up the iteration cycle during development by providing near real-time feedback on code modifications.

HISTORY

react-native-start has been a core command since the early days of React Native, serving as the gateway to local application development. It initially integrated tightly with a component called 'Packager,' which later evolved into the standalone and highly optimized Metro bundler. While the underlying technology has seen significant improvements in performance, caching mechanisms, and the introduction of features like Fast Refresh, the command's primary function—to serve the JavaScript bundle and assets to devices—has remained consistent, solidifying its role as the central piece for React Native development.

SEE ALSO

node(1), npm(1), yarn(1), react-native(1)

Copied to clipboard