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

#
Usageconst [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}> {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#
ReferenceisVisible
#
Is the modal component shown
Type | Default |
---|---|
boolean | false |
modalProps
#
Additional props handed to the Modal
Type | Default |
---|---|
Modal Props | {} |