[React Native] Expo Toast 사용하기

Toast라는 기능은 원래 Android 에서 메세지가 잠깐 나타났다가 사라지는 기능을 의미합니다.

하지만 Cross Platform인 RN에서는 두 운영체제 모두에서 작동하는 Toast 모듈을 제공합니다.(외부 모듈이지만요!)

종류가 많이 있지만, react-native-root-toast 모듈이 사용하기 편해보여서 사용해봅니다.

---

NPM Site

• https://www.npmjs.com/package/react-native-root-toast

설치

npm i react-native-root-toast

기본 설정

import { RootSiblingParent } from "react-native-root-siblings";

<RootSiblingParent>
   <App>
      {children}
   </App>
</RootSiblingParent>

사용법

• 위와 같이 전체 App을 감싸는 RootSiblingParent를 설정하고 나면, 다른 페이지에서는 그저.. 호출만 하면 됩니다.

import Toast from "react-native-root-toast";

// Message 표시하고 3초 후 사라짐
const toast = Toast.show('이 메세지가 나타남');

setTimeout(function () {
      Toast.hide(toast);
    }, 3000);

요즘은 참 모듈들이 잘 되어 있어서 개발하기 참 편합니다..!!