CODEWITHSUNDEEP
reactjsflexboxword-wrapreact-native
Peter G.
Peter G.

Reputation: 8034

React Native: Text wrapping inside View container with fixed-width button

I have a View container that displays a simple warning message. The message text should have line wrapping set on, the button should not.

They don't play along nicely and I can't get the text to wrap at the end of each line.

Preview

Result

RNPlay (Link)

<View style={{backgroundColor: 'red',flexDirection:'row',justifyContent:'space-between',alignItems:'center',flexWrap:'nowrap'}}>
  <View style={{justifyContent: 'flex-start', alignItems:'center', marginLeft:15, flexWrap: 'wrap'}}>
    <Text style={{color:'white', fontSize: 18, fontWeight:'normal', flexWrap: 'wrap'}}>You have deleted the item.</Text>
  </View>
  <TouchableHighlight style={{width:100,flexDirection:'column',marginVertical:15,flexWrap:'nowrap'}} >
    <View style={{right:0,width:100, flexDirection:'row', marginRight:15, paddingVertical:15, backgroundColor:'white',flexWrap:'nowrap'}}>
      <Text style={{fontSize: 18, fontWeight:'bold', color:'red',flexWrap:'nowrap'}}>BACK</Text>
    </View>
  </TouchableHighlight>
</View>

Upvotes: 2

Views: 2214

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

The main idea is to use Dimensions and to set main container' width. Like:

import Dimensions from 'Dimensions';
let {width} = Dimensions.get('window');

and then in main component' style:

<View style={{backgroundColor: 'red', ... , width}}>

Working here: https://rnplay.org/apps/SampHw

Upvotes: 2

Related Questions