Skip to main content
Version: 2.3.2

Bottom Sheet

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

isVisible#

Is the modal component shown

TypeDefault
booleanfalse

modalProps#

Additional props handed to the Modal

TypeDefault
Modal Props{}