Select ActionSheet within React-Navigation v6 modal is behind modal

[hawekotte]

Description

When using a modal screen in react-navigation v6, the select actionsheet on iOS is behind the modal page.

CodeSandbox/Snack link

https://snack.expo.dev/@keenan_nsg/native-base-select-actionsheet-behind-ios-modal

Steps to reproduce

See the attached snack

NativeBase Version

3.3.10

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

Note: The Expo snack only supports up to SDK 43 so there are some "older" react-navigation components used (as they are the ones recommended for the Expo SDK that the snack runs). Though, I did run the snack with the lates versions and the same issue still occurs. For posterity the newer versions are:

"react-native-screens": "~3.13.1",
"react-native-safe-area-context": "~4.2.4",

[mcatal]

Hi,

Same problem

"native-base": "^3.4.1", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/drawer": "^6.4.1", "@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.1", "@react-navigation/stack": "^6.2.1", "expo": "~44.0.4", "react-native": "0.64.3", . . .

[surajahmed]

@hawekotte @mcatal Thanks for reporting this. This is happening due to a conflicting overlay of Modal and Actionsheet. Hope to fix this in the coming release.

[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.

[jakeeknight]

Is there a fix or workaround for this yet?

Edit: Found a workaround straight after this. Use the native IOS ActionSheet for now.

https://reactnative.dev/docs/actionsheetios

[rileyy29]

@surajahmed Is there any update on this yet?

[dminkovsky]

Encountered the same issue, made my own Snack, only to realize I forgot to search for this problem and sure enough, this has already been reported. Does anyone know any workarounds?

[jonasgroendahl]

having this problem trying to display a <Modal /> inside a modal screen (react navigation) ios

[roadnear]

My workaround while waiting for the fix:

• "native-base": "^3.4.13"
• https://snack.expo.dev/ZeJ7_hzMU

  <Select
    {...yourProps}
    _actionSheet={{
      useRNModal: Platform.OS === 'ios',
    }}>
     <Select.Item label="Item 1" value="1"/>
  </Select>

[su0329]

This saves my life https://github.com/GeekyAnts/NativeBase/issues/4864#issuecomment-1240632661

[francoangulo]

My workaround while waiting for the fix:

• "native-base": "^3.4.13"
• https://snack.expo.dev/ZeJ7_hzMU

  <Select
    {...yourProps}
    _actionSheet={{
      useRNModal: Platform.OS === 'ios',
    }}>
     <Select.Item label="Item 1" value="1"/>
  </Select>

Thanks @roadnear this worked for me