React native - text not wrapping / shrinking

Question

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,
  },
  
})

Nostromo · Accepted Answer · 2020-09-17 05:33:44Z

4

Use flexWrap

Update your text component style like this:

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

CodeSandbox example

edited Sep 17, 2020 at 5:33

answered Sep 16, 2020 at 10:23

Nostromo

1,0732 gold badges10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mireia Over a year ago

doesn't do anything... its as if the text "didn't know" that it is overflowing

Nostromo Over a year ago

hmm, you are using a static height for your wrapper view (height: 40). can you try to remove it and give a flex:1 instead?

Mireia Over a year ago

now the height is just enough to fit the one Line text, but the longer text didn't shrink anyway

Nostromo Over a year ago

did you also remove height:50 from line style? Our purpose is to allow text component have enough space to gain auto height based on its content. Static heights prevent this from happening.

damdafayton Over a year ago

This solution works for me. Perhaps the parent container must be flex also.

|

Collectives™ on Stack Overflow

React native - text not wrapping / shrinking

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related