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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more