I am quite new with React native and I'm not sure how to implement this design:

Grid layout

I have 20px horizontal padding around the whole app and I want to size these squares so they would form like a large rectangle with these gaps in between. I don't really want to hardcode these sizes.

I managed to get the design without any gaps by dividing the total width by 3 and then giving the big square 2/3 and the small squares 1/3. But how can I do this with the gaps ?

const themedStyles = useThemedStyles();
  const width = Dimensions.get('window').width - 40;
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <ThemedText style={themedStyles.subHeader}>Trending</ThemedText>
        <ThemedText style={[themedStyles.accentText, {fontWeight: 'bold'}]}>
          See all
        </ThemedText>
      </View>

      <View style={styles.cardContainer}>
        <View
          style={{
            width: (width / 3) * 2,
            height: (width / 3) * 2,
            backgroundColor: 'white',
            borderWidth: 2,
          }}></View>

        <View>
          <View
            style={{
              width: width / 3,
              height: width / 3,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
          <View
            style={{
              width: width / 3,
              height: width / 3,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
        </View>
      </View>
    </View>
  );

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  cardContainer: {
    flexDirection: 'row',
  },
});

CodePudding user response：

See below Code maybe it will help you:

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

 const width = Dimensions.get('window').width - 40;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    padding:20
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex:1,
    backGroundColor:'red'
  },
  cardContainer: {
    flexDirection: 'row',
       justifyContent: 'space-between',
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
  

      <View style={styles.cardContainer}>
        <View
          style={{
            width: (width / 3) * 2,
            height: (width / 3) * 2,
            backgroundColor: 'white',
            borderWidth: 2,
          }}></View>

        <View style={{justifyContent: 'space-between'}}>
          <View
            style={{
              width: width / 3.5,
              height: width / 3.5,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
          <View
            style={{
              width: width / 3.5,
              height: width / 3.5,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
        </View>
      </View>
    </View>
  );

}

export default DisplayAnImage;