[RN] react-native-root-toast 라이브러리로 gif 넣어 커스텀 Toast 만드는 법

라이브러리 공식문서

https://www.npmjs.com/package/react-native-root-toast?activeTab=readme

react-native-root-toast

기본 사용법에서 텍스트 넣는 자리에 컴포넌트 바로 넣으면 됨!

import Button from "@/components/common/Button";
import React from "react";
import { Image, Text, View } from "react-native";
import Toast from "react-native-root-toast";

export default function HomeScreen() {
  const showToastWithImage = () => {
    Toast.show(
      <View
        style={{ 
        flexDirection: "row", 
        alignItems: "center", 
        backgroundColor: "white", 
        padding: 10, 
        borderRadius: 5 }}
      >
        <Image 
        source={require("@/assets/images/img.gif")} 
        style={{ width: 50, height: 50, marginRight: 10 }} 
        />
        <Text>This is a toast with a GIF!</Text>
      </View>,
      {
        duration: Toast.durations.LONG,
        position: Toast.positions.BOTTOM,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0,
      },
    );
  };

  return <Button text="Toast with GIF" onPress={showToastWithImage} />;
}