pct/reactnative-scripts

ReactNative Scripts

node version use 16

$ brew install node@16
$ brew link --overwrite node@16

TODO:

• 引入 MST https://mobx-state-tree.js.org/intro/welcome

Usage:

clean project:

$ ./init.sh your_new_project

or with tab:

$ ./tabview_init.sh your_new_project

or with bottom tab:

$ ./bottom_init.sh your_new_project

(remember react-native link react-native-vector-icons, keep Info.plist and then unlink)

用 ReactNative 開發的 Apps

• https:/github.com/ReactNativeNews/React-Native-Apps

Packages

DB (Watermelon DB)

• https://watermelondb.dev

react-native-eject

• 主要是重新產生 ios/android, 這對更新版本很有用

device info

• https://github.com/react-native-device-info/react-native-device-info
• 比如可以使用 DeviceInfo.getVersion()

react-native-auto-height-image

• https://github.com/vivaxy/react-native-auto-height-image

react-native-background-upload

• https://github.com/Vydia/react-native-background-upload

rxjs

• rxjs-hooks https://github.com/LeetCode-OpenSource/rxjs-hooks

react native multiple select

• https://github.com/WrathChaos/react-native-multiple-select

React Native Drag Text Editor

• https://github.com/eneskarpuz/react-native-drag-text-editor

In App Purchase

• 說明：https://medium.com/better-programming/react-native-in-app-purchase-subscription-bb7ad18ec5a0
• https://github.com/dooboolab/react-native-iap

App Step by Step 說明

• https://github.com/xcarpentier/rn-tourguide

背景預設圖片

• https://github.com/mrousavy/react-native-blurhash

網路相關設定

• https://github.com/ifsnow/react-native-networking-patch

附近訊息

• https://github.com/mrousavy/react-native-google-nearby-messages

use state persist

• https://github.com/leoafarias/use-state-persist

List

• https://github.com/Flipkart/recyclerlistview

Template

• https://github.com/infinitered/ignite-bowser

Network (check if no network)

• https://github.com/react-native-vietnam/react-native-network-state

Camera

• https://github.com/wix/react-native-camera-kit
• https://github.com/mrousavy/react-native-vision-camera

Device Permission

• https://github.com/yonahforst/react-native-permissions

styled-components

• https://github.com/styled-components/styled-components

Stylus

• https://github.com/kristerkari/react-native-stylus-transformer

Material Design

• https://github.com/callstack/react-native-paper

UI Component

• http://nativebase.io/
• https://github.com/react-native-community/react-native-elements
• https://github.com/shoutem/ui
• https://github.com/sonnylazuardi/awponent
• https://wix.github.io/react-native-ui-lib

Learn flexbox

• https://facebook.github.io/react-native/docs/flexbox.html

Magazine

• https://github.com/ggomaeng/react-native-magazine-listview

Card Modal

• https://github.com/ggomaeng/react-native-card-modal

Lightbox

• https://github.com/oblador/react-native-lightbox

Animation

• http://www.lottiefiles.com/
• https://github.com/oblador/react-native-animatable

CLI Template

• facebook/react-native#12548

react-native init MyApp --template foo to create from github project name react-native-template-foo

Navigator

• https://github.com/react-community/react-navigation
• 可以嘗試看看 react-router-native https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native

Toast Alert

• https://github.com/dilipsuthar97/react-native-tasty-toast
• https://github.com/seniv/react-native-notifier

progress bar

• https://github.com/hngocl/progress-react-native
• Image Progress: https://github.com/oblador/react-native-image-progress

Google Font

• https://github.com/expo/google-fonts

tools

ref: https://medium.com/@bilalbudhani/9-libraries-to-consider-for-your-next-react-native-project-723f179d4764#.13j6va6v4

• Iconic: https://github.com/prscX/react-native-iconic
• Icons: https://github.com/oblador/react-native-vector-icons
• Form: https://github.com/FaridSafi/react-native-gifted-form
• Push: https://github.com/zo0r/react-native-push-notification
• GA: https://github.com/idehub/react-native-google-analytics-bridge
• Fabric: https://github.com/corymsmith/react-native-fabric
• Loading: https://github.com/BilalBudhani/react-native-sleek-loading-indicator

Browser

• https://github.com/proyecto26/react-native-inappbrowser

Audio & Video

• https://github.com/react-native-kit/react-native-track-player
• Background Play Setting: https://developer.apple.com/library/archive/documentation/Audio/Conceptual/AudioSessionProgrammingGuide/AudioSessionBasics/AudioSessionBasics.html#//apple_ref/doc/uid/TP40007875-CH3-SW3
• https://github.com/react-native-community/react-native-video

