I have some text overflowing my container view.I would like the word that appears cut in the picture to be moved to the second line. I have tried textShrink as proposed in similar posts, but it doesn't work, so I must be doing something wrong in a parent view???. Can you see it?

<View style={styles.container}>
<ScrollView style={styles.scrollview}>
(...)
 <View style={styles.line}>
          <View style={[styles.bubble2,{}]}>
            <Text style={{color:'white', fontSize:18, flexShrink:1}}>{strings('profilescreen.birthday')}</Text> 
          </View>
          <Text style={styles.maintext}>{userInfo.birthday}</Text>
        </View>
(...)
      </ScrollView>
    </View>

styles:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.pointo,
    paddingTop: Constants.statusBarHeight+10,

  },

  bubble2:{
    height: 40,
    width:130,
    borderRadius:25,
    backgroundColor: Colors.pointosecondary,
    paddingHorizontal:20,
    alignSelf:'flex-start',
    alignItems:'center',
    justifyContent:'center',
    marginHorizontal:5,
    flexDirection:'column',

  },

  scrollview:{
    backgroundColor:'#fFF',
    height:'100%',
    paddingTop:10,
  },
  line:{
    height:50,
    flexDirection:'row',
    alignItems:'center',
    paddingHorizontal:20,
    paddingTop:15,
    flex:1,
  },
  maintext:{
    color:'gray',
    fontSize:16,
    paddingLeft:20,
  },
  
})

I have some text overflowing my container view.I would like the word that appears cut in the picture to be moved to the second line. I have tried textShrink as proposed in similar posts, but it doesn't work, so I must be doing something wrong in a parent view???. Can you see it?

<View style={styles.container}>
<ScrollView style={styles.scrollview}>
(...)
 <View style={styles.line}>
          <View style={[styles.bubble2,{}]}>
            <Text style={{color:'white', fontSize:18, flexShrink:1}}>{strings('profilescreen.birthday')}</Text> 
          </View>
          <Text style={styles.maintext}>{userInfo.birthday}</Text>
        </View>
(...)
      </ScrollView>
    </View>

styles:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.pointo,
    paddingTop: Constants.statusBarHeight+10,

  },

  bubble2:{
    height: 40,
    width:130,
    borderRadius:25,
    backgroundColor: Colors.pointosecondary,
    paddingHorizontal:20,
    alignSelf:'flex-start',
    alignItems:'center',
    justifyContent:'center',
    marginHorizontal:5,
    flexDirection:'column',

  },

  scrollview:{
    backgroundColor:'#fFF',
    height:'100%',
    paddingTop:10,
  },
  line:{
    height:50,
    flexDirection:'row',
    alignItems:'center',
    paddingHorizontal:20,
    paddingTop:15,
    flex:1,
  },
  maintext:{
    color:'gray',
    fontSize:16,
    paddingLeft:20,
  },
  
})

• javascript
• css
• react-native
• text
• styles

1 Answer 1

Use flexWrap

Update your text ponent style like this:

<Text style={{color:'white', fontSize:18, flexShrink:1, flexWrap: 'wrap'}}>
  {strings('profilescreen.birthday')}
</Text> 

CodeSandbox example