如何将SafeAreaView与Native Base的FAB组件和React Navigation结合在一起？

Question

如何将SafeAreaView与Native Base的Fab组件和React Navigation结合在一起？我的屏幕之一是GiftedChat组件，我无法（天真的）使两者一起工作，并且在文档中找不到我做错了什么。

我有

 const MainNavigator = createDrawerNavigator(
    {
        // ...
        Chatter: {screen: Chatter},  // A GiftedChat component
    },
    {
        initialRouteName: 'Chatter',
        hideStatusBar: true,
    } )

const MainAppContainer = createAppContainer(MainNavigator)

const BubbleMenu: FC = (): ReactElement => {
    const [ active, setActive ] = useState(false)

    return (
        <Fab
            // ...
        </Fab>

    )
}

const App = (): ReactElement => {
    return (
        <Provider store={ store }>
            <Root>
                <MainAppContainer  />
                <BubbleMenu />
            </Root>
        </Provider>
    )
}

除了FAB菜单的位置外，此方法都可以正常工作，但是如果我尝试通过安全地将其定位

            <SafeAreaView>
                <Root>
                    <MainAppContainer  />
                    <BubbleMenu />
                </Root>
            </SafeAreaView>

没有聊天组件可见，我无法导航