How can I achieve this 3 square layout in react native? - reactjs

Question

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',
},
});

Answer 1

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;