[v4] | [v2] BottomSheetModal is not showing along with React Native Modal

[ursnj]

Bug

BottomSheetModal is not showing along with ReactNativeModal.

I think Modal coming on top of Bottom Sheet, but not sure.

Environment info

Library	Version
@gorhom/bottom-sheet	4.3.2
react-native	0.67.1
react-native-reanimated	2.3.1
react-native-gesture-handler	1.10.3

Steps To Reproduce

Describe what you expected to happen:

Reproducible sample code

[ursnj]

Is this library is bot maintained anymore ???

[Waryen]

React Native Modal is a native view that sit above your react native application therefore the Native modal will hide everything pure JavaScript/TypeScript

Your bottom sheet must be used within a Modal to be shown

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[738]

+1

[arunabhverma]

It will work if you wrap all the content of the modal in <BottomSheetModalProvider>

[iraybi]

It will work if you wrap all the content of the modal in

@arunabhverma Can you explain what you meant?

[arunabhverma]

Let me provide you with some code.

[iraybi]

Let me provide you with some code.

@arunabhverma It'll be a great help if you can do so. Thank you

[arunabhverma]

<Modal {...modalProps}>
  <BottomSheetModalProvider>
    <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
        >
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
          </View>
        </BottomSheetModal>
  </BottomSheetModalProvider>
</Modal>

Try this one

[iraybi]

@arunabhverma

Working now. Thanks! So the solution is

<Modal> <BottomSheetModalProvider> // Your child content goes here </BottomSheetModalProvider> </Modal>

[arunabhverma]

Yes @iraybi

[iraybi]

@arunabhverma , but now the gesture or modal closing behavior is not working anymore. Once opened, the bottomsheet stucks

[arunabhverma]

Could you please provide me your code? I will look into it.

[sarthakmeta]

@arunabhverma, I am using the same concept but, close on swipe not working not able to close.

[arunabhverma]

@sarthakmeta It because of gesture conflicting between screen and bottom sheet.

[arunabhverma]

@sarthakmeta you can try this code, it should resolve your issue.

import { NativeViewGestureHandler } from 'react-native-gesture-handler';

<NativeViewGestureHandler disallowInterruption={true}>
   <AwesomeComponent />
</NativeViewGestureHandler>

[sarthakmeta]

@arunabhverma Working now. Thanks!🙏