Menerapkan Container sebagai komponen dan menerapkan flex pada Container

components/Container.js

@@ -0,0 +1,15 @@
+import { View, StyleSheet } from 'react-native';
+
+const Container = ({ children, style }) => {
+    return <View style={[styles.container, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex:1,
+        flexDirection: 'column',
+        padding: 20,
+    },
+});
+
+export default Container;

screens/ScreenHome.js

@@ -1,22 +1,28 @@
-import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
+import Container from '../components/Container';
 
 const ScreenHome = ({ navigation }) => {
     return (
-        <View style={styles.container}>
-            <Text>Ini halaman Home</Text>
-            <StatusBar style="auto" />
-        </View>
+        <Container>
+            <View style={styles.header}>
+                <Text>Ini Header</Text>
+            </View>
+            <View style={styles.main}>
+                <Text>Ini Main Content</Text>
+            </View>
+        </Container>
     );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
+    header: {
+        flex:1, 
+        backgroundColor:"#FFDDDD"
     },
+    main: {
+        flex:3, 
+        backgroundColor:"#DDFFDD"
+    }
 });
 
 export default ScreenHome;