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.

bottom_sheet_issue.mov

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 }}>


<View style={{ paddingHorizontal: 16, paddingTop: 8 }}>


</>
),
},
});

return (

<>
<Text style={[theme.typography.display.lg, styles.heading]}>
Welcome on Board

<Text style={[theme.typography.display.md, styles.heading]}>
{email}

<View style={{ padding: 16 }}>


</>

);
`

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

bottom_sheet_with_background_interaction_disabled.mov

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.

[roncbird]

Hi @ammarahm-ed, I wanted to follow up with my question above and see if you're aware of any issues in the library that may be causing this, and if there is a solution for it? Thank you in advance for any help you can provide.

[ammarahm-ed]

Can you try to reproduce this issue with the example app in the project? I haven't noticed anything like this on android.