How to limit number of lines flex grow?

user_15055622 0
Viewed 51

I am building multi lines horizontal list using [array & flexGrow]. My list have different size of text like:['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa']. I want when the views wrapped to second row and next view will wrapped into third row, then show other.. view.

My code:

const services=['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa'];

 <View style={styles.servicesHView}>
      {services?.map(item => {
        return (
          <View style={styles.servicesView}>
            <Text style={styles.serviceText}>{item}</Text>
          </View>
        );
      })}
    </View>

Style:

servicesHView: {
  marginTop: hp('2%'),
  flexDirection: 'row',
  flexWrap:  'wrap' ,
  
},
servicesView: {
  paddingVertical: hp('1%'),
  paddingHorizontal: wp('4%'),
  marginEnd: wp('2%'),
  backgroundColor: colors.semiDarkGray,
  borderRadius: 15,
  marginBottom: hp('0.8%'),
},
serviceText: {
  fontFamily: 'Nunito_SemiBold',
  fontSize: wp('4%'),
  color: colors.darkGray,
  alignSelf: 'center',
},

I want the result like that:

enter image description here

But my result is:

enter image description here

flexbox expo react-native
1 Answers

It's not perfect but could be a step in the right direction but you could try something like this:

const services=['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa'];

 <View style={styles.servicesHView}>
      {services?.map((item, index) => {
        if (index < 3) {
         return (
           <View style={styles.servicesView}>
             <Text style={styles.serviceText}>{item.name}</Text>
           </View>
         );
        }
        if (services.length > 3 && index === services.length - 1) {
          return ( 
            <View style={styles.servicesView}>
              <Text style={styles.serviceText}>Others..</Text>
            </View>
          );
        }
      })}
    </View>
user_133091040
Related