ZStack | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
If you are starting a new project with NativeBase, we recommend using gluestack instead.
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack instead.
ZStack
ZStack aligns items to the z-axis.
Show Codeconst Example = () => {return <Box mt="-20"><ZStack mt="3" ml={-50}><Box bg="primary.700" size="20" rounded="lg" shadow={3} /><Box bg="primary.500" mt="5" ml="5" size="20" rounded="lg" shadow={5} /><Box bg="primary.300" mt="10" ml="10" size="20" rounded="lg" shadow={7} /></ZStack></Box>;};
Examples
Basic
Playgroundconst Example = () => {return <Center h="40"><Box mt="-32"><ZStack mt="3" ml={-50}><Box bg="primary.700" size="20" rounded="lg" shadow={3} /><Box bg="primary.500" mt="5" ml="5" size="20" rounded="lg" shadow={5} /><Box bg="primary.300" mt="10" ml="10" size="20" rounded="lg" shadow={7} /></ZStack></Box></Center>;};
Items Centered
You can pass alignItems="center" justifyContent="center" to vertically and horizontally center the children.
Playgroundconst Example = () => {return <Center h="96"><ZStack alignItems="center" justifyContent="center"><Box bg="indigo.700" size="64" rounded="lg" /><Box bg="indigo.500" size="48" rounded="lg" shadow={8} /><Box bg="indigo.300" size="32" rounded="lg" shadow={8} /></ZStack></Center>;};
Props
ZStack implements , , , , , , , , ,
reversed
The direction to stack the elements.
Type: boolean
Quick Nav
MadeWithNativeBase