React Native: How to make TouchableOpacity shrink to fit Text contents?

Question

I have a TouchableOpacity with a Text component inside it in my React Native app, and I want the TouchableOpacity to be only as wide as the Text. I've tried doing this:

<TouchableOpacity style={{flexDirection: 'row', flexBasis: 0, flexShrink: 1}}>
    <Text>text</Text>
</TouchableOpacity>

But the TouchableOpacity is still as wide as the whole screen. flexGrow is 0 by default, so I figured by allowing the TouchableOpacity to shrink with flexShrink and having its flexBasis be zero,

I have just tried your example and it works for me. [Check it out](https://snack.expo.io/GtpwTkhr4G) — Mirakurun, May 15 '20 at 23:46
Your snack works on web, but on iOS and Android the text doesn't appear. Are you getting that too? — gkeenley, May 16 '20 at 00:02

score 3 · Answer 1 · answered May 16 '20 at 04:45

3

You can use the alignself style for TouchableOpacity

<TouchableOpacity style={{backgroundColor: 'red', alignSelf: 'flex-start' }}>
    <Text>text</Text>
</TouchableOpacity>

answered May 16 '20 at 04:45

Guruparan Giritharan

15,660
4
27
50

React Native: How to make TouchableOpacity shrink to fit Text contents?

1 Answers1