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

Question

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?

question from:https://stackoverflow.com/questions/34689970/flex-react-native-how-to-have-content-break-to-next-line-with-flex-when-conte

Answer 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: