React Native Starter

• React Native Starter
  • Explanations
  • The setup
  • Runing the project
  • Stack
  • Configure the tooling
  • Environments
  • Internationalization
  • Adding images
  • Using Storybook
  • Tests
  • Formatting and type checking
  • Github Actions

---

Explanations

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, 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 .svg files 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
• In-app purchases
• Attribution

There are a few other things setup which you can discover on your own ;)

The setup

Install the packages:

yarn

Runing the project

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.

Stack

The most useful libraries already configured are the following:

React Native with Expo

Expo Router 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

RevenueCat for in-app purchases

AppsFlyer for attribution

A few other interesting things are configured, don't hesitate to look around.

Configure the tooling

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
• RevenueCat
• AppsFlyer

Environments

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.

Internationalization

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.

Adding images

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]

Using Storybook

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

Tests

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

Formatting and type checking

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.

Github Actions

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)