How do I wrap text around a View in React Native?

user_8042204 0
Viewed 323

I'd like to create a component which will display a View called label on the top-right corner and some text surrounding it, similarly to what you'll get on a web layout when you float: right a <div> with CSS. Both the label and the text may have varying lengths. I've been trying for a while to make the text from the 2nd row onwards wrap and expand below the label, but with no luck.

This is my code so far:

<View style={{flexDirection: 'row', borderWidth: 1}}>
  <Text
    numberOfLines={3}
    style={{flex: 1}}
  >
    lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
  </Text>
  <View>
    <Text style={{backgroundColor: 'wheat'}}>
      label 1234
    </Text>
  </View>
</View>

And the resulting render:
RN rendered component

This is what I'd like to obtain instead:
WEB rendered component

react-native layout css
1 Answers

The most simple, yet kinda "hacky" way would be to go with float: right;, as you already tried. For this to work, the flex styles have to be set to "initial" both on the outer view and text component following the floated view. Also, this works only when the floated element comes first.

<View style={{display: 'initial', borderWidth: 1}}>
    <View style={{float: 'right'}}>
        <Text style={{backgroundColor: 'wheat'}}>
            label 1234
        </Text>
    </View>
    <Text
        style={{display: 'initial'}}
        numberOfLines={3}
    >
        lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor ydrgsr serg er
    </Text>
</View>

Live example: https://snack.expo.io/iuNiJSaYW

user_37874070
Related