Show Toast above Modals

Great library. A feature I require, and I think many will too, is that the Toast can show above RN modals.

The use case is to have a single instance of the Toast component in the app, that is then shown via the Toast.show command. If I open a modal and while that modal is still open I show a toast, it currently opens behind the modal mask. Playing around with zIndex and similar hacks doesn’t change much as RN Modal is a native component and opens above the rest of the app.

Adding the Toast to the content of the modal allowed the toast to be in the forefront, i.e. it is not hidden behind the modal, however, it cannot go outside of the bounds of the modal content. Playing around with negative margin or absolute/relative positioning did not help as the toast then doesn’t display at all when in the mask area of the modal.

You can find a minimal demo here

[tones31]

Yes, there is a simple solution. Any full screen modal should instead simply be a screen. There’s not really any reason that a modal should be the entire size of your screen. That is a screen. Modals should only be used for “mini” screens. In fact a modal and a toast are not much different. Anyway, if you take this philosophy (took me about 10 mins of refactoring my modals to screens) you can avoid this issue that I don’t think will ever be “fixed”.

[maximewim]

@McSam94 https://github.com/calintamas/react-native-toast-message#how-to-show-the-toast-inside-a-modal

Hi. I trying this solution provided by you in the documentation but it doesn’t seem to work. The toast doesn’t show at all. Not even behind the modal.

export default function FullScreenModal({
  title,
  isOpen,
  onClose,
  nextButton,
  keyboardShouldPersistTaps,
  children,
  leftIcon,
  handleLeftIcon,
}) {
  const modalToastRef = useRef();
  return (
    <View style={styles.centeredView}>
    <Modal
      animationType="slide"
      transparent={true}
      visible={isOpen}
      onRequestClose={onClose}>
      <Toast ref={modalToastRef} />
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.children}
            keyboardShouldPersistTaps={keyboardShouldPersistTaps || 'never'}>
            <SafeAreaView style={styles.safeAreaViewContainer}>
              <Header
                options={{
                  title: title,
                  rightIcon: (
                    <X
                      stroke={colors.white}
                      fill={colors.primary}
                      width={30}
                      height={30}
                    />
                  ),
                  handleRightIcon: onClose,
                  leftIcon,
                  handleLeftIcon,
                }}
              />
              <View>{children}</View>
            </SafeAreaView>
          </ScrollView>
        </View>
      </View>
      <Button
        value="Toast"
        onPress={() => {
          modalToastRef.current.show({
            text1: 'Hello',
            text2: 'This is some something 👋',
          });
        }}
        style={styles.btnContainer}
      />
      <LinearGradient
        gradientOptions={{
          gradient: {start: 'rgba(0,0,0,1)', end: 'rgba(0,0,0,0)'},
          direction: {start: {x: 1, y: 1}, end: {x: 1, y: 0}},
        }}
        style={styles.shadow}
      />
    </Modal>
    </View>
  );
}

Please reply ASAP

For me, it only work if I place the Toast component after the content of my modal.

For instance, this will work :

<Modal>
  <MyContent>
  </MyContent>
  <Toast/>
</Modal> 

and this not :

<Modal>
  <Toast/>
  <MyContent>
  </MyContent>
</Modal>