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

πŸ‘‹ One new thing before you go

Are you investing in your developer career? πŸ˜’

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! πŸ₯

Just one of many great perks of being part of the network ❀️

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay