Android - Bottom view still showing after dragging bottom sheet down

[roncbird]

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} </ActionSheet> ); };

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

return ( <View style={styles.container}> <> <Text style={[theme.typography.display.lg, styles.heading]}> Welcome on Board </Text> <Text style={[theme.typography.display.md, styles.heading]}> {email} </Text> <Button buttonCopy="Logout" buttonOnPress={handleLogout} buttonSize="LARGE" buttonType="PRIMARY" buttonWidth="HUG" /> <View style={{ padding: 16 }}> <Button buttonCopy="Show BottomSheet" buttonOnPress={handlePresentBottomSheet} buttonSize="LARGE" buttonType="PRIMARY" buttonWidth="HUG" /> </View> </> </View> ); `

When I set backgroundInteractionEnabled={true} then I don't see the problem.

https://github.com/ammarahm-ed/react-native-actions-sheet/assets/6894360/c2f57518-cc0f-4a60-ad77-c0ae0639135d

Our usage right now is pretty basic, so I wouldn't think we're causing it on our side by any custom code. Has anyone else seen this issue on Android and might know how to fix it? Unfortunately, I will have to go with another library if I'm unable to find a solution for this issue. Thanks for any help in advance.