This starter is the one I use for my personal projects and some of my client work.
It's a basic start, but with most of the common dependencies and tools I usually setup in new projects, so that I can bootstrap a new one more easily.
The goal is not to provide a ton of UI elements, tools and so on, but rather the most frequent tools/libraries that I end up using. In most starter kit I found, there are too many things already builtin that end up unused so this one is a lighter version focused on providing the essentials, mostly on the tooling side rather than on UI elements.
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 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:
- 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 prompt
- Feature Flags
- Error monitoring
- Analytics
- In-app purchases
- Attribution
- Dates manipulation
There are a few other things setup which you can discover on your own ;)
Install the packages:
yarn
Since a few SDKs are provided, secrets are required to use the app. You can have a look at the provided .env files to see what's needed. I personnaly use Doppler CLI to manage secrets. This tools injects secrets in the environment when running commands and is actually used in the scripts exposed inside the package.json so you need to have it installed.
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
Expo Router for the routing
Sentry for crash reporting
Unistyles for the styling
i18next for the internationalization
GraphQL with CodeGen and TanStack Query on the API side
One Signal for notifications
PostHog for analytics and feature flags
Zustand for a global store
RevenueCat for in-app purchases
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
- PostHog
- One Signal
- RevenueCat
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. As explained above, I personnaly use Doppler to manage secrets and inject them when running commands.
All the translations are managed on separate files located in the src/infra/i18n/resources/ folder.
The default locale is English and other locales (French being already provided) are linted against the English file. Meaning that all keys in the English translation files need to be defined in the other files. This prevents having an app with missing translations on some locales.
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]
This CLI tool compresses the images and creates different variants (@3x, @2x and the regular size) that are loaded by React Native depending on the device resolution.
A Storybook is configured with some basic stories.
To access it, you simply have to run the app with the following command:
yarn start:storybook
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:ts
yarn lint
yarn prettify
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)