Following guide shows how to setup a development environment and create a simple native mobile app based in React.
1. Setup a development environment
You will need react-native-cli in order to develop react native mobile app.
On Mac environment, you can install it like below
sudo npm install -g react-native-cli
2. Create a project
Following example shows how to create a React native mobile app on terminal.
react-native init nsaju
Note that you can use your own name instead of "nsaju" above. If everything is okay, you will see message like below:
This will walk you through creating a new React Native project in /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
> fsevents@1.2.7 install /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju/node_modules/fsevents
> node install
node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-native@0.59.1 requires a peer of react@16.8.3 but none is installed. You must install peer dependencies yourself.
+ react-native@0.59.1
added 721 packages from 382 contributors and audited 31705 packages in 24.673s
found 11 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Setting up new React Native app in /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju
info Adding required dependencies
+ react@16.8.3
added 2 packages and audited 31718 packages in 6.037s
found 11 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
info Adding required dev dependencies
npm WARN jest-resolve-dependencies@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jest-snapshot@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jest-resolve@24.5.0 requires a peer of jest-haste-map@^24.0.0 but none is installed. You must install peer dependencies yourself.
+ @babel/core@7.4.0
+ @babel/runtime@7.4.2
+ metro-react-native-babel-preset@0.53.1
+ react-test-renderer@16.8.3
+ jest@24.5.0
+ babel-jest@24.5.0
+ eslint@5.15.3
+ @react-native-community/eslint-config@0.0.3
added 568 packages from 344 contributors, updated 4 packages and audited 515877 packages in 18.713s
found 11 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
Run instructions for iOS:
• cd /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju && react-native run-ios
- or -
• Open ios/nsaju.xcodeproj in Xcode
• Hit the Run button
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd /Users/kurapa/ownCloud/Chun Kang (Private)/src/nsaju && react-native run-android
In my case, I just tried ios app first, because that is what I have at that time, so tried following commands like the guide while I create a project above.
cd nsaju react-native run-ios
In case that you face following error message when you run "react-native run-ios", that might be caused by the location of command line tools.
~/src/nsaju $ react-native run-ios info Found Xcode project nsaju.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool or in PATH error Command failed: xcrun instruments -s xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
To fix above issue, please run Xcode > Preferences > Locations > select your Xcode version from the drop down menu
If you see the error message as "No bundle URL present" like below, it means there are some possibilities to exist other React Native sessions (assuming they're running on default 8081) before re-building.
You can avoid above situation by following command:
rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios
Make sure you are not on proxy.
For your information, below YouTube clip is super helpful as a training course that shows how to create native mobile in React.
https://school.shoutem.com/lectures/build-react-native-mobile-app-tutorial/
Even though all written in Korean, below link is also useful to know more about React native app development.