REACT NATIVE - SIMPLE LAYOUT FLEX EXAMPLE

 import React from 'react';

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

// create a component

const App = () => {

return (

<SafeAreaView style={styles.safeAreacontainer}>

<View style={styles.mainContainer}>

<View style={styles.box1} />

<View style={styles.box2} />

<View style={styles.box3} />

</View>

</SafeAreaView>

);

};

// define your styles

const styles = StyleSheet.create({

safeAreacontainer: {

flex: 1,

},

mainContainer: {

flex: 1,

flexDirection: 'column',

},

box1: {

flex: 1,

backgroundColor: '#4C6663',

},

box2: {

flex: 8,

backgroundColor: '#C9D7F8',

},

box3: {

flex: 1,

backgroundColor: '#7D4767',

},

});

//make this component available to the app

export default App;