CODEWITHSUNDEEP
cssreact-nativeflexbox
cbll
cbll

Reputation: 7219

React native flexbox how to align items vertically?

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?

Upvotes: 5

Views: 18208

Answers (1)

Asons
Asons

Reputation: 87303

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>

Upvotes: 8

Related Questions