CODEWITHSUNDEEP
react-nativeflexbox
mibbit
mibbit

Reputation: 5375

Align 2 Text tags horizontally react-native

I would like to align 2 text items in a row. For example

Text{key}/Text Text{value}/Text

I read in the docs about the Text element: The element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a are no longer rectangles, but wrap when they see the end of the line.

So I'm assuming I need to wrap the text in a view. I still have not solved the problem, here is a react native example of my current progress. Notice the elements wrap to a new row. How can I avoid this behavior?

https://rnplay.org/apps/F4sr7Q

Upvotes: 3

Views: 959

Answers (1)

Smiter
Smiter

Reputation: 1391

Looks like you messed up with this line:

<View style={styles.IndexTableRow,{backgroundColor:'blue'}}>

just move backgroundColor style to the IndexTableRow and it should work

Upvotes: 2

Related Questions