package

@notifee/react-native

→ 알림(notification) 입출력 관련 라이브러리

특정세팅 없이 사용가능

@react-native-clipboard/clipboard

기존 RN 자체 제공 라이브러리가 지원중단하여 반영

클립보드에 데이터를 복사하는 기능을 구현할 때 사용

@react-native-community/netinfo

네트워크 수신여부를 파악하기 위해 반영 한 라이브러리

@react-native-firebase/app @react-native-firebase/messaging

firebase 라이브러리

android 와 ios 별도 세팅 필요 (cocoapod 에서 별도 라이브러리 추가 x pod install 만해주면됨)

@react-navigation/drawer @react-navigation/native @react-navigation/native-stack @react-navigation/stack

앱 페이지 이동관련 라이브러리

의존성 라이브러리가 존재 하므로 특정 라이브러리가 없을때 정상동작 하지않을수 있으므로 세팅 부분을 꼭 정독 할것!

redux

react-redux

redux는 전역 상태관리 라이브러리 중 하나이며 react-redux는 react 환경에서 redux를 사용하게 해주는 라이브러리의 일종이다.

@reduxjs/toolkit

리덕스를 관리하기 편하게 하기위에 root로 묶어서 사용할수 있게 해주는 라이브러리

@shopify/flash-list

가장 빠른 리스트 출력을 제공해주는 라이브러리(많은량의 리스트를 출력 할 때 용이)

@types/react-native-snap-carousel

https://github.com/DefinitelyTyped/DefinitelyTyped

슬라이드 이미지 출력을 위한 라이브러리

@types/react-native-vector-icons

rn 으로 앱개발시 필수적으로 쓰이는 라이브러리

앱에서 쓰이는 많은량의 아이콘을 제공해준다

반영시 별도 android 및 ios 세팅이 필요함 → 문서 정독 요망

의존성 라이브러리가 존재 하므로 특정 라이브러리가 없을때 정상동작 하지않을수 있으므로 세팅 부분을 꼭 정독 할것!

native-base

React Native Paper 와 대비 되는 대표적인 UI 프레임 워크

다양한 Template 제공

react-native-calendars

달력 ui 라이브러리

react-native-dotenv

env 세팅 및 환경변수 적용시 필요한 라이브러리

react-native-exit-app

react native으로 만든 app을 완전이 kill(죽일 때) 디바이스 접근하는 기능을 제공해주는 라이브러리

별도 android 세팅과 ios세팅이 필요하며 현재 android 만 반영 되어 있음

react-native-fast-image

앱에서는 고화질의 사진을 넣어 반영시 화면이 깨지는 현상이 발생 ,

이를 잡아주기 위한 라이브러리

react-native-floating-action

floating-action 아이콘 버튼 기능을 제공해주는 ui 라이브러리

react-native-gesture-handler

rn에 drawer 재스쳐 애니메이션 효과를 제공해주는 라이브러리

애니메이션 효과가 들어있는 라이브러리에 의존성 라이브러리에 필수적인 요소 앱을 생성시 default로 설치 하는것을 추천

react-native-highlight-words

text 하이라이트 처리시 전체요소가 색칠되는것이 아닌 text만 하이라이트 처리할때 반영할 라이브러리

react-native-mmkv

rn에서 사용하는 storage 종류 중에 하나 이며

기존 async storage 보다 빠른 처리 속도를 가짐

C++ 기반언어로 구성이 되어있어 처리속도는 빠름

단점으로는 동기식 처리로 이루어져 기존 원격 디버깅 툴을 사용할수 없다 (filper 사용)

react-native-permissions

핸드폰 알림 ,카메라 접근 ,위치정보 공유 등등… 의 권한 처리를 위한 라이브러리

별도 android 및 ios 세팅이 필요합니다.

react-native-reanimated

기존 rn의 병목현상을 해결하기 위해 나온 라이브러리

기존과 다른 점이 있다면 animation 관련된 작업을 모두 Main Thread에서 실행하고 worklet을 이용하여 JS Thread에 전달하게 된다. 최초 실행 되기 전에 필요한 데이터들은 worklet을 이용하여 필요할 때 쓸 수 있도록 해준다.

https://medium.com/crossplatformkorea/원리와-예제를-통해-react-native-reanimated-v2-입문하기-336e832f6ed6

모션이 있는 라이브러리나 react-native-navigation 라이브러리 등등 필수 라이브러리에 의존성을 들어가는 라이브러리로써 해당 라이브러리도 rn 으로 앱개발시 필수적으로 들어가는 라이브러리 중 하나이다

react-native-reanimated-carousel

이미지 swiper 라이브러리

다양한 이미지 스와이프 기능을 제공하며 별도의 세팅 과정없이 사용가능

react-native-safe-area-context

rn app 구현시 필수 라이브러리중하나 (react native navigation의 의존성 라이브러리)

<SafeAreaProvider initialMetrics={initialWindowMetrics}>
{자식요소}
</SafeAreaProvider>

react-native-screens

다양한 화면 구성 요소의 기본 구현을 제공

