DEV Community

Steve Mak
Steve Mak

Posted on • Edited on

React Native

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more