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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)