Ich würde gerne beim Aufbau eines Bildrasters in React Native helfen.

Ich versuche, ein Bildraster mit zugeordneten Daten in einem Array zu erstellen. Der Mapping-Teil funktioniert gut, aber die Bilder werden nicht so platziert, wie ich es möchte. Das ist es, was ich suche (Bild dort platziert, wo das rote Quadrat ist):

Das ist mein bisheriger Code:

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

Das ist mein CSS:

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

Das habe ich bisher bekommen:

Bisher habe ich jede CSS-Kombination ausprobiert, die mir einfällt, aber bisher hat nichts funktioniert. Ich habe auch FLATLIST ausprobiert, aber ehrlich gesagt konnte ich meinen aktuellen Code nicht richtig konvertieren, um den Anforderungen von Flatlists „zu entsprechen“.

Vielen Dank an alle für eure Hilfe! Prost!