I just started with react native, I wanted to align card images next to each other (react-native-elements) but it does not work for some reason. What I want to achieve is two rows in on phones and 3 rows on tablets. But for some reason my code does not work. First the cards are aligned connected to each other no space between them and on my phone (Iphone 12) it is aligned as a column. Even though I have set flex-direction to row. could someone look at my code and tell me what is wrong?

card-image element

<View style={styles.secondPartOfDisplay}>
        {categories.map((c,i) => {
          return (
                <View key={i} style={{width: 200, height: 150, flexDirection: 'row'}}>
                  <Card.Image >
                <Image
                    style={{width:200,height:150}}
                    resizeMode="cover"
                    source={c.imageSource}
              />
                  </Card.Image>

                </View>
          )
        })}

      </View>

styles:

secondPartOfDisplay: {
    paddingTop: 30,
    display:'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: "space-between"
  },

And here is the image on how it looks on phone:

This is how it looks on ipad: