---

React Native Boilerplate

Intro

This React Native boilerplate represent a complete ToDo application example using Typescript for a strongly typed code and many others library accurately configured from Debugging to Release.

The project uses Mobx State Tree for state management, AppCenter (CodePush, Analytics and Crashes) for build and CI, and many others:

• State Management
  • Mobx Simple, scalable state management
  • Mobx State Tree Model Driven State Management
• Routing and navigation
  • React Navigation using Switch, Tab and Stack navigation
• Internationalization
  • React Native Languages for detect app language changes
  • i18next to handle translations keys
• UI Components
  • Custom Button
  • Custom Form
• Custom Font Icons
  • React Vector Icons to use icons as fonts
  • IcoMoon to manage the app icons as export it as a ttf font
• Theming and Styles
  • Theming custom structure using different Styles, Variables and Images supporting multiple themes folders
• App Center
  • Code Push CodePush together with Crashes and Analytics
  • CodePushUtils to dynamically set deployment Key and check for updates
• Code Linting with
  • TS Lint React and guidelines
  • CommitLint to check the commit message format
  • Prettier format the code in a standard way
• Debugging
  • Reactotron
• Release
  • standard-version with one command (yarn release) release a new version, create changelog and tag a new release
  • React Native Version to update the iOs and Android native version number

---

Getting Started

1. Clone and Install

*It's recommended that you use Yarn Yarn instead of npm and install Reactotron for inspecting the app store and actions.

# Install CocoaPods
sudo gem install cocoapods

# Clone the repository
git clone https://github.com/lomocoin/lomo-rn-boilerplate.git

# Install app dependencies
yarn

2.1. Run the Mock API server

# Start the mock server in a new terminal
yarn parrot

2.2. Run the React Native App

# Start the iOS platform
yarn ios
# Start the Android platform
yarn android

2.3. Login

# Use the default test account
username: test
password: test

Full list of available commands

Utils

• yarn translations: generate all the JSON language files from the translations.xls file
• yarn reset: reset React Native cache (to fix React Native version mismatch error)
• yarn clear: Hard clear all the cache, iOs Pods, node_modules and reinstall the app dependencies
• yarn fonts: copy fonts in android project and generate the Icon.ts file with a list of all available icons.

Release

• yarn release: automatically bump version number, create changelog and tag a new version (add --release-as 1.0.0 to specified a version number)
• yarn release-push: push release tag to GitHub

iOS

• yarn ios: run iOS simulator in Debug mode
• yarn ios-run-release: run iOS simulator in Release mode

Android

• yarn android: run Android in Debug mode on attached device or emulator
• yarn android-run-release: run Android Release mode on attached device or emulator
• yarn android-log: open react-native log to inspect logcat

CodePush

• yarn ios-codepush: build an iOS Release version and then push it to AppCenter under Staging deployment
• yarn android-codepush: build an Android Release version and then push it to AppCenter under Staging deployment

Todos

• Writing Unit Testing
• Integrate End-To-End testing with Detox