react-native - フレックスボックスはネイティブに反応すると予想されませんか?

Question

flex-boxを使ってreactネイティブアプリのUIをデザインしています。しかし、コードは期待される結果を示していませんか?

問題

の Margin プロパティInnerContainer2がmargin:'5%'垂直方向の等間隔をカバーしていません。

コード：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.innerContainer1}>
          <View style={styles.innerContainer2}>
            <Text style={styles.welcome}>This is live reload</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  innerContainer1: {
    flex: 1,
    width: '80%',
    margin: '10%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgrey'
  },
  innerContainer2: {
    flex: 1,
    width: '80%',
    margin: '5%',
    height: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  welcome: {
    textAlign: 'center',
    margin: 10,
  }
});

期待される出力

実際の出力