[Bug] Toast is not working within a Modal

[JLLLinn]

react-native, react and native-base version

RN: 0.45.1
React:16.0.0-alpha.12
native-base: 2.1.5

Expected behaviour

Toast to be shown in react native Modal

Actual behaviour

The toast is not shown in react native Modal

Steps to reproduce (code snippet or screenshot)

Do Toast.show() in a Modal

Is the bug present in both ios and android or in any one of them?

No that I know of. This was working with RN on 0.44 and native-base on a lower version (I can't remember exactly which one, either 2.1.4 or 2.1.3)

[shivrajkumar]

@JLLLinn Check the latest of NativeBase i.e, v2.2.0

[laxgoalie392]

Was this verified that it was fixed? I think I'm experiencing it as well. My issue is that the Modal is covering the Toast so it isn't visible.

I'm on RN 0.46.4 and native base 2.2.1 and using the ios emulator.

Thanks!

[vovanmozg]

Same problem. I'm on RN 0.46.1 and native base 2.2.1 and using the ios emulator.

[mdebo]

Exactly the same problem using RN 0.47 and NativeBase 2.2.1.
Any news about it?
thanks!

[gianpaj]

The Toast still appears behind the Modal (from React Native):

the code is basically this:

import React from 'react';
import {
  Modal,
  Toast,
  Text,
  View,
} from 'react-native';

export default class LoginScreen extends React.Component<Props, State> {
  state = {
    modalVisible: false,
  }

  onResetPassword() {
    Toast.show({
      text: message,
      duration: 2000,
      position: "top",
      textStyle: { textAlign: "center" },
    });
  }    

  render() {
    return (
      <View>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          >
          <View>...</View>
        </Modal>
      </View>
    )
  }
}

Any suggestions?

I see there's something called zIndex as Layout Props - React Native

Using:

$ yarn list --depth=0 | grep 'native-base@\| react-native@'
├─ [email protected]
├─ [email protected]

Can something be done to the ToastContainer.js?
https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/ToastContainer.js

[SupriyaKalghatgi]

@gianpaj Looks like you are using React-Native-Seed boilerplate. Nice!
We will check this issue

[idrakimuhamad]

I just want to add that I’m having this issue too with v 2.3.3

[gianpaj]

FYI: this issue happens both on Android and iOS

[supercamilo]

Still present on 2.3.5

[gianpaj]

I think I'm just going to use the Toast from ant-design-mobile.

My bad. Ant-Design Toast doesn't work. It also appears under the react-native Modal

[idrakimuhamad]

@gianpaj I'm also using antd-mobile for the datepicker. Perhaps I should take a look at their toast implementation too.

[SupriyaKalghatgi]

@gianpaj What was the purpose of sharing graphs for commit-activity?

[ThomasLabstep]

Any hotfix for now with v2.3.10 ?

[AdrianMrn]

Any chance this will be fixed anytime soon?

[N9vn1njdf]

Сталкивался с этой проблемой недавно, решил следующим способом. Просто добавляем в Modal элемент Root, а в него весь контент который вам нужен

P.S. на английский переводить лень, главное ведь код

translation : Faced this problem recently, I decided in the following way. Just add the Root element to the Modal, and all the content you need is in it

import { Root, Container, Content } from 'native-base';

<Modal>
    <Root>
        <Container>
             <Content>
                  // .. modal content with toast
             </Content>
        </Container>
    </Root>
</Modal>

[doreentseng]

@Zeratyll Hey! It doesn't work for me at all, the toast still appears behind the Modal.

[michaellee8]

@doreentseng Tried @Zeratyll 's solution of putting <Root/> into <Modal/>, but it still didn't work.
@gianpaj Also tried to put style : { zIndex: 1000 } into Toast.show(), no effect as well.
All of the results are tested in a real iPad.
Tried Modal component from both original react-native and react-native-community, both of them didn't work. Will native-base provide its own modal component?
@SupriyaKalghatgi @shivrajkumar Dear collaborators, when can we get an fix?

[akhil-ga]

checked this issue after merging PR #1700. Placing Root inside a modal component as suggested by @Zeratyll #985 (comment) is working after merging. See attached Gif.

Sample code

import React from 'react';
import { Modal } from "react-native";
import { createStackNavigator } from 'react-navigation';
import { Root, Container, Text, Header, Left, Body, Right, Title, Content, Button, Toast } from 'native-base';

class HomeScreen extends React.Component {

  state = { modalVisible: false }

  render() {
    return (
      <Container>
        <Header>
          <Left />
          <Body>
            <Title>Home screen</Title>
          </Body>
          <Right />
        </Header>

        <Content>
          <Button onPress={() => this.setState({ modalVisible: !this.state.modalVisible })} style={{ margin: 20 }}>
            <Text>Show modal</Text>
          </Button>
        </Content>

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}>
          <Root>
            <Container style={{ padding: 20 }}>
              <Button style={{ margin: 20 }} onPress={() => Toast.show({
                text: 'Wrong password!',
                buttonText: 'Okay'
              })}>
                <Text>Show toast</Text>
              </Button>
              <Button style={{ margin: 20 }} onPress={() => this.setState({ modalVisible: !this.state.modalVisible })}>
                <Text>Hide modal</Text>
              </Button>
            </Container>
          </Root>
        </Modal>
      </Container>
    );
  }
}

