React Native Boilerplate

Running locally

1. Setup your local environment by following the React Native CLI getting started guide
2. Clone the repo - git clone git@github.com:SMJ93/react-native-boilerplate.git
3. Install dependencies - yarn or npm install
4. Run the Metro Bundler - yarn start or npm start
5. Run iOS or Android - react-native run-ios or react-native run-android

Environments

To manage our environments we will use React Native Config.

• Production (Binary + codepush)
  • Production apps on the app stores
• Demo (Binary + codepush)
  • Should be a copy of what is on production
    • For final tests with codepush / api’s etc
• Develop (Binary only)
  • Development work including features, bugs, master branch etc

Branching

To trigger different types of builds and releases we will use the following branching naming convention:

• production/X.X
  • Branch off demo branch and build production app binary for iOS and Android and upload to Google Play and Apple stores
  • An admin/manager can then release on itunes connect / Google play console
• demo/X.X
  • Branch off master branch and build demo app binary and distribute through windows app center to demo testers
• codepush/X.X.X
  • Branch off master branch and codepush to demo app
    • Only JS changes, binary changes will break the app
  • If happy with codepush release on demo app promote to production app through windows app center
• master
  • Each time code is merged into master branch it should build the develop app and distribute through windows app center to develop app testers
• Dev branches
  • Branch off master to create any of the following dev branches:
    • feature/new-thing
    • fix/change-this
    • spike/test-that
    • task/do-that
  • Each time code is pushed to any of these dev branches it should build the develop app and distribute through windows app center to develop testers with the branch name / details in the release notes.

Continuous Integration

To manage our binary and Codepush releases we will use Windows App Center.

As an alternative we could use Fastlane.

Navigation

For navigation we will use React Navigation stacks, tabs, drawer and modal stacks:

Testing

To reduce the change of shipping bugs we will run unit unit, component and end-to-end tests:

• Jest for unit tests.
• Component testing using react-test-renderer and Jest.
• Detox for end-to-end ui testing.

Code Quality

We will use TypeScript so we can statically type our code.

For linting we will use ESLint.

To enforce a consistent code format we will use Prettier.

Managing iOS Certificates

Fastlane Match allows us to easily sync developer certificates and profiles across the team.

TODO LIST

• Setup detox with simple navigation tests
• Setup component tests with test renderer
• Setup tanslations
• Setup react native config
  • Production
  • Demo
  • Develop
• Setup iOS certificates
• Setup windows app center and codepush