Show Toast above Modals about react-native-toast-message HOT 11 CLOSED

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".

from react-native-toast-message.

@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> 

from react-native-toast-message.

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

from react-native-toast-message.

here's how it worked for me! ✅ in the above answer the modalToastRef.current.show was throwing error for me, but the below code works.

Now the problem is, my modal covers half the screen, and so the toast is also coming on it from it's top or half of the screen. Is there a way to over come this, and show the toast from the top of full screen ?

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

<Modal>
  <Button
      onPress={() => {
        Toast.show({
          type: 'success',
          text1: 'Toast Message',
          text2: 'This is a success toast!',
          position: 'top',
        });
   }}>
  </Button>
  <Toast ref={(ref) => Toast.setRef(ref)} />
</Modal>

from react-native-toast-message.

Here is my take on the issue.
I've had to create new Toast reference, because I already had one project-wise and default reference assignment from documentation was breaking reference to default project-wise toast, and it didn't work after opening this one.

Basically I am storing toast right under the top of the modal content, and it slides fast from the top. as it is on regular screens, omitting wasting time for animation if modal is more then half screen size.
Also content might change dynamically and toast will always show up as intended.

Hope this helps

const [modalListHeight, setModalListHeight] = useState(0); // tracking modal container size
const modalToast = useRef({} as Toast); // create here new Toast
 ... 
<Modal>
    <View onLayout={(height) => setModalListHeight(height.nativeEvent.layout.height)}>
  ...
    <Toast
      config={config} // here just reusing project's default config, you might not need it
      ref={(ref) => (modalToast.current = ref)}
      style={{
        bottom: modalListHeight,
        zIndex: -1,
       }}
      position={'bottom'}
      bottomOffset={15} // customizing offset from the top of the modal when toast is showing
    />
</Modal>

from react-native-toast-message.

Hi @BrendanVadacoraBell. Unfortunately, this is not possible due to the way Modal is implemented in RN (a view that's above everything else).

from react-native-toast-message.

Hi @calintamas, here is an example of a library that does what I expect, just the customization and API isn't as good as this. Perhaps it will give some insight on how to achieve this functionality.

from react-native-toast-message.

@BrendanVadacoraBell did you found a workaround solution?

from react-native-toast-message.

@calintamas . Thank you for replying. I manage to show the toast box in a modal. However, in ios when the modal slides down to dismiss, the toast container is sticking at the top and following the modal to slide down. Is there any workaround?

from react-native-toast-message.

@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

from react-native-toast-message.

Any solutions?

from react-native-toast-message.