css - react-native と align を使用してフレックス要素をコンテンツに縮小するにはどうすればよいですか?

Question

私は持っている：

        <StyledSurface style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            {conversations.map((c, i) => (
                <Surface style={{ backgroundColor: 'red', width: '46%', margin: '2%', flexDirection: 'column', flexShrink: 1, alignSelf: 'flex-start'}} key={i}>
                    <Text style={{flex: 1}}>{c.title}</Text>
                </Surface>
            ))}
        </StyledSurface>

これは最終的に次のようになります。

しかし、各赤いボックスを（垂直方向に）縮小して内容に合わせ、等間隔にしたいですか？

私は何が欠けていますか？