npm: react-native-toast-notifications

해당 문서에서 제공하는 라이브러리를 사용해보고 해당 내용에 대해 작성해본다.

개요

사용자가 특정 버튼을 눌렀을 때, 안내해주는 팝업을 띄우고 싶었다.

react native에서 자체적으로 제공하는 Toast를 쓰기엔 그 내용이 너무 한정적이어서

내 마음대로 커스텀 할 수 있는 라이브러리를 찾아보았다.

1. 라이브러리 설치 및 세팅

1) 라이브러리 사용을 위해 프로젝트 터미널에 다음과 같은 내용을 입력해준다

• npm의 경우 npm install react-native-toast-notifications
  
• yarn의 경우 yarn add react-native-toast-notifications
  

2) ToastProvider로 래핑

상위 파일(App.js)에 다음을 import 한다.

import { ToastProvider } from "react-native-toast-notifications"; // Toast 라이브러리

그 다음, 내부 파일을 로 감싸준다.

3) import

토스트 메세지를 사용할 컴포넌트에 다음을 import하면 사용할 수 있다.

import { useToast } from "react-native-toast-notifications";

2. 사용해보기

import { useToast } from "react-native-toast-notifications";

const Component = () => {
  const toast = useToast();

  useEffect(() => {
    toast.show("Hello World");
  }, []);
};

공식 페이지에 보면 사용 방법은 다음과 같이 나와있다.

import를 통해 사용할 수 있도록 불러와 변수에 저장한 후 필요 시 불러와서 사용하면 되는 듯 하다.

주요 속성

const toast = useToast();
 const showToast = () => {
    toast.show('Hello World!', {
      type: 'success',
      duration: 3000,
      position: 'top',
      animationType: 'slide-in',
    });
  };

1) message (필수)

• 표시할 메시지 문자열

2) type (선택):

• 메세지 창의 유형을 선택
  • normal | success | warning | danger | custom
    • 각 유형 별로 다른 형식의 메세지 출력
    • custom의 경우 직접 설정할 수 있음

3) duration (선택)

• 메세지가 표시되는 시간을 설정
• 기본 값: 4000

4) position (선택)

• 메세지가 표시되는 위치를 설정
  • top | bottom

5) animationType (선택)

• 메세지 창 출력 시 애니메이션 효과
  • slide-in | zoom-in

6) data (선택)

• custom 타입일 경우 해당 옵션을 통해 메세지 창을 design 가능

다음과 같은 옵션을 통해 라이브러리가 사용 가능하다.

더 자세한 사항은 공식 문서를 참고하면 좋을 거 같다!

---

개인적으론 전달할 내용이 적은 경우 기본 Toast를 사용하고,

길어질 경우 해당 라이브러리를 쓰면 될 거 같다.

상호작용의 경우는 Toast보단 >>모달<<로 진행하는 편이 좋을듯…?