Toast notification not working along with Modal
See original GitHub issue🐛 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:7
- Comments:5
Top Results From Across the Web
ngToast message is displaying behind the modal popup
Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal. Share.
Read more >Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic ...
Read more >Toast Notifications - Salesforce Lightning Component Library
A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also...
Read more >Notifications
Toast notifications without actions can disappear automatically or can be dismissed by user. Toast notifications with actions persist until dismissed by user.
Read more >Display a popup toast
Learn how to create a toast popup in an Expo project. ... Pixel 3a showing toast message in an app. There are many...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Put a
< RootSiblingParent >
(mount point) in modal https://github.com/magicismight/react-native-root-siblings#for-react-native--062In 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?