'How do you use ZStack without all elements stacking directly on top of each other?

I am trying to create an app layout in React Native using Native Base where I have 6 identical cards positioned vertically on the screen. To create the cards I used a ZStack:

import React, {FC} from 'react'

interface Props {
    name: string
}
const NodeCard: FC<Props> = (props) => {
    return (
        <Box>
            <ZStack>
                <Button backgroundColor='white'
                        borderRadius={14} 
                        width={369} 
                        height={60} >
                    <Text color='#525252' fontSize={20} fontWeight={700}>{props.name}</Text>
                </Button>
                <Button backgroundColor='#A3A3A3' 
                        height={60} width='10px' 
                        borderLeftRadius={14} 
                        borderRightRadius={0}
                        alignSelf='flex-start'
                        ></Button>
            </ZStack>
        </Box>
    )
}

export default NodeCard;```

Then I try to place the cards on the screen:
```import { Box } from 'native-base'
import React, { FC } from 'react'
import NodeCard from '~components/NodeCard';

const ScanForNodesScreen: FC = () => {
    return (
        <Box backgroundColor='black'
            height='100%'
            width='100%'
            display='flex'>
            <NodeCard name='NODE_73333'/>
            <NodeCard name='NODE_73334'/>
            <NodeCard name='NODE_73335'/>
            <NodeCard name='NODE_73336'/>
            <NodeCard name='NODE_73337'/>
            <NodeCard name='NODE_73338'/>
        </Box>
    )
}

export default ScanForNodesScreen;

but they all stack directly on top of each other, rather than arraying themselves vertically as I would expect other elements to do. I tested the environment by adding a bunch of elements to the screen, and they format themselves the way I would expect, so it must have something to do with the ZStack, I just don't understand why separate ZStacks are stacking directly on top of each other.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source