React Native Template - TypeScript
An opinionated React Native Starter Kit with React Native Navigation + Redux + Airbnb TSLint to build iOS and Android apps using TypeScript
The project has been setup based off RN Getting Started and instructions from Microsoft's Github TypeScript React Native Starter repo.
Supports React Native 0.64.1, React Native Navigation v7, Flipper and Hermes
| Updates | RNN | RN | React | Comments |
|---|---|---|---|---|
| May '21 | 7.14.0 | 0.64.1 | 17.0.1 | Update RN RNN, Hermes Support |
| Oct '20 | 7.1.0 | 0.63.3 | 16.13.1 | Support for Flipper |
| Apr '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN > 0.60, Android X |
| Nov '19 | 2.26.2 | 0.59.10 | Maintenance | |
| Mar '19 | 2.13.1 | 0.58.6 | 16.8.4 |
Introduction
Jumpstart building robust apps using React Native and TypeScript with most commoly needed tools already setup. Just yarn install and get going from respective IDEs.
- Routing and Navigation
- Tabbed navigation using React Native Navigation v7
- Side Menu support
- State Management using Flux Architecture
- Redux
- Redux-Thunk middleware
- Widgets / Elements Build your own design system with these building blocks.
- elements:
<BUTTON_DEFAULT>or<CText>. They are custom elements that have default properties like font, size and so on. - widgets: Any component providing a complete functionality. E.g. carousels component, banner component, etc.
- elements:
- Typography
- Base Typography setup - Color, Font, LAYOUT, CTA, FONTS, TEXT, TEXT_INPUT
- Code Lint
- Airbnb's JS Linting
Disclaimer: This is an opinionated approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
App Screens
 |
 |
 |
|---|
Flipper Support
Table of Contents
Project Structure
/
├── android Android Native code
├── ios iOS Native Code
├── shared
│ ├── redux Applications Logic
│ │ ├── constants
│ │ ├── actions
│ │ ├── api
│ │ ├── reducers
│ │ ├── store
│ │ └── thunk
│ └── utilities
├── src
│ ├── config Global Configuration
│ ├── constants Screens, Localization
│ ├── navigators Router, Navigation
│ ├── view UI compoments
│ │ ├── 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. The redux store.
src Presentation layer for the app - screens, styles, images, icons etc.
Getting Started
Make sure node version installed is >=10.x.x. Then install using yarn (or npm):
yarn install
Start the Metro Bundler:
yarn start
iOS
One time. Move to ios folder and install pods:
cd ios && pod install
Launch application from XCode (Command + R) Or launch from Terminal:
yarn ios
# runs the following command. change device name here
# `npx react-native run-ios --simulator='iPhone 11'`
Android
Start an Android Simulator from:
Android Studio > Tools > AVD Manager > Run any device
Similarly, run from Android Studio itself Or from Terminal:
yarn android
# runs the following command
# react-native run-android --variant=Debug
Cheat Sheet
iOS Launch Screen
XCode -> Project Folder -> Click on `Images.xcassets` -> Click on `LaunchScreen`
Change the 3 images here to set the new launch screen for iOS.
Android Launch Screen
`./android/app/src/main/res/drawable-*` folders
Change the images the drawable-* folders to set the new launch screen for Android.
Single Screen vs Tabbed Based Navigation
The application launches with a splash screen, and then moves to a tabbed based navigation. Splash screen is a good place to fetch data / build application launch logic like getting user token from API or Async Store, load persist state etc.
For Single screen application, replace this tabbed based navigation with a single screen - just home, or simply use the splash screen to setup the app, may be with a burger menu.
Renaming the App
You might also want to rename the app for your own use. Follow any of the links below.
Or
- NPM Package: react-native-rename
Contributing
Please check out Contributing.
Authors
- Anurag Chutani - Android Setup
- Brian Varley - Windows Setup
- Nelson Omuto - Update Podfile
See also the list of contributors.
![[ASK] Splash screen cant hide Friday app page](https://avatars.githubusercontent.com/u/15274901?v=4)
4.6k Jan 4, 2023
577 Oct 26, 2022
254 Oct 29, 2022
393 Jan 2, 2023
2 Feb 3, 2022
2k Jan 5, 2023
4.6k Jan 2, 2023
1.6k Dec 9, 2022
177 Oct 30, 2022
137 Feb 14, 2022
3.4k Jan 4, 2023
1.7k Jan 3, 2023
29 Dec 26, 2022
73 Sep 6, 2022
13 Feb 14, 2022
40 Feb 14, 2022
362 Nov 21, 2022
1.3k Jan 6, 2023
82 Feb 14, 2022