ZStack | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <>
      <Heading mb="10">ZStack</Heading>
      <Box h="40">
        <ZStack mt="3" ml={-50}>
          <Box bg="primary.500" size="20" rounded="lg" shadow={3} />
          <Box bg="secondary.500" mt="5" ml="5" size="20" rounded="lg" shadow={5} />
          <Box bg="emerald.500" mt="10" ml="10" size="20" rounded="lg" shadow={7} />
        </ZStack>
      </Box>
    </>;
};
const Example = () => {
  return <>
      <Heading mb="10">ZStack</Heading>
      <Box h="40">
        <ZStack mt="3" ml={-50}>
          <Box bg="primary.500" size="20" rounded="lg" shadow={3} />
          <Box bg="secondary.500" mt="5" ml="5" size="20" rounded="lg" shadow={5} />
          <Box bg="emerald.500" mt="10" ml="10" size="20" rounded="lg" shadow={7} />
        </ZStack>
      </Box>
    </>;
};

Playground
const Example = () => {
  return <ZStack alignItems="center" justifyContent="center">
      <Box bg="primary.500" size="64" rounded="lg" />
      <Box bg="secondary.500" size="48" rounded="lg" shadow={8} />
      <Box bg="emerald.500" size="32" rounded="lg" shadow={8} />
    </ZStack>;
};
const Example = () => {
  return <ZStack alignItems="center" justifyContent="center">
      <Box bg="primary.500" size="64" rounded="lg" />
      <Box bg="secondary.500" size="48" rounded="lg" shadow={8} />
      <Box bg="emerald.500" size="32" rounded="lg" shadow={8} />
    </ZStack>;
};