React Native Typescript Boilerplate

Build cross-platform mobile apps faster.

React Native has established itself as an incredibly powerful tool for building cross-platform mobile applications. We set out to try and create a clone-able repository so developers can jump right into building features/UI instead of spending hours configuring their environment.

Getting Started

If you want to jump right into developing your own cross-platform mobile application, get started with the README here.

If you want more insight into the tooling/frameworks used in this project - continue reading.

First go ahead and clone the repository so you can follow along in the codebase.

git clone [email protected]:meshhq/react-native-boilerplate.git

Tooling

react-native-cli

There are currently two ways to create a new React Native application: react-native-cli and create-react-native-app (CRNA). We chose the former because it provides more flexibility when it comes to configuring settings in Xcode and Android Studio. react-native-cli also makes it much easier to link third-party libraries to underlying native libraries.

There is, however, a downside; more flexibility in local configuration can lead to build and runtime errors in Android Studio and Xcode (this is especially apparent in Android Studio with the way it is constantly syncing Gradle files).

Project Directories

You’ll see the android and ios directories at the root of the project. Both of these can be opened and manipulated in their respective IDE’s.

Note: We recommend that you only edit Gradle files with Android Studio. Google’s IDE does a lot of Gradle-related work behind the scenes via a sync process, which makes it very easy to introduce build issues if you modify these files with a different program.

TypeScript

Having strongly typed class and components makes it much easier to understand and interpret the original author’s code. This is especially useful when dealing with React component’s state and props. The only drawback with TypeScript is setting up the environment (which is already taken care of in this project).

react-native-navigation

An open-source library maintained by Wix that provides developers with access to built-in navigation animations you’d expect from a native application. This project comes prebuilt with a TabBarNavigator and a couple of screens to illustrate best practices on how to set up your navigation stack.

Note: If you’re interested in building a single screen application. See the docs here.

jest

Jest is a great unit testing suite that ships with React Native. It provides a simple, flexible syntax that is powerful and human-readable. Jest also runs all tests in parallel - speeding up the test process. In this project, run the test suite with

yarn jest

detox

Another great open-source resource from Wix that allows end-to-end UI testing. Allows you to tag all of your components and manipulate them to simulate user inputs. This project has a single UI test in ./e2e/HomeScreen.spec.js to illustrate the correct way to label and manipulate components.

axios

A Promise based HTTP client with TypeScript and React Native support. Provides a simple interface for clean HTTP requests, and also handles transforming JSON data for you. Clean, simple, examples of how axios can be used to connect your application to remote resources can be found in UserService.ts.

nock

A mocking library that allows you to simulate HTTP requests/responses in the test suite without hitting a live endpoint. This is helpful if you’re building a client application before its server is ready to hit. You can mock the expected responses to make sure your application is ready to send/receive data when the servers are up. Mocking examples can be found in __tests__/models/UserService.ts.

Realm

A simple, yet powerful solution to local storage in React Native. Realm makes it easy to define model schemas and provides a clean, synchronous interface to manage your local store. An example of a model definition can be found in ./src/models/User.ts. An example of how a model’s functionality and repository can be exposed can be found in the store directory.

Watchman

Also ships with React Native, it tracks changes in your file system to enable the hot reload. To see this in action - run the project on a device and perform a ‘shake-gesture’. The React Native developer menu will pop up and you can select ‘Reload’ to quickly see any new changes you’ve made since the last launch.

Now you can move on to building awesome cross-platform features and UI - no need to worry about all the boring configuration stuff.