React Native avoid {width: '100%'} by default

Question

My code is pretty simple: (relevant parts shown only)

<ScrollView style={{/* padding, centering... */}>
  <Text>SHARE WITH YOU FRIENDS</Text>
</ScrollView>

Yet, when I inspect the Text node, its width is 100% of its container, and the grey background goes all the width.

Is there a layout setting to make this Text's width as small as possible? I.e. only until the end of the Text.

Answer 1

You can use alignSelf property:

<View style={{alignSelf: 'flex-start'}}> 
    <Text>SHARE WITH YOU FRIENDS</Text>
</View>

Answer 2

For Scroll view you can try like

<ScrollView contentContainerStyle={{ alignItems: 'flex-start'}}>
    <Text >SHARE WITH YOU FRIENDS</Text>
</ScrollView>

Hope this will help!