How to make TouchableOpacity wrap its content when nested inside parent that has flex = 1

Question

I know that as default TouchableOpacity always has width as wrap-content. But I place it inside a View that has flex: 1. TouchableOpacity's width become match-parent/take the full width of the screen.

<View style={ {flex:1} }>
   <TouchableOpacity>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

The question is how could I make the TouchableOpacity wrap-content while nested inside a View like that.

Thanks

Answer 1

You will have to use position: "absolute" style for the TouchableOpacity

<View style={{flex:1}}>
   <TouchableOpacity style={{position: "absolute" }}>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

You can also use alignSelf:'flex-start' can use center or flex-end as well.