This post demonstrates a working setup of React Native project.
Stuff we 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 before installing react-native-cli.
Create a new Project
react-native init myapp
As of this writing, there is a bug in firstname.lastname@example.org (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 before running the following command in a separate window.
In case we forget to plug in our phone, we will get the following error:
If we go back to the first window where the Metro Builder is running, we will have:
Please don’t do this on real projects.
Restart Metro Bundler
Restart Metro Bundler with the cleared cache.
npm start --reset-cache
Do “react-native run-android” in another window
Our App on Mobile Device
How to downgrade to email@example.com
- Stop the Metro Bundler
- Delete node_modules folder
- RunMS DOS1npm install
- Start Metro Bundler with cleared cache
- On the other windows, doMS DOS1react-native run-android