'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 |
---|