Multi Column and Rows Flex Box issue in React Native

Question

I'm having and Issue with Flex Box I'm trying to get this type of Grid View:

And I have tried a bunch of positions without any luck, the last one I tried is:

        return (
        <>
            <View style={styles.container}>
            <View style={styles.column}>
            <View style={styles.row}>
            <View style={[styles.box, { backgroundColor: 'yellow' }]} />
            </View>
            </View>
                <View style={styles.column}>
                    <View style={[styles.box, { backgroundColor: 'green' }]} />
                    <View style={[styles.box, { backgroundColor: 'lightblue' }]} />
                </View>
                <View style={styles.space_between_columns} />
                <View style={styles.column}>
                    <View style={[styles.box, { backgroundColor: 'grey' }]} />
                    <View style={[styles.box, { backgroundColor: 'purple' }]} />
                </View>
            </View>
        </>
    );
};
    
   
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            flexDirection:'row',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
          },
          row: {
            flexDirection:'row',
            justifyContent:'space-between',
            alignItems:'center',
            height:200,
            width:50
          },
          column: {
            flexDirection:'column',
            justifyContent:'space-between',
            alignItems:'center',
            height:200,
            width:50
          },
          space_between_columns:{
            width:100
          },
          box: {
            height:50,
            width:50
          }
    
    });

But instead of giving me the Top Section where I want it, it puts it like this:

Any Ideas?

Kind Regards

Answer 1

Working App: Expo Snack

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.text}>Header</Text>
      </View>
      <View style={{ padding: 10, flex: 1 }}>
        <View style={styles.topSection}>
          <Text style={styles.text}>Top Section</Text>
        </View>
        <View style={{ flexDirection: 'row', flex: 1 }}>
          <View style={styles.leftColumn}>
            <Text style={styles.text}>Left Column</Text>
          </View>
          <View style={styles.rightColumn}>
            <Text style={styles.text}>Right Column</Text>
          </View>
        </View>
        <View
          style={{
            height: 70,
            flexDirection: 'row',
          }}>
          <View style={styles.subLeft}>
            <Text style={styles.text}>Sub Left</Text>
          </View>
          <View style={styles.subRight}>
            <Text style={styles.text}>Sub Right</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'start',
    backgroundColor: 'black',
  },
  header: {
    height: 100,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
  },
  topSection: {
    height: 70,
    backgroundColor: 'yellow',
    justifyContent: 'center',
  },
  leftColumn: {
    flex: 1,
    backgroundColor: 'green',
    justifyContent: 'center',
  },
  rightColumn: {
    flex: 1,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
  },
  subLeft: {
    flex: 1,
    backgroundColor: 'grey',
    justifyContent: 'center',
  },
  subRight: {
    flex: 1,
    backgroundColor: 'purple',
    justifyContent: 'center',
  },
  text: {
    alignSelf: 'center',
    color: 'black',
    fontWeight: '800',
    fontSize: 20,
  },
});