Can't Wrap Navigator in SafeAreaView

Question

When running the app on the iPhone X simulator the Material Top Tab Navigator cuts into the notch and bottom button.

To fix this I have tried to implement the SafeAreaView before applying the App Container and to wrap each individual screen in SafeAreaViews. This works to keep the text away from these areas but not the navigator.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator, SafeAreaView } from 'react-navigation';

class Calculator extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Calculator!</Text>
      </View>
    );
  }
}

class Camera extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Camera!</Text>
      </View>
    );
  }
}

class Solution extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Solution!</Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialTopTabNavigator(
  {
    Calculator,
    Camera,
    Solution
  },
  {
    tabBarPosition: 'bottom',
  }
);

const AppContainer = createAppContainer(TabNavigator);

class App extends Component {
  render() {
    return (
      <SafeAreaView>
        <AppContainer/>
      </SafeAreaView>
    );
  }
}

export default App;

When running this application, no errors are present. However, nothing renders. What I would expect is a tab navigator renders with three tabs that doesn't cut under the notch or bottom button.

Answer 1

give SafeAreaView a size

<SafeAreaView style={{ flex: 1 }}>
  <AppContainer/>
</SafeAreaView>

if AppContainer still spreads full screen,

change import { SafeAreaView } from 'react-navigation'

to import { SafeAreaView } from 'react-native'

Answer 2

You need to provide flex: 1 as style to the SafeAreaView Component

<SafeAreaView style={{flex: 1}}>
{/* Component here */}
</SafeAreaView>