'Flex React Native -- How to have content break to next line with flex when content reaches edge

I have a list of icons inside my styled container that are displayed in a flexDirection:'row' but when there is more icons than width of view, they dont break to next line, but continue on to the right out of view. How do I get the content to break to the next line if it reaches max width?

Styling: 

var styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH, //width of screen
    flexDirection:'row',
    backgroundColor: 'transparent',
    marginTop:40,
    paddingLeft:10,
    paddingRight:10,
    flex: 1,
  },
  iconText:{
    paddingLeft:10,
    paddingRight:10,
    paddingTop:10,
    paddingBottom:10
  },
});

Render:

<View style={styles.container}>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[0])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[0]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[1])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[1]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[2])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[2]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      ...//more continued on

</View>

When the icons reach the width to the right they dont break to the bottom. Is this possible?

flexboxreact-native


Solution 1:[1]

You can add flexWrap: 'wrap' and alignItems: flex-start (or anything other than stretch to your container style.

If you don't specify align-items or if you set align-items: stretch, each column in the first row will take as much height as possible, pushing the second row below kind of like in the screenshot below:

With no alignItems specified

Solution 2:[2]

For my case, I only needed to add flex-shrink: 1 or flexShrink: 1, to the parent of my Text component that I wanted to wrap.

I did not need or benefit from align-items: flex-start or flex-wrap: wrap etc. Again, might just be my use-case, but that worked for me.

Solution 3:[3]

just put multiline as follows

          <TextInput
                multiline
                style={[ styles.input, propStyleTextInput, {flexShrink: 1}]}
                onChangeText={(e) => onChangeNumber(e, id)}
                value={number}
                placeholder={placeholder}
                keyboardType={keyboardType}
            />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 SeanMC
Solution 3 Shehan Hasintha

Related Questions