const App = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
}, {
    navigationOptions: {
      header: null
    }
  });

export default () => <Root>
  <App />
</Root>

Gif

Edit : As @gianpaj pointed out this may not be a viable option. Please see the below comment.

[gianpaj]

Placing Root inside a modal component as suggested ... is working fine
@akhil-geekyants

This is not ideal or neither practical.

The state of Modal(s) should not be at the Root of an application. It should be where the Modal needs to appear, i.e. inside a screen/component/container.

If we had to do the way you suggest, the state of the Modal needs to pass down all the way to the Component in need (via props or in order ways).

I have to say this is not a viable option for any decent size application.

I don't know at the moment how to solve this, but pretty sure that's not it. Happy to be corrected if I'm wrong.

[akhil-ga]

@gianpaj updated my comment.

[JeremyBradshaw7]

Also having this problem. The Root workaround does work but also has an unwanted side-effect that windowed (non-fullscreen) modals no longer appear vertically centered, and no JSX adjustments appear to help.

[lewisflude]

The above Root fix didn't work for me as I'd like it to, as it completely ruins the vertical centring of the Toast

[Aleksandern]

My workaround for modals.

scene.js

<Scene>
  <ModalComponent />
</Scene>

ModalComponent.js

import Toast from 'mypathto/Toast';
class ModalComponent Component {
  
    showToast() {
        Toast.show({
          text: 'modal toast',
          position: 'bottom',
          duration: 3000
        });
    }

    render() {
        return (
            <Modal>
                <View>
                    <Button onPress={()=>this.showToast()}><Text>Toast<Text></Button>

                    <Toast
                      ref={c => {
                        if (c) Toast.toastInstance = c;
                      }}
                    />

                </View>
            </Modal>
        )
    }
}

mypathto/Toast.js

import {
  Toast as ToastNB,
} from "native-base";

class Toast extends ToastNB {
}

export default Toast;

[amitdninawe]

Adding a blank Toast <Toast /> inside the modal view works. I have tested this in android only. Please give it a shot and let me know

[rs6g10]

Neither <Toast /> nor Root exist as components in version 3.2.2. There aren't any better workarounds for this. Can we get this issue reopened please?

[rs6g10]

Since Root no longer exists, a quick workaround is wrapping the entire Modal content in NativeBaseProvider.

I'm using the following workaround for version 3.2.2 to see toasts in my react-native-modal:

<RNModal
   isVisible={modalVisible}
   deviceWidth={deviceWidth}
   deviceHeight={deviceHeight}
   coverScreen={true}
   style={styles.modal}
    >
      <NativeBaseProvider>
        <View style={styles.modalHeader}>
          <TouchableOpacity
            style={{ marginTop: 48 }}
          >
            <Icon
              name='close'
              as={MaterialCommunityIcons}
              onPress={onClose}
              size={12}
              style={{
                right: 16,
                alignSelf: 'flex-end',
              }}
            />
          </TouchableOpacity>
          <View style={styles.modalBody}>
            {children}
          </View>
        </View>
      </NativeBaseProvider>
</RNModal>

[md-rehman]

I'm reopening this issue, and we'll keep it on high priority.

[Drakeoon]

@md-rehman I would also love this feature to be back, ideally a separate API to configure Toast's root element.

Have you guys started working on it already? I would love to help or take care of that issue, so that we can have it back on our project 💪🏻

[masrurimz]

Since Root no longer exists, a quick workaround is wrapping the entire Modal content in NativeBaseProvider.

I'm using the following workaround for version 3.2.2 to see toasts in my react-native-modal:

<RNModal
   isVisible={modalVisible}
   deviceWidth={deviceWidth}
   deviceHeight={deviceHeight}
   coverScreen={true}
   style={styles.modal}
    >
      <NativeBaseProvider>
        <View style={styles.modalHeader}>
          <TouchableOpacity
            style={{ marginTop: 48 }}
          >
            <Icon
              name='close'
              as={MaterialCommunityIcons}
              onPress={onClose}
              size={12}
              style={{
                right: 16,
                alignSelf: 'flex-end',
              }}
            />
          </TouchableOpacity>
          <View style={styles.modalBody}>
            {children}
          </View>
        </View>
      </NativeBaseProvider>
