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 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 :)

---

Setup your application id and application name

Application name :

• edit android/app/src/main/res/values/strings.xml and replace ExampleApp by your app name.

Application id :

choose an application id (example : com.redpelicans.timetrack), and replace all 'com.yourapp' in this files:

• edit android/app/build.gradle
• edit android/app/src/main/AndroidManifest.xml
• edit android/app/src/main/java/com/<YourAppName>/MainActivity.java

---

Generating Signed APK

Check here for generate release app : https://facebook.github.io/react-native/docs/signed-apk-android.html

---

Boilerplate

You can directly use my react_native_android_boilerplate

---

Flow type checker

Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs before they run.

Check the official documentation.

In practice

For say to flow what file you want to check

• Add this comment at the top of the file :

/* @flow */

More info on this page.

---

Troubleshooting

If react-native say something like that :

Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli

remove react-native local binary:

rm -f node_modules/.bin/react-native