issues with margin and flex in react native

I’ve been trying to add a margin so the borders arent touching the edges of the screen. however, when i try to, my grid will wrap and start a new row instead of staying in the same spot. i have to keep my values responsive so i can’t set my boxes to be a specific #.

I am using react native and here is a snippet of how the grid looks before margin+ after adding margin:

my code:

import React from 'react';
import { StyleSheet, View, Text, SafeAreaView, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window'); 
const size = Math.min(width, height) / 3; 

const Grid = () => {
  return (
    <SafeAreaView style={styles.safeArea}>

      <View style={styles.container}>

        <View style={styles.row}>

          <View style={styles.box}>
            <Text style={styles.text}>1</Text>
          </View>
          <View style={styles.box}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.box}>
            <Text style={styles.text}>3</Text>
          </View>

        </View>



      </View>

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    //margin: 10,
  },
  box: {
    width: size,
    height: size,
    justifyContent: 'center',
    borderWidth: 1
  },
  row: {
    flexDirection: 'row', 
    flexWrap: 'wrap',
  },
});

export default Grid;

i added the following to my box styling:

    flex: 1,
    aspectRatio: 1,
    borderWidth: 1

this fixed the boxes being pushed around but now my text is weirdly spaced at the top. if anyone could help me figure out how to fix this it’d be much appreciated!