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).

UPDATE (8th March '19): RNN upgraded to v2.13.1 | RN to 0.58.6 | React to 16.8.4

Someone looking to jumpstart building apps using RN and prefers TS. The base setup has been taken care of, just yarn install and get going from respective IDEs.

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.

• Project Structure
• Running
• Lint
• Unit Tests
• Cheat Sheet
  • React Native Navigation
  • Styles
  • Widgets / Elements
• Contributing
• TODO

/
├── 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

shared Everything related to application business logic (store) resides under this directory.

src Only presentation layer for the app, styles, images, icons are meant to be under this.

web 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 >=8.11.x <=9

yarn install

Launch application from XCode

For android, run the Metro Bundler from the terminal

npm run start

and then launch from IDE.

To run tslint on the application:

yarn lint

To fix most tslint issues automatically

yarn lint:fix

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

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.

The 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.

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 <CText> or <ButtonDefault>, element that has default font properties like font, size and overrides the native elements.

Please check out Contributing.

• Anurag Chutani - Android Setup
• Brian Varley - Windows Setup

See also the list of contributors who participated in this project.

• Build React web app using shared business logic