question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

  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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:7
  • Comments:5

github_iconTop GitHub Comments

8reactions
sunnylqmcommented, Nov 18, 2020
2reactions
aliwaqar981commented, Nov 18, 2020

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?

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found