Дочерний элемент с размерами » % » не отображается с помощью родительского элемента flexbox

#react-native #react-native-ios

Вопрос:

Новичок в react-родной, но я продолжаю сталкиваться с досадной ошибкой, когда дочерний компонент отображается перед родительским и показывает размерность = 0

 //TOP VIEW
<View style= {{flex: 'column'}} >
    {/* Child level 1 */}
    <View style = {{flex : 0.5, backgroundColor : 'green'}} >
        {/* Child level 2 */}
        <View style = {{width : '80%', height : '80%', backgroundColor : 'orange'}} 
        onLayout = {(event) => {console.log(event.nativeEvent.layout.width, event.nativeEvent.layout.height);} }/>
    </View>
    
    <View style = {{flex : 0.5, backgroundColor : 'blue'}} >

</View>
 

Дочерний элемент на уровне 2 не отображается с ожидаемыми размерами. В журнале консоли отображается значение мусора, например (390,0).

Должен ли ребенок 2 отображаться только после ребенка 1 ?