In my react native app , I am using height and width in % . Then the inner views are not visible . But when I use height:300 or width:300 it is . Why?

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';import React from 'react';import globalStyles from '../../Utils/globalStyles';import Header from '../../Components/Header';function SelectQuestionTypePage() {    return (<View style={globalStyles.container}><Header /><Text style={styles.textStyle}>Choose your question type</Text><TouchableOpacity >  <View style={{ flexDirection: 'column', height: '80%', width: '80%', marginTop: 50 }}><View style={{ flex: 1, backgroundColor: 'red' }} /><View style={{ flex: 2, backgroundColor: 'darkorange' }} /><View style={{ flex: 3, backgroundColor: 'green' }} /></View></TouchableOpacity></View>    );}export default SelectQuestionTypePage;const styles = StyleSheet.create({    textStyle: {        color: 'white',        fontSize: 20,        fontWeight: 'bold',    },});

Expected Behavior is to see something of this , given in the pictureScreenshot of expected behavior

Where as current behavior doesnt achieve the same . What could be the reason for it