Version: 3.4.2

Bottom Sheet

Note: Make sure that you have completed Step 3 in the setup guide before using BottomSheet.

Overlay Modal that displays content from the bottom of the screen.

Bottom Sheet Component

Usage#

const [isVisible, setIsVisible] = useState(false);
const list = [
{ title: 'List Item 1' },
{ title: 'List Item 2' },
{
title: 'Cancel',
containerStyle: { backgroundColor: 'red' },
titleStyle: { color: 'white' },
onPress: () => setIsVisible(false),
},
];
<BottomSheet
isVisible={isVisible}
containerStyle={{ backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)' }}
>
{list.map((l, i) => (
<ListItem key={i} containerStyle={l.containerStyle} onPress={l.onPress}>
<ListItem.Content>
<ListItem.Title style={l.titleStyle}>{l.title}</ListItem.Title>
</ListItem.Content>
</ListItem>
))}
</BottomSheet>;

Props#


Reference#

containerStyle#

Style of the bottom sheet's container

Use this to change the color of the underlay

TypeDefault
View style (object)Internal Style

isVisible#

Is the modal component shown

TypeDefault
booleanfalse

modalProps#

Additional props handed to the Modal

TypeDefault
Modal Props{}