I'm a bit confused as to why this flex won't work.
<View
style={{
display: "flex",
flexWrap: "wrap"
}}
>
<View style={{ width: "40%", alignSelf: "flex-start" }}>
<Button BUY</Button>
<View style={{ alignSelf: "center", marginTop: "2%" }}>// A logo</View>
</View>
<View style={{ width: "40%", alignSelf: "flex-end" }}>
<AreaChart
style={{ height: 250 }}
dataPoints={data}
contentInset={{ top: 30, bottom: 30 }}
curve={shape.curveNatural}
svg={{
fill: "rgba(134, 65, 244, 0.2)",
stroke: "rgb(134, 65, 244)"
}}
/>
</View>
</View>;
The intended layout I want to have is:
BUTTON | <CHART
LOGO | CHART>
The button and logos centered together, and the chart taking up both "boxes" on the right.
However, the above markup produces the following:
BUTTON |
LOGO |
| CHART
| CHART
They're doing the right thing but the Chart starts where the logo ends.
Where did I go wrong with flexbox? How do I produce the right layout?
As the default flexDirection
in React Native is column
, flex items will stack vertically, hence the chart renders on a row of its own.
By using alignSelf: "flex-end"
on the 2nd child View
, which for columns
control the cross axis (horizontal), it will right align.
To align them side-by-side, add flexDirection: "row"
to the parent View
.
You can also remove both the alignSelf
properties on the two child View
's, unless you want the 2nd View
(alignSelf: "flex-end"
) align to bottom.
Updated code sample
<View style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
}}>
<View style={{width: "40%"}}>
<Button>
BUY
</Button>
<View style={{alignSelf: "center", marginTop: "2%"}}>
// A logo
</View>
</View>
<View style={{ width: "40%"}}>
<AreaChart
style={{height: 250}}
dataPoints={data}
contentInset={{top: 30, bottom: 30}}
curve={shape.curveNatural}
svg={{
fill: 'rgba(134, 65, 244, 0.2)',
stroke: 'rgb(134, 65, 244)',
}}
/>
</View>
</View>