Copyimport { Alert } from 'native-base';
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.Playgroundfunction Example() {return <Alert w="100%"><Alert.Icon /><Alert.Title>Alert Title</Alert.Title><Alert.Description>Alert Description should be a brief about the Alert Message.</Alert.Description></Alert>;}
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.Playgroundfunction Example() {return <Stack space={3} w="100%">{["error", "warning", "info", "success"].map(key => {return <Alert status={key} w="100%"><Alert.Icon /><Alert.Title flexShrink={1}>{`This is an ${key} alert`}</Alert.Title></Alert>;})}</Stack>;}
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.Playgroundfunction Example() {return <Stack space={4} mx={3} w="100%"><Alert variant="solid" colorScheme="teal"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Solid Variant</Alert.Title></Alert><Alert variant="left-accent" status="success"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Left Accent Variant</Alert.Title></Alert><Alert variant="top-accent" status="error"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Top Accent Variant</Alert.Title></Alert><Alert status="warning" variant="subtle"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Default/Subtle Variant</Alert.Title></Alert><Alert status="info" variant="outline"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Outline Variant</Alert.Title></Alert><Alert status="info" variant="outline-light"><Alert.Icon /><Alert.Title flexShrink={1}>Alert Outline Light Variant</Alert.Title></Alert></Stack>;}
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.Playgroundfunction Example() {return <ScrollView><VStack my={3} space={5} w="100%"><Alert status="success" display="flex" variant="outline" borderColor="gray.200" flexDirection="column" alignItems="center" justifyContent="center"><Alert.Icon boxSize="40px" mr={0} /><Alert.Title mt={2} mb={2}>This is a success alert</Alert.Title><Alert.Description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat.</Alert.Description></Alert><Alert status="success" display="flex" flexDirection="column" alignItems="center" justifyContent="center"><Alert.Icon boxSize="40px" mr={0} /><Alert.Title mt={2} mb={2}>This is a success alert</Alert.Title><Alert.Description>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat.</Alert.Description></Alert><Alert status="success"><Alert.Icon /><Box flex={1} ml={2}><Alert.Title>This is a success alert</Alert.Title><Alert.Description mt={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.</Alert.Description></Box><IconButton icon={<CloseIcon color="success.500" size="xs" />} position="absolute" top={0.5} right={1} /></Alert></VStack></ScrollView>;}
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.Playgroundfunction Example() {const [show, setShow] = React.useState(true);return <Box w="100%"><Collapse isOpen={show}><Alert status="error" action={<IconButton icon={<CloseIcon size="xs" />} onPress={() => setShow(false)} />} actionProps={{alignSelf: "center"}}><Alert.Icon /><Alert.Title>Error Alert</Alert.Title><Alert.Description>description goes here</Alert.Description></Alert></Collapse><Button size={"sm"} onPress={() => setShow(true)} my={2} mx="auto">Re-Open</Button></Box>;}