</RNModal>

Could you provide example to customize default theme of native base modal, action sheet and other overlay component so, toast will be appeared on the top of it

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Oct4Pie]

I have the same issue. The toast doesn’t appear on the modal. No solutions yet.

[iooi]

+1

[zzyjiaxinmomo]

is there any solution now?

[Viraj-10]

Hi @zzyjiaxinmomo @iooi @Oct4Pie, Can you provide small snack example ?

[Oct4Pie]

Hi @zzyjiaxinmomo @iooi @Oct4Pie, Can you provide small snack example ?

Hello, @Viraj-10. Here it is:

import React from "react";
import {
  Text,
  HStack,
  Center,
  Switch,
  useColorMode,
  NativeBaseProvider,
  extendTheme,
  VStack,
  Modal,
  Input,
  FormControl,
  Button,
  useToast,
} from "native-base";

const config = {
  useSystemColorMode: false,
  initialColorMode: "dark",
};

export const theme = extendTheme({ config });

export default function App() {
  const [show, setShow] = React.useState(false);
  const toast = useToast();

  return (
    <NativeBaseProvider>
      <Center
        _dark={{ bg: "blueGray.900" }}
        _light={{ bg: "blueGray.50" }}
        px={4}
        flex={1}
      >
        <VStack space='3' >
          <Modal onClose={() => setShow(false)} isOpen={show}>
            <Modal.Content>
              <Modal.CloseButton />
              <Modal.Header>Sign In</Modal.Header>
              <Modal.Body>
                Please enter your credentials to proceed
                <FormControl mt={{
                  'base': '3',
                  'lg': '4',
                  '2xl': '5',
                }}>
                  <FormControl.Label>Email</FormControl.Label>
                  <Input />
                </FormControl>
                <FormControl mt={{
                  'base': '3',
                  'lg': '4',
                  '2xl': '5',
                }}>
                  <FormControl.Label>Password</FormControl.Label>
                  <Input />
                </FormControl>
              </Modal.Body>
              <Modal.Footer>
                <Button onPress={() => {
                  toast.show({
                    // variant: "solid",
                    description: "You are signed in!",
                  })
                  // setShow(false);
                }}>
                  Sign In
                </Button>
              </Modal.Footer>
            </Modal.Content>
          </Modal>
          <VStack space={8} alignItems="center">
            <Button w="104" onPress={() => {
              setShow(!show);
            }}>
              Sign In Modal
            </Button>
          </VStack>
          <ToggleDarkMode />
        </VStack>
        <SignInModal />

      </Center>
    </NativeBaseProvider>
  );
}

const SignInModal = () => {
  const [show, setShow] = React.useState(false);
  const toast = useToast();
  return <VStack space='3' >

    <Modal onClose={() => setShow(false)} isOpen={show}>
      <Modal.Content>
        <Modal.CloseButton />
        <Modal.Header>Sign In</Modal.Header>
        <Modal.Body>
          Please enter your credentials to proceed
          <FormControl mt={{
            'base': '3',
            'lg': '4',
            '2xl': '5',
          }}>
            <FormControl.Label>Email</FormControl.Label>
            <Input />
          </FormControl>
          <FormControl mt={{
            'base': '3',
            'lg': '4',
            '2xl': '5',
          }}>
            <FormControl.Label>Password</FormControl.Label>
            <Input />
          </FormControl>
        </Modal.Body>
        <Modal.Footer>
          <Button onPress={() => {
            toast.show({
              variant: "solid",
              description: "You are signed in!",
            })
            // setShow(false);
          }}>
            Sign In
          </Button>
        </Modal.Footer>
      </Modal.Content>
    </Modal>
    <VStack space={8} alignItems="center">
      <Button onPress={() => {
        setShow(!show);
      }}>
        Sign In Modal (component)
      </Button>
    </VStack>
  </VStack>;
}

function ToggleDarkMode() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <HStack space={2} alignItems="center">
      <Text>Dark</Text>
      <Switch
        isChecked={colorMode === "light"}
        onToggle={toggleColorMode}
        aria-label={
          colorMode === "light" ? "switch to dark mode" : "switch to light mode"
        }
      />
      <Text>Light</Text>
    </HStack>
  );
}

As you can see, useToast does not work in the default App function. I need the modal to be in App since the state variables must be passed to other screens. I couldn't find a way to solve this issue and wrote a similar component to toast, but it's not as efficient.

[Viraj-10]

Hi All, Let me explain what's going on internally.
On Android, we use RN Modal and on IOS we use Overlay Component which is View with absoluteFill Styling.
Since IOS doesn't support multiple Modal we have to render an Overlay.
Now, whenever you render RN modal on android it mounts on top of the application but toast is again an overlay. So it renders below RN Modal.
Solution
Complete remove RN Modal and use Overlay instead. (Difficulties Accessibility).

