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
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.