2

I need to achieve this:

https://jsfiddle.net/ghxfpL7j/1/

In React Native but:

  • You can't have a View inside a Text
  • You can't set a margin or padding for a Text

I tried having the "C" inside a View and the text and then another view for the other Text with the number but I couldn't achieve the same because when the name is too long it does not work.

This is what I tried:

<View style={a}>
  <View style={b}><Text style={c}>C</Text></View>
  <Text style={d}>Player name</Text>
  <View style={e}>20</View>
</View>

and then styles:

a: {
  flexDirection: 'row',
  flexWrap: 'wrap'
}

b:{
  width: 20,
  backgroundColor: '#000'
}

c:{
  color: '#ddd
}

d:{
  flex: 1,
  text-align: 'right'
}

e:{
  text-align: 'right'
}
KetZoomer
  • 2,701
  • 3
  • 15
  • 43
aabcabca12
  • 353
  • 1
  • 4
  • 17
  • Is swearing necessary? – yardpenalty.com Nov 15 '19 at 18:28
  • For anyone landing here looking to simulate `inline-block` so that the width of the container is based on the width of its text, see [React-native view auto width by text inside](https://stackoverflow.com/questions/38233789/react-native-view-auto-width-by-text-inside) – user56reinstatemonica8 May 10 '21 at 08:49

1 Answers1

6

Per your link, which could be:

<View style={{ flexDirection: 'row' }}>
    <View style={{ flex: 1 }}>
        <Text>C</Text>
    </View>

    <Text>Player Name</Text>
    <Text>25</Text>
</View>
KetZoomer
  • 2,701
  • 3
  • 15
  • 43
James Liu
  • 269
  • 1
  • 11