How can I have flex elements shrink to their contents with react-native and align?

Question

I have:

        <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>

and this ends up looking like:

But I want each red box to shrink (vertically) to fit the contents and have equal spacing?

What am I missing?

I think you want `alignContent: 'flex-start'` – Rainbow May 01 '20 at 15:24 — Rainbow, May 01 '20 at 15:24
https://stackoverflow.com/q/34480760/3597276 – Michael Benjamin May 01 '20 at 16:44 — Michael Benjamin, May 01 '20 at 16:44

score 2 · Accepted Answer · answered May 01 '20 at 14:23

2

On the View container add this:

alignSelf: 'flex-start',

Should do the trick

answered May 01 '20 at 14:23

MIPB

1,770
2
12
21

1

Closer - but I updated the question to reflect my update – Shamoon May 01 '20 at 14:24

How can I have flex elements shrink to their contents with react-native and align?

1 Answers1