-
Installing Dependencies You will need
Node.js
, theReact Native command line interface
, andAndroid Studio
. -
install node.js and python2
you can download nodejs.exe windows install package
or use cli tools chocolatey to download nodejs
and python2
.
choco install nodejs.install
choco install python2
You can find additional installation options on Node.js's Downloads page .
- install RN CLI
Node.js comes with npm, which lets you install the React Native command line interface.v Run the following command in a Terminal:
npm install -g react-native-cli
If you get a permission error, try using sudo: sudo npm install -g react-native-cli
.
If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L http://npmjs.org/install.sh | sudo sh
.
- Android Development Environment
- Download and install Android Studio
- Install the AVD and HAXM
- Set up the ANDROID_HOME environment variable
Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native start inside the newly created folder to start the packager.
react-native init AwesomeProject
cd AwesomeProject
react-native start
Open a new command prompt and run react-native run-android inside the same folder to launch the app on your AVD.
react-native run-android
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
If you're targeting API level 23, the app might crash on first launch with an error smilar to Unable to add window android.view.ViewRootImpl$W@c51fa6 -- permission denied for this window type. To fix this, you need to go to System settings > Apps > Configure apps > Draw over other apps and grant the permission for the app. NOTE: Many React Native modules haven't been tested on Marshmallow and might break. Please thoroughly test the app if you target API level 23 and file a bug report if you find that something is broken.
In your app's root folder, run:
$ npm init
$ npm install --save react react-native
`$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig`
This creates a node module for your app and adds the react-native npm dependency. Now open the newly created package.json file and add this under scripts:
"start": "node node_modules/react-native/local-cli/cli.js start"
- Prepare your current app
In your app's build.gradle file add the React Native dependency:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }
If you want to ensure that you are always using a specific React Native version in your native build, replace + with an actual React Native version you've downloaded from npm. In your project's build.gradle file add an entry for the local React Native maven directory:
allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } ... }
Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio. Next, make sure you have the Internet permission in your AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
If you need to access to the DevSettingsActivity add to your AndroidManifest.xml:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.