Not able to give gap between rows

[sinanverve7]

i want my 4 boxes in a grid like model with a gap of 10.

i was partially able to give width between columns by adjusting boxes width.but giving gap between rows is not working anyway?

i tried to increase boxes hight and give some padding/margin at bottom but it's not working at all.
i tried to increase boxes height and give some white space bottom of the box but boxes are overlapping each other as shown in second screenshot.

screen shot with increased box height

import { theme2 } from "@/src/app/theme2";
import { MyProfilePhoto } from "@/src/store/fe

atures/edit-profile/types";
import cnStyles from "@/src/styles";
import React, { useEffect, useState } from "react";
import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
import { DraggableGrid } from "react-native-draggable-grid";
const width = Dimensions.get("window").width;

type PropType = {
  myphotos: MyProfilePhoto[];
  onChangeScrollEnable: (val: boolean) => void;
};

export default function PhotosBlock({
  myphotos,
  onChangeScrollEnable,
}: PropType) {
  const myPhotosLen = myphotos.length;
  const [datatest, setDataTest] = useState([] as DataSet[]);

  useEffect(() => {
    const newData = ["1", "2", "3", "4"].map((item, index) => {
      const disable = index >= myPhotosLen;
      return {
        key: item,
        uri: disable ? "" : myphotos[index].image,
        disabledDrag: disable,
        disabledReSorted: disable,
      };
    });
    setDataTest(newData);
  }, [myphotos]);

  const PendingText = (
    <View style={styles.pendingText}>
      <Text style={styles.underveifytext}>Under Verification</Text>
    </View>
  );
  const MainPhotoSymbol = (
    <View style={styles.mainText}>
      <Text>Main</Text>
    </View>
  );

  const renderItem = (item: DataSet, index: number) => {
    if (index >= myPhotosLen) {
      return (
        <View style={[styles.slotWrapper]}>
          <View style={[styles.imageSlot]}>
            <Text style={cnStyles.plusText}>+</Text>
          </View>
          <View style={styles.slotChild}>
            {/* <Text>mohammed sinan</Text> */}
          </View>
        </View>
      );
    }
    return (
      <View style={[styles.slotWrapper]}>
        {item.uri && (
          <Image
            source={{ uri: item.uri }}
            resizeMode="cover"
            style={[styles.imageSlot]}
          />
        )}
        <>
          {myphotos[index]?.photostatus == "0" && PendingText}
          {index === 0 && MainPhotoSymbol}
        </>
        <View style={styles.slotChild}></View>
      </View>
    );
  };

  return (
    <>
      <View
        style={{
          flexDirection: "row",
          flexWrap: "wrap",
          justifyContent: "space-between",
          width: "100%",
          marginBottom: 20,
          flex: 1,
        }}
      >
        <DraggableGrid
          key={datatest.length}
          style={{
            flex: 1,
            justifyContent: "space-between",
          }}
          onDragStart={() => {
            onChangeScrollEnable(false);
          }}
          numColumns={2}
          // itemHeight={300}
          renderItem={renderItem}
          data={datatest}
          onDragRelease={(data) => {
            onChangeScrollEnable(true);
            setDataTest(data); // need reset the props data sort after drag release
          }}
        />
      </View>
    </>
  );
}
const styles = StyleSheet.create({
  slotWrapper: {
    // width: width * 0.5,
    height: 250,
    alignItems: "center",
    justifyContent: "space-between",
  },
  slotChild: {
    // width: width * 0.5,
  },
  imageSlot: {
    width: width * 0.45,
    height: 185,
    backgroundColor: "#fff",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: theme2.colors.borderColor,
    justifyContent: "center",
    alignItems: "center",

    // overflow: "hidden",
    // marginVertical: 10,
    // marginBottom: 44,
  },
  holdtext: {
    color: theme2.fonts.grayColor,
    textAlign: "center",
    width: "100%",
  },
  pendingText: {
    backgroundColor: theme2.colors.redcolor,
    position: "absolute",
    bottom: 0,
    width: "100%",
    padding: 5,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  underveifytext: { color: theme2.fonts.white, textAlign: "center" },
  mainText: {
    position: "absolute",
    left: 20,
    top: 44,
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    backgroundColor: theme2.colors.primary,
  },

  //

  item: {
    width: 100,
    height: 100,
    borderRadius: 8,
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
  },
  item_text: {
    fontSize: 40,
    color: "#FFFFFF",
  },
});

interface DataSet {
  key: string;
  uri: string;
  disabledDrag: boolean;
  disabledReSorted: boolean;
}

[appdeveloperdd]

@sinanverve7 You can use the itemHeight prop to create space between rows.

<DraggableGrid
  data={[]}
  numColumns={4}
  renderItem={renderItem}
  itemHeight={100}
/>