0

In my react native app I'm trying to simulate grid view and center it, but currently I can't achieve it without moving last row to the center (which is incomplete). It should be aligned to the left like first row.

export const GridComponent = () => {
  return (
    <View style={styles.container} bg="amber.100">
      <Box style={styles.item} width={150} height={150} bg="blue.100" />
      <Box style={styles.item} width={150} height={150} bg="blue.100" />
      <Box style={styles.item} width={150} height={150} bg="blue.100" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    background: 'red',
  },
  item: {
    margin: 10,
  },
});

Not valid Grid.

Added marginRight: 'auto' to the item class isn't solution because then whole grid isn't centered:

Not valid Grid with marginRight.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Monkey D. Teach
  • 137
  • 2
  • 8
  • also, **grid** used a `place-items: center` that can help you (I don't know if it working on React-Native, never used it, but In Normal, React works, try and tell me it is working) it isn't working try see this https://stackoverflow.com/questions/49971715/how-center-components-using-flex-in-react-native – Laaouatni Anas Jul 21 '22 at 08:19
  • https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-or-specific-row – Paulie_D Jul 21 '22 at 08:27
  • @LaaouatniAnas can't use this property in react native. – Monkey D. Teach Jul 21 '22 at 09:14
  • @Paulie_D the question is about React Native, not React, so I can't use the solution which you provided – Monkey D. Teach Jul 21 '22 at 09:15

0 Answers0