React Native Redux Starter Kit

A starter boilerplate for a mobile app using React Native and Redux.

Demo (Account: [email protected] / 123456)

Requirements

• Node 6.x or newer
• React Native for development
• Xcode for iOS development
• Android Studio for Android development
• Android SDK 23.0.1 or newer for Android development
• Genymotion for Android emulation
• Android Marshmallow or newer on your Android device to test properly

See Getting Started to install requirement tools.

Stack

• React JS is a JavaScript library
• React Native 0.57.0 for building native apps using react
• Redux 4.0.0 a predictable state container for Javascript apps
• Babel 7.2.3 for ES6+ support
• NativeBase 2.7.2 a UI components for React Native
• Immutable Immutable persistent data collections for Javascript
• Navigation for React Native a router based on new React Native Navigation API

Libraries

• native-base 2.7.2
• redux-modal 2.0.3
• react-native-splash-screen 3.1.1
• react-native-loading-spinner-overlay 0.5.2

Get Started

1. Installation

On the command prompt run the following commands

$ git clone [email protected]:daviddang91/react-native-redux-starter-kit.git

$ cd react-native-redux-starter-kit/

$ npm install

2. Simulate for iOS

Method One

• Open the project in Xcode from ios/ReactNativeStarter.xcodeproj.

• Hit the play button.

Method Two

• Run the following command in your terminal.

$ react-native run-ios

3. Simulate for Android

• Make sure you have an Android emulator installed and running.

• Run the following command in your terminal.

$ react-native run-android

Setup ES6+Babel+JSX Linting with Atom/Nuclide

This sets up Atom to properly lint ES6+Babel+JSX using Airbnb's .eslintrc as a starting point.

Steps

1. Download Atom and get these two packages: Linter and Linter-ESLint
2. Run npm i -D eslint eslint-config-airbnb babel-eslint eslint-plugin-babel eslint-plugin-react eslint-plugin-react-native eslint-plugin-import eslint-plugin-jsx-a11y from your project root.
3. Add "extends": "airbnb" to your .eslintrc and "plugins": [ "babel", "react", "react-native", "jsx-a11y" ]
4. Run apm install linter-eslint this also installs linter which clashes with nuclide diagnostics
5. Run apm disable linter to stop the linter clashing with nuclide

See Airbnb's Javascript styleguide and the ESlint config docs for more information.

Data Persistence

• redux-persist 5.10.0 persist and rehydrate a redux store

Debugger

• React Native Debugger : The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
• redux-devtools-extension 2.13.5

Rename Project

Rename react-native app with just one command

This package assumes that you created your react-native project using react-native init.

Installation

yarn global add react-native-rename
or
npm install react-native-rename -g

Switch to new branch first

better to have back-up

git checkout -b rename-app

Usage

react-native-rename <newName>

With custom Bundle Identifier (Android)

react-native-rename <newName> -b <bundleIdentifier>

Example

react-native-rename "Travel App"

With custom Bundle Identifier

react-native-rename "Travel App" -b com.junedomingo.travelapp