Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Alert
Alerts are used to communicate a state that affects a system, feature or page.
Import
NativeBase exports 5 Alert related components:
Alert: The wrapper for alert components.
Alert.Icon: The visual icon for the alert that changes based on the status prop.
Alert.Title: The title of the alert to be announced by screen readers.
Alert.Description: The description of the alert to be announced by screen readers.
Copy
import{Alert}from'native-base';
Examples
Basic
Playground
functionExample(){
return<Alertw="100%">
<Alert.Icon/>
<Alert.Title>Alert Title</Alert.Title>
<Alert.Description>
Alert Description should be a brief about the Alert Message.
</Alert.Description>
</Alert>;
}
Status
Playground
functionExample(){
return<Stackspace={3}w="100%">
{["error","warning","info","success"].map(key=>{
return<Alertstatus={key}w="100%">
<Alert.Icon/>
<Alert.TitleflexShrink={1}>{`This is an ${key} alert`}</Alert.Title>