[Bug]: Can't able to use Gorhom bottom sheet in child components

[devchandhana12]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

Hi, does anyone have any solution to this which I'm currently facing. I've a need to use gorhom bottom sheet inside a child component, when the bottom sheet is supposed to open at the bottom of the screen, currently it's opening at the place where the component starts in a screen. Will be attaching the screen shot for reference.

Reproduction steps

I've tried replicating the issue below please click on tap me to find the issue

Reproduction sample

https://snack.expo.dev/2sTFgkI93fIJEas1Qp2tB

Relevant log output

No response

[devchandhana12]

@gorhom can you please help me resolve this issue

[fobos531]

@devchandhana12 You need to use the BottomSheetModal in this case, not BottomSheet.

[devchandhana12]

I've solved the issue by wrapping it inside portals,
Install @gorham/portal library and wrap your app in side it and then wrap your bottom sheet code inside it so that it will over write it's parents style and will be visible on top and at bottom.

[devchandhana12]

I've resolved the issue by adding portals, I've used gorhom portal library, wrapped my app inside it and then wrapped my bottom sheet code inside it. Now, it's over written it's parents styles and it displayed on top of everything. Thanks !!

[zhrgns]

Here is the solution; Use BottomSheetModal in CustomSheetComponent.
Then, wrap your screen component with BottomSheetModalProvider where you need to render CustomSheetComponent.
<BottomSheetModal ref={ref} onChange={onChange} enablePanDownToClose={true} backdropComponent={renderBackdrop} handleIndicatorStyle={styles.draggableIcon}> <BottomSheetView> <View> </View> </BottomSheetView> </BottomSheetModal>

[gencw]

@devchandhana12 hello Can you tell me how you solved it? Reproduction sample

[devchandhana12]

@gencw

So, I've tried solving it with by wrapping it up in portal's but it reduced the performance of app greatly, so I've used BottomSheetModal

import React, {forwardRef, useMemo} from 'react';
import {
BottomSheetBackdrop,
BottomSheetModal,
BottomSheetView,
} from '@gorhom/bottom-sheet';

export type Ref = BottomSheetModal;

interface Props {
children: React.ReactNode;
height?: string;
}

const CustomBottomSheet = forwardRef<Ref, Props>(({children, height}, ref) => {
// Memoized default snap points for optimization
const defaultSnapPoints = useMemo(() => ['100%'], []);

return (
<BottomSheetModal
ref={ref}
keyboardBehavior="extend"
enableContentPanningGesture={false}
snapPoints={defaultSnapPoints}
backdropComponent={props => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
)}
style={{flex: 1}}
detached
animateOnMount={true}
enableDynamicSizing={true}
enablePanDownToClose={true}>
<BottomSheetView style={[styles.container, {bottom: 20}]}>
{children}


);
});

export default React.memo(CustomBottomSheet);

this is the component which I've created