How can I mix fixed and dynamic size elements in a flexbox container?

Viewed 1598

I'm trying to create a layout that utilizes flexbox' automatic sizing but also contains fixed-size items:

<View style={{ height: 70, alignItems: "center" }}>
    <Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
    <Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
    <Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>

I want the image to be centered in the UI and have the text views equally take the remaining width. The actual result is that one of the text views is larger than the other as if the rendering doesn't take the width of the image view into account.

1 Answers
Related