<Select /> renders below modals on iOS

[FezVrasta]

Before reporting this bug, please...

1. Check the latest documentation: https://docs.nativebase.io/
2. Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
3. Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
4. Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
5. For discussion purpose make use of NativeBase discord: https://discord.gg/TSgCw2UPmb

Describe the bug

If I click to open a <Select /> rendered inside an iOS modal, the select is rendered below the modal.

To Reproduce Steps to reproduce the behaviour:

As description.

Expected behaviour

The Select should float above the modal.

CodeSandBox/Snack link

Screenshots

Platform

• NativeBase version [e.g. 3.0.1] latest
• Device: [e.g. iPhone6] any
• OS: [e.g. iOS8.1] iOS 15
• Browser [e.g. stock browser, safari] N/A
• Browser version [e.g. 22] N/A
• React Native version [e.g. sdk-42]
• Expo sdk version [e.g. 41] 42
• node [e.g. 14.16.1] 14.17.4
• yarn or npm [e.g. 6.1] Yarn 3.0.2

Additional information

1. Add any other context about the problem here.
2. Is the bug present in both iOS and Android or in any one of them?
3. If you want your issue to be looked at quicker, please attach a snack reproducible with your issue. Makes it easier for us!

[intergalacticspacehighway]

@FezVrasta are you using Modal component from NativeBase? React Native's built in modal always appears on top of any View. Let us know if the Modal from NativeBase works as expected.

[FezVrasta]

I'm using the one from React navigation, I suppose it's the Native one. I'll try with yours

[intergalacticspacehighway]

Okay sure, with React Navigation can you try putting the NativeBaseProvider above the NavigationContainer?

[cruzlutor]

Hey everyone, I have the same issue, even after move NavigationContainer into NativeBaseProvider

<NativeBaseProvider>
  <NavigationContainer>
    ...
  </NavigationContainer>
</NativeBaseProvider>

But I got the same result FezVrasta mentioned

[intergalacticspacehighway]

@cruzlutor are you using native StackNavigator?

[cruzlutor]

Yes, I'm using NativeStackNavigator instead StackNavigator, However, after the switch to StackNavigator it made the trick. Do you know why StackNavigator works and NativeStackNavigator doesn't?

[intergalacticspacehighway]

The Modal components in NativeBase uses a JavaScript portal implementation and it doesn't render on top of the Native Stack Navigator screens. We're actively looking into this issue. I'll update once we come up with a solution. Current hacky solution to make it work would be to wrap each screen with a NativeBaseProvider.

[rananajam1]

Any updates on this? Or any workarounds I can try?

[OneHatRepo]

I'm running into this too.

[eneax]

I had the same issue while using Select and Popover (NativeBase v3.2.2). The only solution that worked for me was to replace @react-navigation/native-stack with @react-navigation/stack.

[stale[bot]]

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.

[FezVrasta]

Don't close this issue. This is an automatic message by Fresh - a bot against stale bots.

[mchambaud]

I have the same issue, using 3.3.5

[surajahmed]

The issue occurs due to multiple overlay components. We're working on it. Hope to fix this in the coming release.

[mcatal]

I have the same issue, using 3.3.7

[sjonchhe]

i am having the same issue with 3.2.2

[mcatal]

still same 3.4.1

[surajahmed]

We're working on this. Hope to fix this in the coming release. Thanks for your patience.

[uschtwill]

Would be helpful to mention this restriction in the docs for the time being. Would have saved me an hour or so. Probably the same for others.

[asurion-ashutosh]

ANy update on this yet i am still facing same issue>

[GunturThunder]

any update ??

[matheussss1]

Any update? same issue

[surajahmed]

We've been working on some workaround. This issue is coming from our internal Overlay component. We've to change our component render pattern to solve this issue. This may take some time.

Thanks for your patience.

[cguagenti]

Thanks @surajahmed.

Same here. any suggestion or workaround for the time being?

[olamigokayphils]

FIX: upgrade to version 3.4.6 (or higher)

Replace import { Modal } from "react-native";
with import { Modal } from 'native-base';

Select should now render above modal on iOS. https://docs.nativebase.io/select

[byberkan]

this is still happening and I am on 3.4.20 Is any one else still having this? or can you guys confirm at least if this is working for you now? I have spent days on this and planning to completely take off the nativebase unfortunately.

[rileyy29]

@byberkan I managed to get it working when using the "presentation" prop for Stack Navigator Screen Options but couldn't get it working for general purposes (it seemed very on-off and sometimes it would work). In the end, we changed the design to get around this.

Edit: You need to be on 3.4.6

[mcanikhilprajapati]

FIX: upgrade to version 3.4.6 (or higher)

Replace import { Modal } from "react-native"; with import { Modal } from 'native-base';

Select should now render above modal on iOS. https://docs.nativebase.io/select

this is working perfectly

Thanks @olamigokayphils

[habaieba]

Hi, same probleme here. When using createNativeStackNavigator (react-navigation ) and having one of my screen with presentation option prop set to "modal", the select displays behind the screen modal.

[eblancperso]

Hi, same probleme here. When using createNativeStackNavigator (react-navigation ) and having one of my screen with presentation option prop set to "modal", the select displays behind the screen modal.

Does this solve your issue? It solved mine which was kind of the same as yours: https://github.com/GeekyAnts/NativeBase/issues/4864#issuecomment-1240632661