How to setup react native 0.2 with babel 6 (Android)

How to setup react-native 0.2 with babel 6 (Android)

---

Introduction

After trying lots of boilerplate found on the web, I finally decided to write my own, because i didn't found a functional react-native 0.2 with babel 6 boilerplate.

The solution is simpler than i thought ( thanks to react-native babel preset )

---

Requirements

• react-native: How to Install
• android: How to install

At this point, we need either an android virtual device or a physical android device.

To check this, running :

$ adb devices

should return something like :

List of devices attached
07bdb2f7	device

---

Installations

• init a new react-native project
• install babel stuffs
• configure .babelrc

react-native init myApp && cd myApp
npm install react-native-cli babel babel-core babel-preset-react-native babel-preset-stage-0 --save-dev
echo '{ "presets": ["react-native", "stage-0"] }' > .babelrc

package.json scripts

Just add this scripts to package.json :

"scripts": {
  "android": "react-native run-android",
  "start": "npm run cleanCache && node node_modules/react-native/local-cli/cli.js start",
  "cleanCache": "rm -rf $TMPDIR/react-*"
},

---

Test on your device

To see if it's really working, let's try importing my Fjs library.

npm install guillaumearm/Fjs --save

add this lines in index.android.js :

import * as F from 'Fjs'
console.log(F)

run the packager:

npm start

If the application is not launched in your device, use:

npm run android

It could take a while.

At this point, you should have the default hello world displaying on your device, not really awesome, but if it works, you can work with babel 6 and his presets react-native and stage-0 :)

Boilerplate

You can directly use my react_native_android_boilerplate