How to put 2 boxes in the same row and then put 2 more underneath? and so on

I am trying to put the elements of a 2 since what is a data .map and I can not put a divider DIV with a flexDirection: "row", I need to make a wrap and they are accommodated but doing it is not working correctly.

<View
  style={styles.container_cards}
>
  {
     data.map((elements, index) => {
        return(
           <CardTwoRows elements={elements}/>
        )
     })
   }
</View>

const styles = StyleSheet.create({
  container_cards: {
    width: "100%",
    height: "100%",
    marginTop: verticalScale(14),
    flexWrap: "wrap",
  },
})

My CardTwoRows, it basically contains this

<View style={styles.container}>
.........
</View>

const styles = StyleSheet.create({
  container: {
    width: "49%",
    height: verticalScale(220),
    borderRadius: scale(6),
    marginRight: "2%",
  },
})

This is a sample of how it looks, I need to show 2 then a space between the lines and 2 cards again

Solution

You can use a flatlist like this.

A working demo as well as the code below

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

const list = [0, 1, 2, 3, 4, 5, 6, 7];
export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={list}
        numColumns={2}
        keyExtractor={(item)=> item}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Text style={styles.text}>{item}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  card: {
    height: 100,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#212121',
    margin: 5,
    borderRadius: 10,
  },
  text: {
    fontSize: 40,
    fontWeight: '600',
    color: 'white',
  },
});