React Native Typescript Boilerplate
React Native Starter Kit with React Native Navigation + Redux + TSLint to build iOS / Android apps using TypeScriptAn opinionated
The project has been setup based off RN Getting Started and instructions from Microsoft's Github TypeScript React Native Starter repo.
This repo supports the latest version of React Native (v0.57.8+) supported by RNN (at the time of writing).
Who is this for?
Someone looking to jumpstart building apps using RN and loves TS. The base setup has been taken care of, just
npm install and get going.
You might also want to rename the app for your own use.
Disclaimer: This is an opinionated approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
The project uses and encourages to use industry best practices / tools / libraries like RNN, redux, tslint, separation of concern and structure to build a maintainable app.
Table of Contents
- Project Structure
- Unit Tests
- Cheat Sheet
/ ├── android Android Native code ├── ios iOS Native Code ├── shared │ ├── redux Business Logic │ │ ├── constants │ │ ├── actions │ │ ├── api │ │ ├── reducers │ │ ├── store │ │ └── thunk │ └── utilities ├── src │ ├── config App Configuration │ ├── constants Screens, Localization │ ├── navigators Router, Navigation │ ├── view UI compoments - Screens, Widgets │ │ ├── elements Custom elements │ │ ├── assets │ │ ├── screens │ │ ├── styles Typography │ │ └── widgets Custom components │ └── utilities ├── __tests__ Unit Tests │ ├── presentation │ └── redux ├── .babelrc ├── .gitignore ├── .travis.yml Travis CI ├── tsconfig.json TypeScript Configuration ├── tslint.js TSLint configuration - extending AirBnb ├── tsconfig.json ├── app.json ├── index.js Application Entry point ├── package.json └── README.md
Everything related to application business logic (store) resides under this directory.
Only presentation layer for the app, styles, images, icons are meant to be under this.
Going forward, plan is to add a web folder to the project, that can leverage the business logic from shared folder.
Make sure node version installed is
Launch application from XCode
For android, you will need to first create the bundle:
react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/main.jsbundle --assets-dest ./ --dev false
then run the Metro Bundler from the terminal
npm run start
and the launch from IDE.
To run tslint on the application:
To fix most tslint issues automatically
Unit tests are under
__test__ directory at root.
To run unit test on the application:
npm run test
To find unit test coverage for the application:
npm run test:coverage
React Native Navigation
The application launches with a blank splash screen, and then moves to a tabbed based home view. Developers can feel free to add application launch logic to this, like fetch user token, load persist state etc., or skip the splash if not required, or change this setup altogether.
styles folder contains
global style and
typography for the application. Styles for each screen has been placed with the screen, as they are going to be used together with the screen, unlike web.
Widgets / Elements
The custom components have been broken into 2 major categories, namely - widgets, elements
A Good use case would be:
- widgets: carousels component, banner component, any component providing a complete functionality
- elements: A custom, may be
<ButtonDefault>, element that has default font properties like font, size and overrides the native elements.
Please check out Contributing.
- Anurag Chutani - Android Setup
See also the list of contributors who participated in this project.
- Build React web app using