Skip to content

Toast appears behind tabs on iOS when using React Navigation TabNavigator #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dannyshisler opened this issue Jul 3, 2017 · 6 comments

Comments

@dannyshisler
Copy link

dannyshisler commented Jul 3, 2017

When using the React Navigation TabNavigator on iOS (https://reactnavigation.org/docs/navigators/tab) the tabs appear at the bottom of the screen. When the Toast appears in the default position of "bottom" the Toast appears behind the tabs.

Changing the zIndex of the Toast style doesn't seem to make any difference.

The only way I've been able to manage this for now is using the positionValue to raise the position of the Toast above the tabs.

@bhagwans
Copy link

bhagwans commented Jul 5, 2017

Same issue for me. I'm using Modal but Toast appears behind the modal. I need that toast to be above the Modal.

@hejunbinlan
Copy link

我也出现同样的问题,Toast提示框出现在了Tabbar下面,Tabbar使用的是react-native-tab-navigator

@amensouissi
Copy link
Contributor

Hello, you can wrap your Nav component like this:

    <View style={{flex: 1, zIndex: 100}}>
      <Toast
        ref={(toast) => {
          this.toast = toast
        }}
      />
      <YourNavRoor />
    </View>

@Sam-Hoult
Copy link

Did anyone get this working?
I can put my toast as high as I'd like, it's still behind the modal

@mahdieh-dev
Copy link

i made a pull request you can check.
hope it help you
pull request #70

@Aryk
Copy link

Aryk commented Jun 5, 2020

Any chance we can get that pull requrest approved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants