function Example() {return (<View style={styles.container}><View style={styles.topContainer}><View style={styles.metaContainer}><View><Text style={styles.timings}>Today @ 9PM</Text><Text style={styles.description}>Let's talk about avatar!</Text></View><Pressable style={styles.button}><Text style={styles.buttonText}>Remind me</Text></Pressable></View><Imagesource={{uri: "https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg",}}style={styles.avatar}/></View></View>)}const styles = StyleSheet.create({container: {backgroundColor: "#0891b2",paddingVertical: 16,paddingHorizontal: 12,borderRadius: 5,alignSelf: "center",width: 375,maxWidth: "100%",},timings: {color: "#fff",fontSize: "14px",},metaContainer: {justifyContent: "space-between",},topContainer: {flexDirection: "row",justifyContent: "space-between",},avatar: {height: 100,width: 100,borderRadius: 100,},description: {color: "white",marginTop: 5,fontSize: 20,},button: {backgroundColor: "#22d3ee",alignSelf: "flex-start",paddingHorizontal: 12,paddingVertical: 4,borderRadius: 2,},buttonText: {fontWeight: "bold",color: "white",textTransform: "uppercase",fontSize: 14,},})
function Example() {return (<Boxbg="#0891b2"py="$4"px="$3"rounded="$md"height="132px"width={375}maxWidth="100%"><HStack justifyContent="space-between" height="100%"><Box justifyContent="space-between"><VStack space="xs"><Text fontSize="$sm" color="$white">Today @ 9PM</Text><Text color="$white" fontSize="$xl">Let's talk about avatar!</Text></VStack><Pressablerounded="$xs"bg="#22d3ee"alignSelf="flex-start"py="$1"px="$3"><ButtonTexttextTransform="uppercase"fontSize="$sm"fontWeight="$bold"color="$white">Remind me</ButtonText></Pressable></Box><Imagesource={{uri: "https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg",}}alt="Aang flying and surrounded by clouds"height="100px"rounded="$full"width="100px"/></HStack></Box>)}
<Buttonsize="lg"mb="$4"bg="$green500"$hover-bg="$green600"$active-bg="$green700"$_text-hover-color="$white"><ButtonText>Button</ButtonText></Button>
<Buttonsize="lg"mb="$4"bg="$green500"$hover={{bg: "$green600",_text: {color: "$white",},}}$active={{bg: "$green700",}}><ButtonText>Button</ButtonText></Button>
<Buttonsize="lg"sx={{marginBottom: "$4",bg: "$green500",":hover": {bg: "$green600",_text: {color: "$white",},},":active": {bg: "$green700",},}}><ButtonText>Button</ButtonText></Button>
<><Box borderRadius="$md" bg="$primary200" m="$2" p="$5" /><Box borderRadius="$md" bg="$primary200" mx="auto" px="$20" py="$5" /><BoxborderRadius="$md"bg="$primary200"sx={{"@sm": { m: "$2" },"@lg": {m: "$3",},}}mt="$2"pt="$10"pr="$10"/></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
m, margin | margin | space |
mt, marginTop | margin-top | space |
mr, marginRight | margin-right | space |
mb, marginBottom | margin-bottom | space |
ml, marginLeft | margin-left | space |
mx | margin-left and margin-right | space |
my | margin-top and margin-bottom | space |
p, padding | padding | space |
pt, paddingTop | padding-top | space |
pr, paddingRight | padding-right | space |
pb, paddingBottom | padding-bottom | space |
pl, paddingLeft | padding-left | space |
px | padding-left and padding-right | space |
py | padding-top and padding-bottom | space |
<><Box p="$5" m="$2" borderRadius="$md" bg="$orange200" /><Box p="$5" m="$2" borderRadius="$md" bgColor="$lightBlue200" py="$3"><Text color="$red400" fontWeight="bold">I ❤️ Gluestack</Text></Box><Box p="$5" m="$2" borderRadius="$md" backgroundColor="$indigo300" /></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
color | color | colors |
bg, background | background | colors |
bgColor | background-color | colors |
opacity | opacity | - |
<><Text m="$2" fontSize="md">Sample Text</Text><Text m="$2" fontSize={32} textDecoration="underline">Sample Text</Text><Text m="$2" fontSize="2em" fontWeight="bold">Sample Text</Text><Text m="$2" textAlign="center">Sample Text</Text></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
fontFamily | font-family | fonts |
fontSize | font-size | fontSizes |
fontWeight | font-weight | fontWeights |
lineHeight | line-height | lineHeights |
letterSpacing | letter-spacing | letterSpacings |
textAlign | text-align | - |
fontStyle | font-style | - |
textTransform | text-transform | - |
textDecoration | text-decoration | - |
<><Box m="$2" borderRadius="$md" bg="$primary200" width="100%" height="$8" /><Box m="$2" borderRadius="$md" bg="$primary200" w="75%" h="32px" /><Box m="$2" borderRadius="$md" bg="$primary200" w="50%" h="$8" /><Box m="$2" borderRadius="$md" bg="$primary200" w={256} /><Box m="$2" borderRadius="$md" bg="$primary200" w="40px" h="$8" /></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
w, width | width | sizes |
h, height | height | sizes |
minW, minWidth | min-width | sizes |
maxW, maxWidth | max-width | sizes |
minH, minHeight | min-height | sizes |
maxH, maxHeight | max-height | sizes |
d, display | display | - |
verticalAlign | vertical-align | - |
overflow | overflow | - |
overflowX | overflowX | - |
overflowY | overflowY | - |
<><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" borderWidth="$1" /><Boxp="$5"m="$2"borderRadius="$md"bg="$primary200"borderWidth="$2"borderColor="$red400"/><Boxp="$5"m="$2"borderRadius="$md"bg="$primary200"borderWidth="$2"borderBottomColor="$red500"borderTopWidth="$4"/></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
border | border | borders |
borderWidth | border-width | borderWidths |
borderStyle | border-style | borderStyles |
borderColor | border-color | colors |
borderTopWidth | border-top-width | borderWidths |
borderTopColor | border-top-color | colors |
borderRightWidth | border-right-width | borderWidths |
borderRightColor | border-right-color | colors |
borderBottomWidth | border-bottom-width | borderWidths |
borderBottomColor | border-bottom-color | colors |
borderLeftWidth | border-left-width | borderWidths |
borderLeftColor | border-left-color | colors |
<><Box p="$5" m="$2" bg="$primary200" borderRadius="$md" /><Box p="$5" m="$2" bg="$primary200" borderRadius="$full" /><Boxp="$5"m="$2"bg="$primary200"borderTopLeftRadius="$lg"borderBottomRightRadius="$md"/></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
borderRadius | border-radius | radii |
borderTopLeftRadius | border-top-left-radius | radii |
borderTopRightRadius | border-top-right-radius | radii |
borderBottomRightRadius | border-bottom-right-radius | radii |
borderBottomLeftRadius | border-bottom-left-radius | radii |
<><Boxp="$5"m="$2"borderRadius="$md"bg="$primary200"position="absolute"left="$64"p="$7"/><Boxp="$5"m="$2"borderRadius="$md"bgColor="$orange300"zIndex={2}position="relative"/><Boxp="$5"m="$2"borderRadius="$md"backgroundColor="$indigo300"position="absolute"right="$32"p="$7"/></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
position | position | - |
zIndex | z-index | zIndices |
top | top | space |
right | right | space |
bottom | bottom | space |
left | left | space |
<><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" softShadow="1" /><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" softShadow="3" /><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" hardShadow="5" /><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" hardShadow="7" /><Box p="$5" m="$2" borderRadius="$md" bg="$primary200" hardShadow="9" /></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
hardShadow | box-shadow | shadows |
softShadow | box-shadow | shadows |
<><Buttonsx={{bg: "$primary400",_text: {color: "$secondary900",fontSize: "$xs",fontWeight: "$bold",},}}><ButtonText>Sample Text</ButtonText></Button></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
_text | TextProps | Passed props will be provided to Text child. |
<><Buttonsx={{":hover": {// below props will only be applied on button is hoveredbg: "$red300",},}}><ButtonText>Sample Text</ButtonText></Button></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
:disabled | Same as the component | Passed props will be applied on disabled state. |
:focus | Same as the component | Passed props will be applied on focused state. |
:hover | Same as the component | Passed props will be applied on hovered state. |
:invalid | Same as the component | Passed props will be applied on invalid state. |
:active | Same as the component | Passed props will be applied on pressed state. |
<><Buttonsx={{_web: {bg: "$primary300",},_ios: { bg: "$red500" },_android: { bg: "$yellow500" },}}><ButtonText>Sample Text</ButtonText></Button></>
Prop | CSS Equivalent | Theme Key |
---|---|---|
_android | Same as the component | Passed props will be applied on android. |
_ios | Same as the component | Passed props will be applied on ios. |
_web | Same as the component | Passed props will be applied on web. |