init.md

Initializing new project

There are couple of ways to initialize new React Native projects.

npx react-native@latest init ProjectName

Note: If you have both yarn and npm installed on your machine, React Native CLI will always try to use npm. You can force usage of yarn by adding --pm yarn flag to the command.

Note: for Yarn users, yarn dlx command similar to npx will be featured in Yarn 2.0: yarnpkg/berry#40 so we'll be able to use it in a similar fashion.

Installing react-native and invoking init command

yarn init && yarn add react-native && yarn react-native init ProjectName

Initializing project with custom version of react-native

# This will use the latest init command but will install react-native@VERSION and use its template
npx react-native@latest init ProjectName --version ${VERSION}

# This will use init command from react-native@VERSION
npx react-native@${VERSION} init ProjectName

Initializing project with custom template

It is possible to initialize a new application with a custom template with a --template option.

It should point to a valid package that can be installed with npm or yarn (if you're using --pm yarn option).

The most common options are:

• Full package name, eg. react-native-template-typescript.
• Absolute path to directory containing template, eg. file:///Users/username/project/some-template.
• Absolute path to a tarball created using npm pack.

For all available options, please check Yarn documentation and Npm.

# This will initialize new project using template from `react-native-template-typescript` package
npx react-native@latest init ProjectName --template ${TEMPLATE_NAME}

# This will initialize new project using init command from react-native@VERSION but will use a custom template
npx react-native@${VERSION} init ProjectName --template ${TEMPLATE_NAME}

You can force usage of yarn if you have both yarn and npm installed on your machine:

npx react-native@latest init ProjectName --pm yarn

Creating custom template

Every custom template needs to have configuration file called template.config.js in the root of the project:

module.exports = {
  // Placeholder name that will be replaced in package.json, index.json, android/, ios/ for a project name.
  placeholderName: 'ProjectName',

  // Placeholder title that will be replaced in values.xml and Info.plist with title provided by the user.
  // We default this value to 'Hello App Display Name', which is default placeholder in react-native template.
  titlePlaceholder: 'Hello App Display Name',

  // Directory with the template which will be copied and processed by React Native CLI. Template directory should have package.json with all dependencies specified, including `react-native`.
  templateDir: './template',

  // Path to script, which will be executed after initialization process, but before installing all the dependencies specified in the template. This script runs as a shell script but you can change that (e.g. to Node) by using a shebang (see example custom template).
  postInitScript: './script.js',
};

Post init script loading

The responsibility of showing the user progress of the "Executing post init script" goes to the implementor. In the cli, the ora package is used to display progress. For a simple usage in a custom template, ora can be used like this in a postInitScript :

#!/usr/bin/env node
const ora = require('ora');

const spinner = ora('Executing post init script ');

new Promise((resolve) => {
  spinner.start();
  // do something
  resolve();
}).then(() => {
  spinner.succeed();
}).catch(() => {
  spinner.fail();
  throw new Error('Something went wrong during the post init script execution');
});

You can find example custom template here.

Note: for all options available in init command please look inside commands.md file.