how to style elements in an array as a table in React Native

Question

How can I style 24 elements in an array with a table of 4 columns and 6 rows?

The array has 24 elements like this:

const words = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x" ]

and I map them over in render method:

<View>
  {words.map((word, id) => (
    <View key={id}><Text>{word} </Text></View>
  ))}
</View>

First you'll want to chunk your array into sub-arrays of 4 each, so it looks like [["a", "b", "c", "d"],["e", "f", "g", "h"]... -- you can use lodash.chunk for this. — TKoL
– TKoL, Commented Jun 13, 2019 at 13:59

MorKadosh · Accepted Answer · 2019-06-13 14:09:21Z

1

You can use some simple flex properties:

const styles = StyleSheet.create({
  table: {
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  cell: {
    flexBasis: '25%',
    flex: 1,
    borderWidth: 1
  }
});

And then:

<View style={styles.table}>
  {words.map((word, id) => (
    <View style={styles.cell} key={id}><Text>{word} </Text></View>
  ))}
</View>

https://snack.expo.io/@morkadosh/mad-salsa

answered Jun 13, 2019 at 14:09

MorKadosh

6,0053 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to style elements in an array as a table in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related