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

1. Create a new expo project with expo init command.
2. Install react-native-modals library yarn add react-native-modals
3. Install react-native-root-toast library yarn add react-native-root-toast
4. Run the app using expo start
5. 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;

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

Expected Behavior

1. Toaster should be displayed when Show Toaster button tapped
2. Modal window should appear when Show Modal button tapped

Actual Behavior

1. Modal did not show up.
2. 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";

1. Then the modal showed up and toaster wasn’t.

Reproducible Demo

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

[sunnylqm]

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

[aliwaqar981]

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?