search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.16k stars 2.39k forks source link

Select ActionSheet within React-Navigation v6 modal is behind modal #4864

Open hawekotte opened 2 years ago

hawekotte commented 2 years ago

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

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 commented 2 years ago

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 commented 2 years ago

@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] commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@surajahmed Is there any update on this yet?

dminkovsky commented 2 years ago

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 commented 2 years ago

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

roadnear commented 2 years ago

My workaround while waiting for the fix:

su0329 commented 1 year ago

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

francoangulo commented 1 year ago

My workaround while waiting for the fix:

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

Thanks @roadnear this worked for me

aashishsingla567 commented 2 months ago

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

what about android ?