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 [--port ] [--assetPlugins
] [--hmr] [--host
PARAMETERS
--port
Specifies the port on which the Metro bundler will listen for connections. Defaults to 8081.
--reset-cache
Clears the Metro bundler's cache, forcing it to rebuild the bundle from scratch. Use this when encountering issues with outdated code or dependencies.
--config
Specifies the path to the Metro configuration file. Allows customizing bundler settings.
--transformer
Specifies a custom transformer module path. This can be used to modify how files are transformed during bundling.
--projectRoot
Sets the project root directory.
--maxWorkers
Sets the maximum number of workers the Metro bundler will use for processing files.
--sourceExts
Defines a list of file extensions to be considered as source files.
--assetPlugins
A list of asset plugins that are used to process assets.
--hmr
Enables Hot Module Replacement (HMR), allowing you to update code without fully reloading the app. Improves development speed.
--host
Specifies the hostname or IP address the Metro bundler should bind to.
--https
Enables HTTPS for the Metro bundler.
--key
Path to the HTTPS key file.
--cert
Path to the HTTPS certificate file.
--interactive
Enables interactive mode.
--verbose
Enables verbose logging.
DESCRIPTION
The `react-native start` command initiates the Metro bundler, a JavaScript bundler essential for developing React Native applications. It serves as a local development server, monitoring your project's files for changes and automatically rebuilding the JavaScript bundle whenever modifications are detected. This allows for rapid iteration and real-time updates during development. The bundler also transforms the JavaScript code (including JSX and ESNext features) into a format that React Native's JavaScript runtime can understand. It's crucial that this command runs throughout your development process, as it provides the bridge between your code and the native device or simulator. When you see the QR code in your terminal, you know that it is possible to access the development server from the simulator or physical device. Metro bundler manages dependencies and efficiently packages all the project's code, assets and modules into a single JavaScript file that can be executed by the React Native runtime on the target device.
CAVEATS
The `react-native start` command must be running while you are developing your app on a simulator or device. If you close the terminal where the command is running, your app will no longer be able to load the JavaScript bundle. Ensure that the Metro bundler is correctly configured to resolve your project's dependencies, especially when using custom modules or native libraries.
TROUBLESHOOTING CONNECTION ISSUES
If your device or simulator cannot connect to the Metro bundler, ensure that they are on the same network. If you're using a physical device, make sure your development machine's firewall is configured to allow connections on the port specified by `--port`. Check that the IP address configured in the app on the device matches the IP address of the machine running the bundler. You might also need to configure port forwarding on your router if your device is on a different network.
CUSTOMIZING THE BUNDLER
Metro's configuration can be customized to handle specific project requirements. You can create a `metro.config.js` file in your project's root directory to modify the bundler's behavior, such as adding custom resolvers, transformers, or source file extensions.
HISTORY
The `react-native start` command has been a cornerstone of React Native development since the framework's early days. It provides the crucial development server functionality powered by Metro. Over time, it has evolved to support features like HMR and customizable configuration options to meet the needs of increasingly complex React Native projects. The command is essential to bundle your javascript app, so react native can interpret your code. The command helps with faster deployment and testing of your app.
Early Days: Introduced with the initial release of React Native to provide a development server.
Evolution: Enhanced with features like Hot Module Replacement (HMR) for faster updates and customizable configurations.
Current Role: Remains a fundamental part of the React Native development workflow, offering a reliable bundling solution.
SEE ALSO
react-native(1), npm(1)