react-native-root-toast Toast notification not working along with Modal

🐛 Bug Report

Environment

Expo CLI 3.11.7 environment info: System: OS: Windows 10 Binaries: Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312

Targeted for IOS and Android.

Steps to Reproduce

Create a new expo project with expo init command.
Install react-native-modals library yarn add react-native-modals
Install react-native-root-toast library yarn add react-native-root-toast
Run the app using expo start
Copy and paste below code snippets on App.js

import React, {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Toast from "react-native-root-toast";
import Modal, {ModalContent} from "react-native-modals";


const App = () => {

    const [modalVisibility, setModalVisibility] = useState(false);

    const showToast = () => {
        return (
            Toast.show("I am Toaster", {
                duration: Toast.durations.SHORT,
                position: Toast.positions.CENTER,
                shadow: true,
                animation: true,
                hideOnPress: true,
                containerStyle: {width: '70%',}
            })
        );
    };

    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>Welcome to React Native!</Text>

            <Button onPress={() => {
                showToast({message: 'All good'});
            }} title={"Open Toaster"}/>

            <Text> Separation </Text>

            <Button onPress={() => {
              setModalVisibility(true);
            }} title={"Open Modal"}/>


            <Modal
                visible={modalVisibility}
                onTouchOutside={() => {
                    setModalVisibility(false);
                }}
            >
                <ModalContent>
                    <Text> I'm the model </Text>
                </ModalContent>
            </Modal>
        </View>)
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export default App;

Tap Open Toaster Button (Should work fine)
Tap Open Modal Button (Nothing happens)

Expected Behavior

Toaster should be displayed when Show Toaster button tapped
Modal window should appear when Show Modal button tapped

Actual Behavior

Modal did not show up.
I changed the import order From

import Toast from "react-native-root-toast";
import Modal, {ModalContent} from "react-native-modals";

To

import Modal, {ModalContent} from "react-native-modals";
import Toast from "react-native-root-toast";

Then the modal showed up and toaster wasn't.

Reproducible Demo

Here is the demo. https://github.com/NU-OnE/toasterAndModal

Jan 30 '20 02:01 NU-OnE

In my case Toast is displaying under modal. It's at the bottom of screen not at the bottom of modal. Anybody have solution for this?

Nov 18 '20 14:11 aliwaqar981

Put a < RootSiblingParent >(mount point) in modal https://github.com/magicismight/react-native-root-siblings#for-react-native--062

Nov 18 '20 15:11 sunnylqm

Put a < RootSiblingParent >(mount point) in modal https://github.com/magicismight/react-native-root-siblings#for-react-native--062

Thanks. Fixed my issue

Nov 18 '20 15:11 aliwaqar981

@sunnylqm I'm using BottomSheet from react-native-elements. any solution to show toast in front of bottom sheet?

<BottomSheet>    
  <Animated.View
    style={{
      height: Dimensions.get('window').height,
      backgroundColor: fadeIn.interpolate({
        inputRange: [0, 1],
        outputRange: ['transparent', 'rgba(0,0,0,0.3)'],
      }),
      flexDirection: 'column',
      justifyContent: 'flex-end',
    }}
  >
    <Pressable
      style={{ flex: 1, backgroundColor: 'transparent' }}/>
    <View
      style={{
        height: 340,
        backgroundColor: 'white',
        borderTopRightRadius: 16,
        borderTopLeftRadius: 16,
        paddingTop: 20,
        paddingHorizontal: 17,
        paddingBottom: 32,
      }}
    >
      ....
    </View>
  </Animated.View>
</BottomSheet>`