React Native dependencies
You can use both npm and Yarn to install Javascript package dependencies for React Native app on Bitrise. Bitrise also offers dedicated Steps to cache these 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: Installing native dependencies for a React Native app.
Installing dependencies with npm and Yarn
npm
Yarn
-
Make sure your project has a package.json file defined in it.
-
Add the Run npm command Step to your Workflow.
-
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
--saveor--save-devflag. For the available options, see the npm documentation.
-
Optionally, you can set the npm version that will run the npm install command in the Version of npm to use input.
-
Make sure your project has a package.json file defined in it.
-
Add the Run yarn command Step to your Workflow.
-
Set the Yarn command to run to
install. -
Optionally, add arguments to the yarn command in the Arguments for running yarn commands.
You can specify multiple arguments, separated by a space.
Caching npm and Yarn dependencies
There are two ways to cache npm and Yarn packages in a build, depending on whether you use key-based caching or branch-based caching.
Key-based caching
Key-based caching is only available for credit-based accounts!
Key-based caching
Branch-based caching
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.
Setting specific cache paths
You don't have to use the default cache paths that the dedicated key-based caching Steps use. If you need to set a specific cache path, you can do so by configuring the Save Cache and the Restore Cache Steps: Using key-based caching in your builds.
-
Add the Restore NPM cache Step to the start of your Workflow.
-
Add the Save NPM cache Step to the end of your Workflow.
Branch-based caching relies on the built-in feature of the Run npm command or the Run yarn command Step to cache node modules.
Setting specific cache paths
You don't have to use the default cache paths that the built-in caching options use. If you need to set a specific cache path, you can do so in the Bitrise.io Cache:Pull and the Bitrise.io Cache:Push Steps: Including files and folders in the build cache.
-
Add the Bitrise.io Cache:Pull Step to your Workflow.
It should come before any Step that builds your app.
-
Set the Cache node_modules of input of the package manager Step you use.
-
For the Run npm command Step, the input should be set to
true. -
For the Run yarn command Step, the input should be set to
yes.
-
-
Add the Bitrise.io Cache:Push Step to the end of your Workflow.
The Step requires no extra configuration if you use the Run npm command Step.
Installing native dependencies for a React Native app
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.
-
Make sure your Workflow installs your npm packages: Installing dependencies with npm and Yarn.
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.
-
Add the React Native Bundle Step to your Workflow.
It must come after the npm packages are installed.
-
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: