J'aimerais avoir de l'aide pour créer une grille d'images dans React Native.

J'essaie de créer une grille d'images en utilisant des données mappées dans un tableau. La partie mappage fonctionne bien, mais les images ne sont pas placées comme je le souhaite. Voici ce que je recherche (image placée là où se trouve le carré rouge) :

Voici mon code jusqu'à présent :

<ScrollView style={{flex: 1,  backgroundColor: 'yellow', 
    }} >
        {data.map(image => (
          <View style={styles.viewpic}>
           <Image style={styles.image} source={{uri:image.url }}/>
           </View> 
           ))}
       </ScrollView>
    </SafeAreaView>

Voici mon CSS :

viewpic: {
    flex: 1,
    flexWrap:'wrap',
    justifyContent: 'center',
    flexDirection: 'row',
     backgroundColor: 'blue',
  },
  image: {
    justifyContent: 'center',
    height: 115,
    width: 115,
    margin:6,
    backgroundColor: 'red',
  }

Voici ce que j'ai obtenu jusqu'à présent :

Jusqu'à présent, j'ai essayé toutes les combinaisons CSS auxquelles je peux penser, mais rien n'a fonctionné jusqu'à présent. J'ai également essayé FLATLIST, mais pour être honnête, je n'ai pas pu convertir correctement mon code actuel pour « répondre » aux exigences des Flatlists.

Merci à tous pour votre aide ! acclamations!