Размещение заголовка над MaterialTopTabNavigator и применение SafeAreaView

Question

Я хочу создать панель заголовков над моим MaterialTopTabNavigator, используя switchNavigator и поместив кнопку в панель заголовков, которая не блокируется надрезом iPhoneX.

Всякий раз, когда я пытался поместить safeAreaView, это не работает с MaterialTopTabNavigator.

export const HomeMaterialTopTabNavigator = createMaterialTopTabNavigator({
    Men: MenScreen,
    Women: WomenScreen,
    Kids: KidsScreen,
}, {
        tabBarComponent: MaterialTopTabBarWrapper,
        tabBarOptions: {
            activeTintColor: 'white',
            style: {
                backgroundColor: '#0BABD6'
            }
        },
        navigationOptions: {
            headerRight: (
                <Button 
                    title='Cart'
                    type='clear'
                    onPress = {async () => {
                        NavigationService.navigate('EditItemsScreen', {user: 'userName'})   } } />
            ),
        },
    }
);

class MaterialTopTabBarWrapper extends React.Component {
    render() {
        return (
            <SafeAreaView>
                <MaterialTopTabBar {...props}/>
            </ SafeAreaView>
        );
    }
}

В приведенном выше коде есть способ показать навигационные опции с помощью switchNavigator. navigationOptions отлично работает со stackNavigator.