Skip to main content

React Native dependencies

npm and Yarn are both package managers for Node.js. They can manage the dependencies of a project, or globally installed Javascript tools. For mobile development, they are frequently used as package managers for React Native projects. If you have a React Native app on Bitrise, you can use our dedicated npm or Yarn Steps to install and cache your dependencies.

You can also install native dependencies by using the dedicated Steps: see topic.

Installing dependencies with npm and YarnClick to copy link​

  1. Make sure your project has a package.json file defined in it.

  2. Add the Run npm command Step to your Workflow.

  3. Set the The npm command with arguments to run to install.

    You can add additional options to the install command. For example, if you need to link a library with native dependencies to your React Native project, use the --save or --save-dev flag. For the available options, see the npm documentation.

    run-npm-command.png

  4. Optionally, you can set the npm version that will run the npm install command in the Version of npm to use input.

Caching npm and Yarn dependenciesClick to copy link​

With key-based caching, you only need the Restore NPM cache and the Save NPM cache Steps to cache your node modules. These Steps require no configuration as they automatically set up the cache keys needed for your dependencies.

  1. Add the Restore NPM cache Step to the start of your Workflow.

    restore-npm-cache.png

  2. Add the Save NPM cache Step to the end of your Workflow.

Installing native dependencies for a React Native appClick to copy link​

You might need to install native dependencies that are declared in the ios and android folders. For example, CocoaPods dependencies defined in a Podfile. You can do this quite easily on Bitrise, too: once you bundle your React Native app to be ready to build the Android and iOS binaries, you can simply use the dependency manager Steps for Android and iOS apps.

Demo app

Check out our React Native demo app for a working example. If you add the app to Bitrise, you can see that the deploy-ios-release Workflow, for example, contains both the Run npm command and the Run CocoaPods install Steps, to install both npm packages and pods: React Native demo app.

  1. Make sure your Workflow installs your npm packages: see topic.

    You can have a separate Workflow that is only responsible for installing npm packages, and it's inserted to run before your main Workflow: Chaining Workflows together. It can be a utility Workflow.

  2. Add the React Native Bundle Step to your Workflow.

    It must come after the npm packages are installed.

  3. Add the required dependency manager Steps or build Steps to the Workflow. The exact Steps you need depend on the project type and the dependency manager you use: