react-native toast 사용하기 [react-native-toast-message]

react-native 자체에서 제공하는 toast가 있지만 안드로이드에 국한되어있고 커스텀하기 어렵기 때문에 직접 만들거나 라이브러리를 쓰는 경우가 많다. 많은 토스트 라이브러리가 있겠지만, react-native-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

 

1. 개발하기 전에, 전역에 토스트가 있고, 페이지에 토스트가 있으면 토스트가 두 번 뜨는 것을 볼 수 있다. 따라서 토스트를 일부만 사용할 것이라면 페이지에, 전역으로 띄워줄 생각이라면 전역에 쓰자.

 

나는 통신 에러 메시지 문구를 토스트로 띄워줄 생각이었기 때문에 전역으로 개발하였다.

 

2. 문서에 따르면 <Toast> 컴포넌트는 계층 구조의 LAST CHILD에 삽입하라고 한다.

// App.jsx
import Toast from 'react-native-toast-message';

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

전역으로 할 생각이라면, Root에 토스트 컴포넌트를 삽입한다. (App.tsx 등)

Redux를 사용하고 있다면 <Provider> 안에 적당히 삽입하면 좋을 것 같다. (엄밀히 말하면  </Provider> 바로 위)

toastConfig는 4번에서 설명하겠다.

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

const RootStackNavigation = () => {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}>
          <Stack.Screen name="RootTab" component={RootTab} />
        </Stack.Navigator>
      </NavigationContainer>
      <Toast config={toastConfig} /> <------ 이렇게!
    </>
  );
};

 

3. 그런 뒤에 'showToast'를 토스트를 콜백한다.

// Foo.jsx
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}
    />
  )
}

 

4. 커스텀 방법

4-1. toastConfig : 기능이 싹 제외된 스타일을 위한 커스텀만 하는 곳입니다. selectedToast 등 해당 스타일을 가진 토스트 이름을 지어줄 수 있습니다.

 

4-2. showToast : 콜백함수입니다. 토스트에 대한 각종 기능을 여기서 정합니다. 

type: toastConfig에서 정해준 토스트 이름을 사용합니다.

props: 동적인 prop이 있을 경우 여기로 넘겨줍니다.

position: 토스트가 띄워지는 위치입니다

visibilityTime: 얼마간 노출되고 사라질지 정합니다.

onHide: 토스트가 사라지고 콜백함수가 실행됩니다.

그외 다양한 기능이 있습니다

https://github.com/calintamas/react-native-toast-message/blob/main/docs/api.md

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

export const toastConfig = {
  selectedToast: ({props}: IProps) => (
    <ToastView>
      <ToastContent>{props}</ToastContent>
    </ToastView>
  ),
};

export const showToast = (text: string, dispatch: any) => {
  Toast.show({
    type: 'selectedToast',
    props: text,
    position: 'bottom',
    visibilityTime: 2000,
    onHide: async () => {
      if (
        !text.includes('네트워크 연결이 원활하지 않습니다') &&
      ) {
        dispatch(setIsLogout());
      }
    },
  });
};