This post demonstrates a working setup of React Native project.
Stuff used for this post.
- Windows 10 Enterprise
- node v8.11.3
- npm v6.4.1
- Android Studio 3.1.3
- JDK 8
- Two Windows command-line windows
- One to run Metro Builder
- One to run our application on a mobile device
- Configure mobile device
Set Up New Project
Install React Native
npm install -g react-native-cli
Install Android Studio
This can be done even prior to installing react-native-cli.
Create a new Project
react-native init myapp
As of this writing, there is a bug in email@example.com (https://github.com/facebook/react-native/issues/21490). For this post, we’ll change a file in the metro-react-native-babel-preset module to make things work.
For real projects, either downgrade to 0.57.1 or wait for a new release.
Then, go inside the project folder.
We now have several files and folders.
Start the Metro Bundler
Keep this application running the whole time.
Set some environment variables
Note that we are in another command-line window.
Plug in Our Phone
Plug in our phone now before running the following command in a separate window.
In case we forgot to plug in our phone, we will get the following error:
If we go back to the first window where we the Metro Builder is running, we will have:
Please don’t do this on real projects.
Restart Metro Bundler
Restart Metro Bundler with cleared cache.
npm start --reset-cache
Do “react-native run-android” in another window
Our App on Mobile Device
How to downgrade to firstname.lastname@example.org
- Stop the Metro Bundler
- Delete node_modules folder
- Update package.json as follows
MS DOS1npm install
- Start Metro Bundler with cleared cache
- On the other windows, do
MS DOS1react-native run-android