React Native Redux Starter Kit

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

Demo

iOS	Android

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.46.4 for building native apps using react
• Redux 3.7.x a predictable state container for Javascript apps
• Babel 6.x.x for ES6+ support
• NativeBase 2.3.3 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

• NativeBase 2.3.3

Get Started

1. Installation

On the command prompt run the following commands

$ git clone git@github.com: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/App.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.