react-nativemap-function

How to create grid structure in react native map function?

I want to create a grid structure 4*5. creating this I can wrap a view with flexDirection:"row" with every 4 views. But I am rendering this through map function.

    <View style={{ alignItems: "center" }}>
      {this.props.color.primary.map((color) => {
        return <View key={color.key} style={[styles.color, { backgroundColor: color.code }]} />
      })}
    </View>

I need to wrap inner view with View style={{flexDirection:"row"}} after every 4 View. How to achieve this. Or else is there any other solution to achieve this?

Solution

  • Try to use React Natives Flatlist. Every Item from an array gets rendered very efficient and you can style them to your needs. https://reactnative.dev/docs/flatlist