CODEWITHSUNDEEP
cssreact-native
aabcabca12
aabcabca12

Reputation: 373

Display inline-block equivalent in react native

I need to achieve this:

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

In React Native but:

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

Upvotes: 2

Views: 7403

Answers (1)

James Liu
James Liu

Reputation: 279

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>

Upvotes: 7

Related Questions