1. Create a Expo React-Native App

Install expo (if you didn’t do that before)

yarn global add expo-cli

Create the project

expo init my-project

cd my-project

yarn start

Now you are set with a basic react-native app using expo. If you want to know more go to https://facebook.github.io/react-native/docs/getting-started.html

2. Add typescript support

Expo now has typescript already built in, so we can start right away using it by renaming App.js to App.tsx.

Then we need some typings for VSC to help us develop better:

yarn add -D @types/react @types/react-native @types/expo

To configure Typescript for your IDE and CI type checking, we need to create a tsconfig with the following command:

tsc --init

This will create the default config and has strict mode on. However I’m assuming that this config does not have any effect on expo build processes. But it will be very useful for our own development processes.

In there uncomment “jsx” and set the value to “react-native”

Furthermore we also need to define the libraries we are going to use. To do that you need to uncomment “lib” and set the value to ["es2015", "es2016"].

If you need es2017 you can of course add it as well.

Now you can code in VSC in strict mode and also run tsc --noEmit to check for any type errors on command line (useful for CI)

3. Add Linting

First create a tslint.json file and copy&paste the following snippet:

Install the dependencies

yarn add -D tslint tslint-config-airbnb tslint-react typescript

Add a lint script to your package.json

"lint": "tslint -p tsconfig.json src/**/*.{ts,tsx}"

Now you are ready for linting! Just run: yarn lint

4. Add Testing with Jest and React-Renderer

Create a new file called jest.config.js and copy&paste the following snippet:

Also create another tsconfig just for testing: tsconfig.jest.json

Now just install the missing dependencies:

yarn add -D react-test-renderer @types/react-test-renderer @types/jest ts-jest jest jest-expo

And add a script to your package.json:

"test": "jest"

Thats it, you can now write and run tests. For example:

If you wanna do linting, testing and type checking with one command, then add the following to your package.json :

"validate": "yarn test && yarn lint && tsc --noEmit"

5. Add .env environment configuration

Install the dependency: yarn add -D react-native-dotenv

Then add “module:react-native-dotenv” to babel config´s “preset” array.

And now you can create your .env file. Make sure you also add .env to the .gitignore and create a duplicate .env.example so other developers know what the app can be configured.

It does not ship typings so you have to do your own thing:

Create a vendor-typings.d.ts somewhere (good place would be src/lib/vendor-typings.d.ts with the following content

This would already do it, but I like to go a little further and add some typing and default values grouped by feature:

This gives me very nice typings and autocomplete across the app.