This is the pre-release documentation for gluestack-ui with NativeWind (alpha) version. For @gluestack-ui/themed(stable) documentation, refer to the latest release (v1).
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}
className="z-[999]"
>
<ActionsheetBackdrop />
<ActionsheetContent className="z-[999] h-72">
<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