[RN] React Native 라이브러리 없이 Toast Message 구성하기

해당 글에서는 React-native에서 라이브러리를 사용하지 않고 Toast Message를 구성하는 방법에 대해 공유합니다.

1) Toast Message

---

💡 Toast Message

- React Native에서 Toast message는 사용자에게 간단한 정보를 제공하거나 경고를 줄 때 사용하는 간단한 팝업 메시지를 의미합니다.

 

 

1. ToastAndroid 모듈을 사용하는 방법

---

 💡 React-native 내에 ‘ToastAndroid’를 이용하여 ToastMessage를 구현하는 방법이 있습니다. 모듈 이름과 같이 Andriod 플랫폼 내에서만 동작을 합니다.

ToastAndroid · React Native

 

 

 

2. 서드파티 라이브러리를 사용하는 방법

---

💡 서드파티 라이브러리를 이용하여서 Toast Message를 구현할 수 있습니다.

react-native-toast-message

 

 

 

3. 모듈 혹은 라이브러리를 사용하지 않는 이유

---

 💡 Toast Message도 커스텀 영역이 존재하고 Andriod, iOS 플랫폼에서 사용이 가능한 형태를 구현하기 위해 ‘컴포넌트’ 형태로 구성하여 불러오는 형태로 구성하였습니다.

 

 

2) 구현하기

---

 

1. ToastScreen.tsx : 구현 부분

---

💡 해당 컴포넌트는 Toast Message를 출력하기 위한 화면을 구현한 컴포넌트입니다.

💡 컴포넌트에서는 필수 파라미터로 총 4개의 파라미터를 받습니다.

- message: Toast 메시지에 출력할 문자열을 받습니다.
- hegith : Toast 메시지의 높이를 받습니다.
- marginBottom : Toast 메시지가 출력되는 위치를 하단 기준의 숫자를 받습니다.
- onClose : Toast 메시지가 출력되고 닫아 줄 수 있는 처리를 위한 함수를 받습니다.


💡 useEffect()

- 해당 컴포넌트가 호출되고 timer를 통해 보일 시간을 4000(4초)으로 지정하였습니다. 4초가 지나면 setTimeOut을 통해서 팝업이 닫히는 처리를 수행합니다. 동시에 Anmated 모듈을 이용하여 애니메이션 효과로 보이도록 처리를 하였습니다.


💡 styels

- StyleSheet를 통하여 Toast 메시지의 css를 position: "absolute", zIndex: 1000000로 지정하여 최상단에 출력이 되도록 구성하였습니다.


💡 화면

- 화면에서는 전달 받은 메시지를 출력하도록 구성하였습니다.

import React, { useState, useEffect, useRef } from 'react';
import { Text, View, Animated, StyleSheet } from 'react-native';

/**
 *  공통 : Toast Message
 * 
 * @param {number} message: Toast 메시지에서 출력할 텍스트
 * @param {number} height : Toast 메시지의 높이
 * @param {number} marginBottom : Toast 메시지의 하단 기준 Margin 
 * @param {() => void} onClose: Toast 메시지의 처리 이후 부모창의 State 값을 초기화 해줍니다.
 * @returns 
 */
const ToastScreen = ({ message, height, marginBottom, onClose }) => {
    const [isToastVisible, setIsToastVisible] = useState(true);
    const fadeAnim = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsToastVisible(false);
            onClose();
        }, 4000);

        Animated
            .timing(fadeAnim, {
                toValue: isToastVisible ? 1 : 0,
                duration: 500,
                useNativeDriver: true
            })
            .start(() => {
                setIsToastVisible(true);
            });
        return () => clearTimeout(timer);
    }, []);

    const styles = StyleSheet.create({
        container: {
            position: "absolute",
            zIndex: 1000000,
            flex: 1,
            alignItems: 'center',
            marginTop: 600,
            width: 328,
            height: height,
            borderRadius: 14,
            marginLeft: 16,
            marginRight: 16,
            marginBottom: marginBottom,
            // backgroundColor: '#4e545e',
            backgroundColor: "rgba(0, 0, 0, 0.7)"
        },
        buttonText: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        toast: {
            position: 'absolute',
            backgroundColor: '#333',
            borderRadius: 25,
            paddingVertical: 10,
            paddingHorizontal: 20,
        },
        toastText: {
            width: 296,
            height: height,
            fontFamily: 'NanumBarunGothic',
            fontSize: 14,
            marginTop: 10,
            marginLeft: 10,
            fontWeight: 'normal',
            fontStyle: 'normal',
            lineHeight: 20,
            letterSpacing: 0,
            textAlign: 'center',
            color: '#ffffff',
        },
    });

    return (
        <>
            {isToastVisible && (
                <Animated.View
                    style={styles.container}
                >
                    <Text style={styles.toastText}>{message}</Text>
                </Animated.View>
            )}
        </>
    );

};

export default ToastScreen;

 

 

2. LoadToastScreen.tsx

---

💡 해당 컴포넌트에서는ToastScreen 컴포넌트를 호출하고 필수 파라미터로 message, height, marginBottom, onClose를 전달합니다. 그리고 Toast 메시지를 열어주는 부분과 닫아주는 부분으로 구성이 되어 있습니다.

import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { TouchableHighlight } from "react-native-gesture-handler";
import ToastScreen from "screens/common/ToastScreen";
import { CommonType } from "types/common/CommonType";

const LoadToastScreen = ({ route, navigation, appState }: CommonType.CommonProps) => {

    const [isShowToast, setIsShowToast] = useState(false);

    useEffect(() => {

    }, [])

    const onPressToast = () => {
        setIsShowToast(true);
    }

    const closeToast = () => setIsShowToast(false)

    return (
        <View>
            <View>
                <Text> Toast Message를 출력하는 부분을 확인합니다.</Text>
                <TouchableHighlight onPress={onPressToast}>
                    <Text>Toast Message</Text>
                </TouchableHighlight>
            </View>

            {
                isShowToast ?
                    <ToastScreen
                        height={40}
                        marginBottom={72}
                        onClose={() => setIsShowToast(false)}
                        message="Toast Message를 테스트 중입니다"
                    />
                    : null
            }
        </View >
    )

}
export default LoadToastScreen;

 

 

3) 결과 화면

---

 

1. 초기 화면

---

 

 

2. 버튼 클릭 이후 Toast 메시지 출력

---

 

 

 

오늘도 감사합니다 😀