프론트엔드/RN

RN(React-Native) 모달 안에 토스트 띄우기

순코딩 2025. 9. 13. 20:29

모달 밖에서도 한번, 모달 내부에서도 한번 호출해주면 댐

이유는 RN의 <Modal/>이 <View/> 위에 위치하기 때문이라고 하심

 

예시코드

// App.jsx
import { Modal } from 'react-native'
import Toast from 'react-native-toast-message'

export function App(props) {
  const [isModalVisible, setIsModalVisible] = React.useState(false);

  return (
    <>
      {/* ... */}
      <Toast />
      <Modal visible={isModalVisible}>
+        <Toast />
      </Modal>
    </>
  );
}

 

참고자료

https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/modal-usage.md

 

react-native-toast-message/docs/modal-usage.md at e2db539be40ab3caeef8de3725d5017474f71679 · calintamas/react-native-toast-mess

Animated toast message component for React Native. Contribute to calintamas/react-native-toast-message development by creating an account on GitHub.

github.com