react native horizontal list view with no scroll. How to wrap item?

Question

I'm showing items in list. I don't want to use horizontal scroll view but how can I wrap items such that they don't fall out of the screen? Just as we have FlowLayout in android.the picture shows the third item in first row is half out of the screen

<List  horizontal={true} 
                            scrollEnabled={false}
                            style={{flexWrap: "wrap"}}
                            dataArray={articleData.Types}
                              renderRow={(Type) =>
                                <ListItem style={{borderBottomWidth: 0}} content>
                                    <Button rounded>
                                    <Text>{Type.Name}</Text>
                                    </Button>
                                </ListItem>
                            }>
                            </List>

Resolved using this https://stackoverflow.com/questions/29394297/listview-grid-in-react-native — safina, Oct 31 '17 at 12:45

score 1 · Answer 1 · answered Nov 07 '19 at 16:41

Could use Views to achieve this:

<View style={styles.wrapContainer}>
    {DATA.map(data => {
      return (
        <View style={styles.buttonContainer} >
          <Button title={data.name}/>
        </View>
      )})
    }
  </View>

Working Example

react native horizontal list view with no scroll. How to wrap item?

1 Answers1