RN - Project 에서 활용한 라이브러리

이번 '우동피플' 앱 개발하면서

활용한 library 모음입니다.

 

react native 는 개발도 개발이지만

괜찮은 library 발굴해다가

살을 입히는 재미도 있는 것 같습니다 :)

  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/checkbox": "^0.5.6",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/google-signin": "^5.0.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-firebase/app": "^8.4.7",
    "@react-native-firebase/auth": "^9.3.2",
    "@react-native-firebase/database": "^7.5.13",
    "@react-native-picker/picker": "^1.9.2",
    "@react-navigation/bottom-tabs": "^5.10.2",
    "@react-navigation/native": "^5.8.2",
    "@react-navigation/stack": "^5.11.1",
    "firebase": "^8.0.0",
    "moment": "^2.29.1",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-dialog-input": "^1.0.8",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-git-upgrade": "^0.2.7",
    "react-native-mail": "^6.0.0",
    "react-native-nmap": "0.0.54",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.12.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-toast-message": "^1.3.4",
    "react-native-vector-icons": "^7.1.0",
    "react-native-webview": "^11.0.0"
  },

    "@react-native-community/async-storage": "^1.12.1",

: 아주 간단하게 string 타입 data 를 read/write 할 수 있는 native library.

user 의 지역, login 여부 등등을 save 했다가, app 실행 시 활용.

android 로 치면, sharedPreference 같은개념.

    "react-native-nmap": "0.0.54",
    "@react-native-firebase/app": "^8.4.7",
    "@react-native-firebase/auth": "^9.3.2",
    "@react-native-firebase/database": "^7.5.13",
    "firebase": "^8.0.0", 

: 이번 프로젝트에서 core 는 naver map과 firebase 였습니다.

구글 맵뷰 보다는 NMapView 가 고퀄이기 때문에

nmap bridge library가 없었다면, 완성도가 많이 떨어졌을 것 같네요.

제가 frontend 만 개발 해봤기 때문에

갓글의 firebase 덕분에 개발속도를 아마도 두배는 올릴 수 있지 않았나 합니다 :)

참고로 아래는 naver mapview 연동 방법입니다.  (QuadFlask/ 님 감사요)

yannichoongs.tistory.com/162?category=802704

RN (React Native) - 네이버지도 연동

 

 

  "@react-native-picker/picker": "^1.9.2",     "react-native-app-intro-slider": "^4.0.4"

IOS와 Android 의 가장 기본적인 picker Bridge 인것 같습니다.

그리고, intro-slider 는 App 최초 실행 시 'App Guide' 화면으로 활용.

 

 

 

    "react-native-dialog-input": "^1.0.8",    "react-native-gifted-chat": "^0.16.3",

rn 기본 alert UI가 디자인도 별로고 별 기능도 없기 때문에, textInput이 포함된 dialog library를 사용했고

giftedChat 은 rn 에 채팅 기능 넣는다면 대부분 쓰이는 워낙 유명한 library 입니다.

 

 

  "react-native-mail": "^6.0.0",  "react-native-raw-bottom-sheet": "^2.2.0",

email 을 바로 발송할 수 있는 library 와

view click 시 popup 을 깔끔하게 보여주기 위해 찾다 알아낸 raw-bottom-sheet library입니다 

 

 

 

    "react-native-splash-screen": "^3.2.0",     "react-native-toast-message": "^1.3.4",

splashscreen 덕분에 금방 launch ui 입힐 수 있었습니다.

yannichoongs.tistory.com/185 에 노하우 추가했으니 참고하세요~

toast 는 ios 용이 따로 없어서, ui가 좀 괜찮아보였던 toast-message 를 활용했는데

stack 이동후에도  toast 가 유지되면 mem leak warning msg가 너무 쉽게 발생합니다.

android toast 처럼 app process는 요청만하고 main ui thread 에서 띄우는 방식을 원했는데 rn 에선 못찾았습니다.

 

 

    "react-native-vector-icons": "^7.1.0",

위 화면의 bottom tab icon 으로, 흔히 쓰이는 library 입니다.

 

마지막으로, 2021 년에 알아야 할 힙한 library 모음 입니다.

제가 사용한 것 중에는 vector-icons 과 gifted-chat 이 있네요 :)

www.codeinwp.com/blog/react-native-component-libraries/

15+ React Native Component Libraries You Should Know in 2021