react-native-coffee

Cloned from https://github.com/pixshatterer/react-native-webpack-starter-kit

Requirements

• Node 4.x or better
• React Native for development
• Xcode for iOS development (optional)
• Android SDK for Android development (optional)
• Android Lollipop or better for Android device testing (optional)

Stack

• React Native for native app development
• Babel for ES6+ support
• Webpack module loader and bundler
• Docker and VirtualBox for Windows-based development

Installation

Clone repo and install dependencies once your environment is set-up:

git clone -o upstream -b master --single-branch \
  https://github.com/benrki/react-native-coffee.git && cd $_
npm i

See Using with Docker for experimental Windows setup.

Running

Once dependencies are installed, run the starter kit with:

npm start

This will start the React Packager and a Webpack Dev Server. The dev server will watch your JS files for changes and automatically lint and generate the index.[platform].js files expected by your React Native iOS or Android app.

iOS

Status: All systems go.

Open ios/App.xcodeproj in Xcode, build and run the project.

Unlike the app currently generated by react-native init this app removes the UIViewControllerBasedStatusBarAppearance key to prevent an App Store rejection I received building the [Lumpen Radio] RN iOS app. The key may be added back, if desired.

Android

Status: Bug in simulator. Test on actual device using adb with npm run android-setup-port.

For android development use the following:

npm run android-setup-port # Note that this option is available on devices running android 5.0+ (API 21)
react-native run-android

If you run into any issues please see the Getting Started guide for React Native before submitting an issue.

Testing

As a minimalist seed this project does not introduce a testing framework. Instead it leverages simple static code analysis to help prevent coding mistakes and introduce some good practices for building React Native apps with ES6 and ES7.

Webpack is configured with a pre-loader to lint the application with ESLint using the Babel parser during app development. And the npm test command may be run at anytime to lint source code otherwise. See the .eslintrc file to adjust linter rules to your liking.

Bundling

Building the app for distribution.

1. Execute npm run bundle to generate the offline JS bundle.
2. For iOS, update AppDelegate.m to load from pre-bundled file on disk.
3. Test the application, create an archive and submit to the store.

Submitting to Store

Please see Submitting to App Store for instructions on iOS. If you have any good Android instructions, please send a PR this way. Good luck and have fun out there!

Using with Docker

Status: Experimental.

Windows users may experience problems with React Native development. This kit includes a Dockerfile which can be used to create a virtualized development environment for building your app on a Windows machine. To use it set-up Docker Machine then run the following commands with cmder (or similar) to get going:

1. Clone this repo then update .watchmanconfig to the following: {"ignore_dirs": ["node_modules"]}.
2. Run docker build --rm . command from the project root directory to build a virtualized Linunx environment configured for development using this starter kit.
3. Get the ID of the built Docker image by running docker images and looking for the most recently created image.
4. Then shell into the box with docker run -it 09608e4ec865 /bin/bash (where 09608e4ec865 is the Image ID) and run the app with npm start.

If iOS and Android device emulators are not available for your development environment (anything except OS X, basically) consider shipping code directly to a native device using Exponent.