title: React native - text not wrapping / shrinking
body: <p>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?</p>
  <p><a href="https://i.stack.imgur.com/yEPBI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yEPBI.jpg" alt="Text not wrapping" /></a></p>
  <pre><code>&lt;View style={styles.container}&gt;
  &lt;ScrollView style={styles.scrollview}&gt;
  (...)
   &lt;View style={styles.line}&gt;
            &lt;View style={[styles.bubble2,{}]}&gt;
              &lt;Text style={{color:'white', fontSize:18, flexShrink:1}}&gt;{strings('profilescreen.birthday')}&lt;/Text&gt; 
            &lt;/View&gt;
            &lt;Text style={styles.maintext}&gt;{userInfo.birthday}&lt;/Text&gt;
          &lt;/View&gt;
  (...)
        &lt;/ScrollView&gt;
      &lt;/View&gt;
  </code></pre>
  <p>styles:</p>
  <pre><code>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,
    },
    
  })
  </code></pre>