react-native-start
Initialize new React Native projects
TLDR
Start the server that communicates with connected devices
Start the metro bundler with a clean cache
Start the server in a custom port (defaults to 8081)
Start the server in verbose mode
Specify the maximum number of workers for transforming files (default is the number of CPU cores)
Disable interactive mode
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)