Android - Bottom view still showing after dragging bottom sheet down

Hello,

Thank you for your work on this library. We are currently in the process of rebuilding our app from native to React Native, so it's been very helpful to find libraries like this one, however, I have ran into a couple of issues on Android. When I drag the bottom sheet down, near the bottom of the screen, there is a view showing behind the bottom sheet. Please see the video below.

https://github.com/ammarahm-ed/react-native-actions-sheet/assets/6894360/5bf68aae-2b78-4e0c-bf36-781214085d6b

I don't see this issue on Web or iOS just android. The emulator I am using is Pixel 5 API 30. I've tested this on a physical Pixel 3 running API 31, and see the same issue.

We're using the bottom sheet pretty much in a basic way. Here is the first file.

BottomSheet.tsx

`import React from 'react'; import { StyleSheet } from 'react-native'; import ActionSheet, { SheetProps } from 'react-native-actions-sheet';

const BottomSheet = (props: SheetProps<'bottom-sheet'>) => { return ( <ActionSheet testIDs={{ modal: 'testModal' }} gestureEnabled={true} indicatorStyle={styles.indicatorStyle} containerStyle={styles.contentContainer}

{props.payload.value} ); };

const styles = StyleSheet.create({ contentContainer: { backgroundColor: 'white', paddingBottom: 16, paddingTop: 16, }, indicatorStyle: { backgroundColor: '#9FA1A4', height: 6, marginBottom: 16, marginTop: 16, width: 36, }, });

export default BottomSheet;`

Here is the sheets.tsx

` import React from 'react'; import { registerSheet, SheetDefinition } from 'react-native-actions-sheet';

import BottomSheet from './BottomSheet';

registerSheet('bottom-sheet', BottomSheet);

declare module 'react-native-actions-sheet' { interface Sheets { 'bottom-sheet': SheetDefinition<{ payload: { value: React.ReactNode; }; }>; } }

export {}; `

Login.tsx

const handlePresentBottomSheet = () => SheetManager.show(bottom-sheet`, { payload: { value: ( <> <Text style={{ ...theme.typography.body.baseBold, paddingStart: 16 }}

Sheet headline <View style={{ padding: 8 }} /> <Text style={{ ...theme.typography.body, paddingStart: 16 }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <View style={{ padding: 16 }} /> <View style={{ paddingHorizontal: 16, paddingBottom: 8 }}> <Button buttonCopy="Close BottomSheet" buttonOnPress={handleLogout} buttonSize="LARGE" buttonType="PRIMARY" buttonWidth="HUG" /> <View style={{ paddingHorizontal: 16, paddingTop: 8 }}> <Button buttonCopy="Close BottomSheet" buttonOnPress={handleLogout} buttonSize="LARGE" buttonType="PRIMARY" buttonWidth="HUG" /> </> ), }, });

return (

<> Welcome on Board {email}

ammarahm-ed / react-native-actions-sheet

Android - Bottom view still showing after dragging bottom sheet down #373