React native flexbox how to align items vertically?

I'm a bit confused as to why this flex won't work.

<Viewstyle={{    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  |   <CHARTLOGO    |   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?