React-Native : toast 메세지 구현하기 (react-native-easy-toast)

React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다.

 

Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요

 

React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다.

 

react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다.

 

 

react-native-easy-toast 설치

 

아래와 같이 설치합니다.

 

npm i --save react-native-easy-toast

 

react-native-easy-toast 사용법

 

사용법은 무척 간단합니다.

 

요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다.

 

먼저 Toast에 대한 값을 저장할수 있는 Ref를 useRef를 통해서 만듭니다.

 

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

const App = () => {
  const toastRef = useRef(); // toast ref 생성
}

 

이후에 Toast 컴포넌트를 생성하고 toastRef를 연결시켜 줍니다.

 

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

const App = () => {
  const toastRef = useRef(); // toast ref 생성
  
  return 
  (
    <View>
      <Toast ref={toastRef}
             positionValue={windowHeight * 0.55}
             fadeInDuration={200}
             fadeOutDuration={1000}
             style={{backgroundColor:'rgba(33, 87, 243, 0.5)'}}
      />
    </View>
  )
}

제가 자주 사용하는 주요 속성들은 다음과 같습니다.

 

• positionValue : 화면 하단에서부터 지정된 위치값에 Toast 메세지를 표시하여 줍니다.
• fadeInDuration : Toast메세지가 화면에서 그려질때까지 fadeIn 애니메이션에 대한 총 시간 (ms)
• fadeOutDuration : Toast메세지가 화면에서 사라질때까지 fadeOut 애니메이션에 대한 총 시간 (ms)
  
  

이후 TouchableOpacity와 같은 Button의 onClick이벤트를 사용해서 Toast메세지를 그려주면 됩니다.

 

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

const App = () => {
  const toastRef = useRef(); // toast ref 생성
  
  // Toast 메세지 출력
  const showCopyToast = useCallback(() => {
    toastRef.current.show('주소가 복사되었습니다.');
  }, []);
  
  return 
  (
    <View>
      <TouchableOpacity style={styles.storeAddressCopyTouch} onPress={showCopyToast}>
          <Image style={styles.storeAddressCopyImage} source={require('../assets/ic_copy.png')}></Image>
      </TouchableOpacity>
      <Toast ref={toastRef}
             positionValue={windowHeight * 0.55}
             fadeInDuration={200}
             fadeOutDuration={1000}
             style={{backgroundColor:'rgba(33, 87, 243, 0.5)'}}
      />
    </View>
  )
}

 

 

토스트 테스트

위 영상은 제가 진행하고 있는 프로젝트인데요, 토스트 메세지가 잘 출력되는것을 확인하실수 있습니다. :)

 

 

 

참고

 

리엑트 네이티브 토스트 npm

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