This starter is the one I used for my personal projects.
It's a basic start, but with most of the common dependencies and tools I use so I can start new projetcts more easily.
Check the React Native docs on how to properly setup your dev environment. It uses Expo with a custom Development Build, so you also need to setup Expo tooling.
On the Developer Experience side, a test stack is setup (unit, functional and E2E), a CI on Github Actions, a custom Storybook, TypeScript is also configured with ESLint and Prettier. Commits are linted to automate the release workflows and the changelog generation.
There are also some utilities like:
- Creating new screens automatically, injecting the code where needed to expose it on the navigation stack, create types and have a test file
- A script to compress images and to create the different files for each resolution
- Converting
.svgfiles into React components that can be used easily - A pre-commit hook that runs on staged files for code quality checks
- Tooling to release and tag new versions
On the features side, there are already some things to get started quickly with any project:
- A GraphQL client with TanStack Query and CodeGen
- Form validation with Keyboard handling
- Notifications
- App Store rating
- Feature Flags
- Error monitoring
- Analytics
There are a few other things setup which you can discover on your own ;)
Install the packages:
yarn
To launch the React Native packager:
yarn start:[dev|staging|production]
then
yarn build:[dev|staging|production]:[ios|android]
You will then be able to boot an iOS simulator or Android emulator, if installed on your machine.
The most useful libraries already configured are the following:
React Native with Expo
React Navigation for the routing
Sentry for crash reporting
Restyle for the styling
i18next for the internationalization
GraphQL with CodeGen and TanStack Query on the API side
One Signal for notifications
Flagsmith for feature flags
Zustand for a global store
Amplitude for analytics
A few other interesting things are configured, don't hesitate to look around.
Some tools are installed in the project, but you'll need to add your API keys and secrets to have them work properly. Check the documentation of each of those libraries on how to do this.
If you don't do this, the app won't launch at all. The CLI will tell you if one or more required environement variable is not set.
The libraries that needs configurations are the ones exposed inside the .env files:
- Expo
- Sentry
- Flagsmith
- Amplitude
- One Signal
The starter is configured with three distinct environments by default, Development, Staging and Production.
This is easier to work with on a real app, and allows you to have different enviroment variables easily, among other things.
Each environement variables are exposed through the .env.[development|staging|production] files at the root. I personnaly use Doppler to manage secrets and inject them in the project.
All the translations are managed on separate .json files located in the src/core/i18n/resources/ folder.
Refer to the documentation of i18next for explanations on how to use it.
To simplify adding new images to the project and optimizing them, you can run the following command:
yarn image:add [path/to/the/image/to/add|path/to/the/folder]
You can automaticaly generated new screens with all the necessary files, tests and injection with this command:
yarn generate:screens
A CLI prompt will ask you all the infos.
A custom Sandbox is configured with some basic examples and navigation. Once StoryBook for React Native will support V8, I'll migrate to using that.
To access it, you can access the dev menu on the device and select Toggle Sandbox to have it shown in place of the app.
There are basic tests with Jest and Testing Library that you can run with:
yarn test
For E2E tests, you can use Maestro for both OS.
First install Maestro on your machine, build the development app onto a simulator then run
yarn test:e2e
The project is using a custom ESlint config (see here), Prettier and TypeScript for code formating and type checking, you can run the checks with those commands:
yarn lint
yarn prettify
yarn tsc
There is a pre-commit git hook that run some of those commands to have a consistent formatting and type checking.
The project is configured to have the CI running on Github Actions with a Git Flow.
The three main workflows are the following:
- A Quality workflow runs against all PR targetting develop. It handles running tests, linting and TypeScript checks
- A Release and Tag ones, which creates a release and a tag for the project
- A Build Dev App one, which triggers a build of the development env app on EAS (environement variables will need to be injected into EAS via secrets for the builds to work, see here)