[React Native][라이브러리 소개] 깔끔하고 쉽게 구현하는 Toast

# react-native-toast-message

- Toast Message는 앱 내에서 사용자들에게 이벤트의 발생과 그 내용을 알려줄 수 있는 직관적인 UI 요소로 많은 앱에서 사용된다. 물론 Toast Message의 구현 난이도 자체는 높지 않기 때문에 직접 구현하는 것도 좋은 방법이지만, Toast Message가 서비스의 핵심 적인 기능은 아니다보니 적당한 라이브러리가 있을 경우 이를 활용하면 시간을 절약할 수 있다.  본 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 한다

 

 

# 깃헙 페이지

 https://github.com/calintamas/react-native-toast-message

GitHub - calintamas/react-native-toast-message: Animated toast message component for React Native

 

 

# 사용방법

- 라이브러리를 설치합니다.

yarn add react-native-toast-message
# or
npm install --save react-native-toast-message

- 그리고 App.tsx에서 아래와 같은 구조로 <Toast />를 추가한다. 강제되는 위치가 있는 것은 아니지만, 적어도 Toast Message가 보여야 하는 컴포넌트보다는 상위 그리고 앞에 추가한다

import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... React Navigation 등 */}
      <Toast />
    </>
  );
}

 

- Toast Message를 보여주는 방법은 아주 간단하다. Toast.show()를 호출해주면 된다. 숨기는 것은 Toast.hide()를 사용하거나 사라질 시간을 지정할 수 있다. Toast Message에 대한 파라미터들은 이 페이지를 확인하자

import Toast from 'react-native-toast-message';
import { Button } from 'react-native'

export function Foo(props) {
  const showToast = () => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }

  return (
    <Button
      title='Show toast'
      onPress={showToast}
    />
  )
}

---