🚀 Friday App 🚀

Build enterprise React Native apps

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 17, React Native 0.66.0, React Native Navigation v7, Flipper and Hermes

Update (Nov 2021):

Added Types (actions, reducers, store, components and more).
Core API service using fetch
Support for M1

Updates	RNN	RN	React	Comments
Nov '21	7.23.1	0.66.0	17.0.2	Type definitions
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

Sponsor

I will keep supporting the projects that I have open sourced. If you have used any of my projects, for yourself or your business, I'd love your support through Github sponsors. You can also try to convince your employer to sponsor as a business.

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
- Native Tabbed navigation using React Native Navigation v7
- Side / Drawer Menu support
State Management using Flux Architecture
- Redux
- Redux-Thunk middleware - side-effect handling
Atomic Design pattern
- The structure of the app is inspired by atomic design pattern.
- Widgets / Elements: Build your own Design Language System with these building blocks.
  - Typography: Base Typography setup - Color, Font, LAYOUT, CTA, FONTS, TEXT, TEXT_INPUT
  - elements: <BUTTON_DEFAULT> or <CTEXT>. They are custom elements that have default properties like font, size and so on.
```
<CTEXT style={GLOBAL.CTA.Style.primaryText}>{title}</CTEXT>
```
  - widgets: Any component providing a complete functionality. E.g. carousels component, banner component, etc.
```
<Category componentId={componentId} title={locale.Categories} />
```
Type Definitions
- Type definitons for actions, reducers, store, components and more.
Built-in Splash screen
Hermes and Flipper integrations
Code Lint
- Airbnb's JS Linting

App Screens

Flipper Support

Project Structure
Getting Started
Cheat Sheet
Contributing
TODO

Project Structure

/
├── android						Android Native code
├── ios							iOS Native Code
├── shared
│   ├── redux					Applications Logic
│   │   ├── constants
│   │   ├── actions
│   │   ├── api
│   │   ├── reducers
│   │   ├── store
│   │   └── thunk
│   └── utilities
│   ├── services
│   │   ├── core				Core Services - API (fetch/axios), storage
│   │   │  ├── API
│   │   │  └── Storage
│   │   ├── home
│   │   └── search
├── src
│   ├── config					Global Configuration
│   ├── constants				Screen names and ids, 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 >=12.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

Commands

	Remark
`yarn start`	Starts metro bundler
`yarn ios`	Starts iOS app. Start metro bundler first
`yarn android`	Starts Android app. Start metro bundler and Android emulator first
`yarn lint`	linting
`yarn lint:fix`	tries to fix linting issues automatically
`yarn build:android:debug`	Android debug build
`yarn build:android:release`	Android release build

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.

M1 support

Some additional steps may be required for project to work on M1.

Disable Rosetta in Terminal
Install ffi

sudo arch -x86_64 gem install ffi

Re-install dependencies

arch -x86_64 pod install

Now try and run CocoaPods.

P.S.: Thanks to samanthadotcom#7043 (discord)

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.

How to Rename A React Native App

NPM Package: react-native-rename

Contributing

Please check out Contributing.

Authors

Anurag Chutani - Android Setup
Brian Varley - Windows Setup
Nelson Omuto - Update Podfile

tslint.js files throws a syntax error running yarn lint on windows

Describe the bug
A clear and concise description of what the bug is.

On the master branch after a successful run of yarn of this project. The yarn lint or yarn lint:fix commands fail on my windows machine. A syntax error is thrown classed as a "Microsoft JScript compilation error". (see attached screenshot)

It looks to be a Windows specific issue where this tslint.js is being run by windows instead of node when called in package.json - similar to this SO question: https://stackoverflow.com/questions/37192508/trying-to-execute-a-script-from-package-json-on-windows-throws-a-jscript-error

Expected results

What did you expect to happen?

The yarn lint command would run to completion and lint the project source files.

Observed results

The yarn lint command throws a syntax parse error on Windows machine, pointing to the tslint.js file as the culprit. This is run straight after cloning and yarn install without any modification to the original code.

What happened?

Logs

Run react-native info in your terminal and paste its contents here.

$ react-native info

  React Native Environment Info:
    System:
      OS: Windows 7
      CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
      Memory: 3.22 GB / 7.88 GB
    Binaries:
      Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.3.0.0 AI-182.5107.16.33.5199772

Steps to reproduce

$ nvm list

  * 8.11.4 (Currently using 64-bit executable)
    8.11.2
    8.10.0

$ nvm use 8.11.4

$ yarn

$ yarn lint
yarn run v1.13.0
$ tslint --project ./tsconfig.json
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Throws the following syntax parse error on Windows:

amitm30 / react-native-typescript-boilerplate Goto Github PK

react-native-typescript-boilerplate's Introduction

🚀 Friday App 🚀

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

Supports React 17, React Native 0.66.0, React Native Navigation v7, Flipper and Hermes

Sponsor

Introduction

App Screens

Flipper Support

Table of Contents

Project Structure

Getting Started

iOS

Android

Commands

Cheat Sheet

iOS Launch Screen

Android Launch Screen

M1 support

Single Screen vs Tabbed Based Navigation

Renaming the App

Contributing

Authors

react-native-typescript-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

react-native-typescript-boilerplate's Issues

Expected results

Expected results

Steps to reproduce

Expected results

Observed results

Logs

Steps to reproduce

Recommend Projects

Recommend Topics

Recommend Org