DEV Community

Steve Mak
Steve Mak

Posted on • Edited on

React Native

#modules #reactnative #quickstart

Quick Start

References:

Prerequisites 

brew install node brew install watchman sudo gem install cocoapods # Install in the project root rather than globally [Recommended] npm i react-native --save-dev npm i ios-deploy --unsafe-perm --save-dev
Enter fullscreen mode Exit fullscreen mode

Init a project 

npx react-native init AwesomeProject # Using a specific version npx react-native init AwesomeProject --version X.XX.X # Using a specific template npx react-native init AwesomeTSProject --template react-native-template-typescript
Enter fullscreen mode Exit fullscreen mode

Starts Metro Bundler (Ref: Metro) 

npx react-native start
Enter fullscreen mode Exit fullscreen mode

Run on simulator

(Require Metro Bundler)

npx react-native run-ios npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

Run on simulator/device without Metro Bundler (Production build) 

npx react-native run-ios --configuration Release npx react-native run-ios --configuration Release --device
Enter fullscreen mode Exit fullscreen mode

Remove unused plugin from pod 

# Install clean: $ sudo gem install cocoapods-clean # Run deintegrate in the folder of the project: $ pod deintegrate # Clean: $ pod clean # Modify your podfile (delete the lines with the pods you don't want to use anymore) and run: $ pod install
Enter fullscreen mode Exit fullscreen mode

Modules

Navigation

React Navigation
https://reactnavigation.org/

File upload/download

rn-fetch-blob
https://github.com/joltup/rn-fetch-blob

File picker

react-native-document-picker
https://github.com/Elyx0/react-native-document-picker

File system

react-native-fs
https://github.com/itinance/react-native-fs

Sound player

react-native-sound
https://github.com/zmxv/react-native-sound
react-native-sound-player
https://github.com/johnsonsu/react-native-sound-player

Icon

react-native-vector-icon
https://github.com/oblador/react-native-vector-icons

Sortable view

react-native-sortable-list
https://github.com/gitim/react-native-sortable-list
react-native-draggable-flatlist
https://www.npmjs.com/package/react-native-draggable-flatlist

Top comments (0)