NativeStack`, `NativeStackNavigator` 및 `NativeBottomTabNavigator`.

이러한 구성 요소는 각 플랫폼(iOS 및 Android)에 고유한 기본 UI 요소를 사용하여 빌드되는데 이러한

해당 화면 구성의 전환 및 내비게이션 조작이 사용자에게 보다 부드럽고 자연스럽게 보여지도록 도와주는 라이브러리

react-native-splash-screen

우리는 앱을 처음 시작할 때 만나는 화면이 있다.

특정앱의 로고 마크 및 문구가 보이는 화면이 splash 화면이라고 한다.

https://github.com/crazycodeboy/react-native-splash-screen

해당라이브러리는 android 및 ios의 splash 화면의 디자인을 변경할수 있게 도와주는 라이브러리이다.

react-native-sqlite-storage

file db 형식의 sqlite를 react native에서 사용할 수있게 해주는 라이브러리

별도 android 와 Ios 세팅이 필요함!

react-native-svg

svg 형식의 이미지 파일을 인식시켜주는 라이브러리

declare module '*.svg' {
  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>> | ImageSourcePropType;
  export default value;
}

react-native-toast-message

모달 형태의 알림 메시지를 지원해주는 라이브러리

기본UI를 제공해주며 사용자 커스텀이 가능하다.

react-native-track-player

https://react-native-track-player.js.org/docs/basics/installationhttps://react-native-track-player.js.org/docs/basics/installation

사운드 재생 관련 라이브러리

강점으로는 background 관련 기능과 음성을 단건으로 처리하는것이 아닌 리스트로 음성데이터를 주입하여 사용가능

react-native-webview

rn에서 web화면을 호출가능하게 해주는 라이브러리

swr

react-query 와 같이 서버의 대한 통신 및 , 캐싱 , 데이터 업데이트 관련 비동기 작업들을 편리하게 처리 하게 해주는 보조 라이브러리

Screen / Layout / Component 단위의 라이브러리

• React Navigation : Multiple Screen 을 위한 라이브러리
• Multiple Screen 을 지원하기 위한 필수 라이브러리
• wix 에서 만든 react-native-navigation 이라는 대체재도 있긴 하지만, 절대 다수는 react navigation 을 이용해서 진행한다.
• Mobily Stacks : Layout 을 위한 라이브러리
• 정말 나는 이 라이브러리를 사랑한다.
• margin 을 없앨 수 있으며 , flex 와 관련된 설정을 매번 일일히 할 필요가 없어진다.
• react-native-paepr : google material 디자인 가이드에 매우 충실한 컴포넌트 라이브러리

  

• 기본적으로 mobily/stacks 를 Layout 으로, react-native-paper 를 활용하여 디자인 컴포넌트를 설계하는 편이다.
• 2개를 모두 사용가능한 react-native-elements 등이 존재는 하나, 커스터마이징에 배우는 시간을 할애해야하는 점등이 마음에 걸린다.
• 단점이 아예 없는 것은 아니다. 누락된 디자인 컴포넌트가 존재하는데 (예를 들어 skeleton), 이런 것들은 보완을 해 나가야한다.
• 버튼에서 몇몇 추가 설정이 필요하다
• text → marginVertical 이 들어가 있다.
• outlined / contained → contained 쪽에는 border 값이 존재하지를 않는다.
• react-native-vector-icons : RN 에서 icon 을 사용할때는 필수적으로 사용되는 라이브러리
• react-native 에서 icon 을 사용하고자 한다면 이 라이브러리는 필수이다.
• 특히 material-community-icons 에서는 폭넓은 아이콘등을 제공하는데, 이를 모두 반영할 수 있다.
• https://oblador.github.io/react-native-vector-icons/
• 전체 아이콘은 여기서 확인이 가능하다.
• 관련해서 font 설정이 필요한데, 이 글에서 자세히 확인이 가능하다.
• react-native-fast-image : Image Caching 에 도움을 주는 라이브러리
• RN 에서 기본으로 제공하는 Image 에서도 캐싱을 지원을 하나, 느리다.
• 이 라이브러리는 해당 단점을 고쳐준다!

Function (기능) 단위의 라이브러리

• Keyboard-Aware-Scroll-View : Keyboard 와 ScrollView 를 같이 쓰기 위한 라이브러리
• keyboard 가 올라올 때에 focus 등이 자동으로 올라가거나 내려가게 하기 위해선 반드시 필요한 라이브러리
• react-native-mmkv : AsyncStorage 를 성능면에서 압도하는 라이브러리
• AsyncStorage 는 매우 느린 것으로 유명하다.
• 반면 이 라이브러리는 tencent 에서 만든 라이브러리를 확장시켜, 1000배 가까운 월등한 속도를 보여준다.
• react-native-community/hooks : react-native 에서 필요한 다양한 기능들을 hook 으로 제공
• 특히 useBackHandler 와 같은 기능들이 유용하다

Frontend Library

• React Query : 서버 사이드 상태를 저장하기 위한 라이브러리
• 더 말할 필요가 없는 서버 사이드 관리를 위한 라이브러리
• 자세한 튜토리얼은 이 링크에서 확인할 수 있다.
• Recoil : 클라이언트 사이드에서 전역상태를 관리하기 위한 라이브러리
• 이 라이브러리는 flipper 와의 궁합도 잘 맞아, react-native 의 디버깅 능력을 극대화에 도움을 준다.
• babel-plugin-module-resolver : 경로 alais 를 설정하기 위한 라이브러리
• https://velog.io/@shin6403/React-Native-Typescript-절대경로-설정방법
• 절대 경로는 매우 유용하다!
• lodash : 가장 기본적인 전산 연산을 함수형으로
• 이 방안을 이용해야 typescript 에서도 type 이 잡히면서 auto import 가 가능하다.