Actionsheet

beta
The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
Installation
API Reference
Examples
This is an illustration of Actionsheet component.
function App() {
const [showActionsheet, setShowActionsheet] = React.useState(false)
const handleClose = () => setShowActionsheet(!showActionsheet)
return (
<Box>
<Button onPress={handleClose}>
<ButtonText>Open</ButtonText>
</Button>
<Actionsheet isOpen={showActionsheet} onClose={handleClose} zIndex={999}>
<ActionsheetBackdrop />
<ActionsheetContent h="$72" zIndex={999}>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Delete</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Share</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Play</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Favourite</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={handleClose}>
<ActionsheetItemText>Cancel</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
</Box>
)
}

Installation

Run the following command:

npx gluestack-ui add actionsheet