When starting a new React Native project there are two possible options / tools which can be used to set up your project.
- Expo, which is generally used if you need quick & easy solution. Even though it can speed up the whole process of setup and development of RN app, it comes with set of options and limitations which can be a dealbreaker for your project needs.
- React Native CLI represents official RN community tool for building and managing RN projects.
Setting up the development environment ( React Native CLI)
Official documentation contains everything needed to setup development environment depending on the OS you are using.
When creating a new RN project check CLI commands to get familiar with all options.
Generally, most of our projects use
npm as package manager. This means that for creation & initialization of a new project you need to use command:
npx react-native init AwesomeProjectName --template react-native-template-typescript --npm
Note: If previous command fails, it's possible that
Once you've got your repository make sure to update your
Don't forget to add
README.md which should consist of:
- Application name and logo
- Toc (Table of Content)
- Setup - add basic description of how to initialize project and install dependencies
- Development - description of all commands and configurations needed to start developing and running the application on real device / simulator
- Versioning manifest - notes on semver versioning
- Building - how to build the app for both platforms
- Notes - project specifics (gotchas, known bugs in used libraries, todos etc.)
To get started with project structure please check our official React handbook.
Since there are some semantic differences and domain specifics between React and React Native application some of the naming is different.
For example, in RN we don't have concept of pages. RN uses screens as it's top level views (building elements), therefore we will have
screens directory instead of
Also, navigation in RN represents more than a mere routing system. It makes the applications base and holds informations on the structure and it's configuration. Therefore, we use define
navigation directory inside project root. Check navigation chapter for detailed informations on this.
Since RN uses the React ecosystem, we can reuse most of it's development dependencies like linters, prettier configurations etc.
Android uses Gradle as a build and dependency management system. For that reason all android specifics configurations, like application version, minimal supported SDK, flavors etc. are configured inside application gradle file. To get familiar with android (gradle) configuration please check our official android handbook chapter.
More on iOS specifics and multiple environment setup can be found inside iOS handbook chapter.
Multiple environments setup
Before you start reading this chapter please check platform specific section above to get familiar with native platforms. This setup should be used if you application has multiple env. in sense of environment variables, custom icons defined per env. and similar. One usecase: application has different staging and production API with each separate authentication keys, application icons, signin keys etc.
If this is the case you should use react-native-build-config library together with platform specific settings to setup your project.