💡 Build your React Native app with Webpack and Babel https://habd.as/code/react-native-webpack-starter-kit/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas 59c2c969af
docs(readme): update awesome rn link to avoid redirect
2 years ago
android feat(Kit): Forever 21 RN upgrade 5 years ago
ios chore(Snyk): update security policy 5 years ago
src Upgrade to RN 0.29 5 years ago
.editorconfig chore(editorconfig): Update for better Markdown support; Makefiles 5 years ago
.eslintrc.js build(eslint): stop using babel-eslint; convert eslint config to JS 5 years ago
.flowconfig feat(Kit): Forever 21 RN upgrade 5 years ago
.gitignore Support React Native 0.17.0. See Release notes for upgrade info. 5 years ago
.snyk chore(Snyk): update security policy 5 years ago
.travis.yml The worlds tiniest CI/CD configuration file 6 years ago
.watchmanconfig feat(Kit): Forever 21 RN upgrade 5 years ago
Dockerfile docs(Dockerfile): greenkeep links 2 years ago
LICENSE Update LICENSE 5 years ago
README.md docs(readme): update awesome rn link to avoid redirect 2 years ago
cover.jpg docs(readme): restore cover image 2 years ago
package.json Upgrade to RN 0.29 5 years ago
webpack.config.js Remove unused variable webpack 5 years ago


No Longer Maintained

This kit was originally used to build and ship, and later extracted from, Lumpen Radio early in the RN lifecycle. Since then there have been significant advances in RN tooling and, as a result, I recommend checking out some of the other Awesome React Native Boilerplates that've popped up lately. Have fun out there!

React Native Webpack Starter Kit

Build Status Dependency Status devDependency Status

Build your React Native app with Webpack and Babel.

React Native Webpack Starter Kit

Simple asset pipeline for seed apps built with React Native. Uses Babel 6 for ES7 JavaScript transpilation with Stage 1 support, and Webpack as a dev server and module bundler. Provides static code linting using ESLint and build output in the same console window, and Source Maps for debugging in the browser. Unprescriptive in terms of test frameworks and Flux implementations. Additional features listed below.


  • Minimal dependencies
  • Follows the latest React Native stable release
  • Manage assets using Webpack
  • Dynamically generates JS bundles using Webpack Dev Server (archive)
  • Provides static code analysis with ESLint
  • Keeps dependencies fresh using Greenkeeper
  • Monitors dependency vulnerabilities with Snyk
  • Aids code consistency using EditorConfig
  • Integrates with webpack-notifier for desktop notifications on OS X
  • Example CI service integration using Travis



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

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


Once project cloned and dependencies installed, run it with:

npm start

This will start the React Packager and a Webpack Dev Server. The dev server will watch your JS files for changes, automatically linting your code as you iterate. Additionally, the dev server will generate the index.[platform].js files expected by your React Native iOS or Android app, allowing you the freedom to build


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 submitting Lumpen Radio to the App Store. The key may be added back, if desired.

For information on HMR support for iOS see react-native-webpack-server/issues/103.


Status: Bug in simulator. Test on actual device instead.

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.


Status: Experimental.

This kit includes a Dockerfile which can be used to create a virtualized development environment for building your app. To use it on Windows set-up Docker Machine then run the commands below with cmder (or similar) to get going. OS X users are encouraged to use dlite instead of Docker Machine for this setup.

  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 or CodePush.


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 patterns for building React Native apps with ES2015 and ES7 with a functional mindset inspired by the Elm architecture and functional React alternatives like Deku.

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


To bundle the app for distribution for both iOS and Android:

  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!