[danimayfield]

Is there any solution to this yet?

[bilalalbkre]

that solution worked in my case
https://github.com/calintamas/react-native-toast-message/blob/main/docs/modal-usage.md
just add "Toast" tag inside the Modal component

[sturmenta]

I've been struggling with this for a while and found a pretty acceptable solution! 🥳

• examining how the Toast component receives its properties, I found that the component could receive a property called _overlay

And the Overlay component receive a style prop

• so using the customize style documentation the component can receive styles passed inside _overlay.

const theme = extendTheme({
 {...}
  components: {
    Toast: {
      defaultProps: {
        _overlay: { style: { zIndex: 999 } }
      }
    }
  }
});

then, by passing a high zIndex, the toast is displayed above the Modal! 🎉

---

note: using Modal & Toast both from native-base v3.4.23

[astaninivan1]

"useRNModalOnAndroid: false", default for component "Modal" helped

const theme = extendTheme({
  components: {
    Modal: {
      defaultProps: {
        _overlay: {
          useRNModalOnAndroid: false,
        },
      },
    },
  }
});

[sturmenta]

"useRNModalOnAndroid: false", default for component "Modal" helped

const theme = extendTheme({
  components: {
    Modal: {
      defaultProps: {
        _overlay: {
          useRNModalOnAndroid: false,
        },
      },
    },
  }
});

your initial problem was in android or iOS?

[tony95271]

calintamas/react-native-toast-message it is very simple and easy to use.

it's 2023, any updates to fix this bug?

[Aryk]

In short, no...they slowly (and quietly) moved on to another project - https://ui.gluestack.io/

[levon-zakarian]

After trying everything here and with no luck, I still kept struggling with this for a long time, and after checking how Toast works multiple times I've come across a workaround that finally worked for me.

So under the hood it is using useContext and there is a Provider that is also exported in native-base called ToastProvider, and when you use it Inside the Modal it works as expected.

Here's a sample code:

Container.tsx

import { useState } from "react";

// components
import { Button, Center, VStack, useToast } from "native-base";
import ModalToast from "./ModalToast";

const Container = () => {
  const toast = useToast();
  const [isOpen, setIsOpen] = useState(false);

  const closeModal = () => {
    setIsOpen(false);
  };

  const openModal = () => {
    setIsOpen(true);
  };

  const showToast = () => {
    toast.show({ title: "A Regular Toast In App" });
  };

  return (
    <Center flex={1}>
      <VStack space={5}>
        <Button onPress={openModal}>Open Modal</Button>
        <Button onPress={showToast}>Show Outer Toast</Button>
      </VStack>

      <ModalToast isOpen={isOpen} onClose={closeModal} />
    </Center>
  );
};

export default Container;

ModalToast.tsx

import {
  Button,
  Center,
  HStack,
  Modal,
  ToastProvider,
  useToast,
} from "native-base";

const ModalContent = ({ onClose }: { onClose: () => void }) => {
  const toast = useToast();

  const showToast = () => {
    toast.show({ title: "A Toast over the modal" });
  };

  return (
    <Center flex={1}>
      <HStack space={4}>
        <Button onPress={showToast}>Show Toast</Button>
        <Button onPress={onClose}>Close Modal</Button>
      </HStack>
    </Center>
  );
};

interface ModalToastProps {
  isOpen: boolean;
  onClose: () => void;
}

const ModalToast = ({ isOpen, onClose }: ModalToastProps) => (
  <Modal
    isOpen={isOpen}
    animationPreset="slide"
    bg="gray.200"
    onClose={onClose}
    safeAreaBottom
  >
    <ToastProvider>
      <ModalContent onClose={onClose} />
    </ToastProvider>
  </Modal>
);

export default ModalToast;

The only issue is that the App toast still stays under the modal, as the one inside the modal is another provider so it displays whole other Toast.

Screen.Recording.2023-10-16.at.13.35.34.mov

Using both Modal & Toast from native-base v3.4.28

Hope this will be of help.

[jnariai]

A workaround is to set RNModal to false

      <Modal
        _overlay={{
          useRNModal: false,
          useRNModalOnAndroid: false,
        }}
      >

[soemarko]

I mean, realistically, NativeBase is abandoned. I've just moved all Toast to react-native-toast-message. Bit by bit, I'm slowly removing native-base from my project.

I'll never go to gluestack if this how they handle projects. They'll abandon gluestack too as soon as a new shiny thing coming down the line.

[iooi]

Can we get the refund?

[LordAsmodey]

I have my own separate context provider for toasters, which wraps the parts of my application I need. And as I see, everything now works as it should on iOS devices. And for Android, the setup that astaninivan1 suggested helped me.
#985 (comment)
But the fact that the NB has not been updated for a year makes me sad...