Intro

• https://github.com/FuYaoDe/react-native-app-intro

Chat

• https://github.com/FaridSafi/react-native-gifted-chat

Map

• https://github.com/airbnb/react-native-maps

Share

• https://github.com/EstebanFuentealba/react-native-share

Others:

• Router: https://github.com/jmurzy/react-router-native
• Debugger https://github.com/jhen0409/react-native-debugger

TabView

• https://github.com/skv-headless/react-native-scrollable-tab-view

Offline

• https://github.com/jevakallio/redux-offline

Awesome React Native and UI

• https://github.com/jondot/awesome-react-native
• https://github.com/madhavanmalolan/awesome-reactnative-ui

Tips:

• WebView Height: https://facebook.github.io/react-native/docs/dimensions.html set WebView height to Dimensions.get('window').height
• Config, react-native-dotenv, https://github.com/zetachang/react-native-dotenv

中文

• http://reactnative.cn/
• http://manongs.com/a/lmqLEh
• http://ithelp.ithome.com.tw/users/20103341/ironman/1023

TODO

• learn boilerplate https://github.com/jhen0409/react-native-boilerplate
• learn ignite https://github.com/infinitered/ignite

Launch Screen

• http://stackoverflow.com/questions/34027270/ios-launch-screen-in-react-native $ npm install -g yo generator-rn-toolbox $ brew install imagemagick $ yo rn-toolbox:assets --splash YOUR_SQUARE_IMAGE.png --ios :w

TimeLine

• https://github.com/thegamenicorus/react-native-timeline-listview

FastImage

• https://github.com/DylanVann/react-native-fast-image

Input Prompt

• https://github.com/SkrewEverything/react-native-input-prompt

WeChat

• https://github.com/yorkie/react-native-wechat

i18n

• https://github.com/fnando/i18n-js

Keychain

• https://github.com/oblador/react-native-keychain

react-native-localize

• https://github.com/react-native-community/react-native-localize

react-native-splash-screen

• https://github.com/react-native-community/react-native-localize

react-native-hooks

• https://github.com/react-native-community/react-native-hooks

Template

• https://expo.io/
• https://github.com/react-community/create-react-native-app
• https://github.com/infinitered/ignite
• https://nativebase.io/

react-native-git-upgrade tips

• keep current node_modules match old/current react-native version
• update .babelrc for new version sample
• update rn-cli.config.js if it exists
• react-native-git-upgrade
• ncu -ua

render html

• https://github.com/meliorence/react-native-render-html

html parser use axios + cheerio

• https://github.com/cheeriojs/cheerio

  $ npm i cheerio@0.22.0 $ npm i events stream buffer

裁圖器

• https://github.com/vemarav/react-native-avatar-crop

圖片編輯

• https://github.com/baronha/react-native-photo-editor

偵測有無螢幕快照

• https://github.com/AzizAK/react-native-detector

iOS/Android 共用 iOS 類似的選單, selector

• https://github.com/aelesia/react-native-cross-actionsheet
• https://github.com/sosog/react-native-dynamically-selected-picker

DateTime Picker

• https://github.com/thespacemanatee/react-native-material-datetime-picker

Event Listener

• https://github.com/meinto/react-native-event-listeners

QR Code

• https://github.com/awesomejerry/react-native-qrcode-svg

浮動視窗/跨頁面 component

• https://github.com/magicismight/react-native-root-siblings

Admob

• https://github.com/sbugert/react-native-admob

iOS 背景播放

• https://www.jianshu.com/p/ca6dc155f485

Use RAM as Xcode build disk

• https://github.com/ikiapps/Setup-Xcode-Derived-Data-RAM-Disk

GeoLocation

• 注意，如果沒有處理好，會導致 Android crash
• android need set playServicesVersion
• https://github.com/react-native-community/react-native-geolocation
• https://developers.google.com/android/guides/releases

文章

• FlatList 效能優化：https://codingislove.com/optimize-react-native-flatlist-performance/
• FlatList 範例：https://www.hadev.fr/blog/react-native-flatlist-real-world-use-cases-tutorial-A9KeA_fqr
• 多國語言：https://www.instamobile.io/mobile-development/react-native-localization/
• 使用 hook 提高效能：https://dev.to/ltsharma24/performance-optimisation-react-native-with-hooks-a77

---

Mac

選單 bar

• https://github.com/ospfranco/react-native-macos-menubar-template