Native Base Content is empty when using React Navigation 5

Question

I am trying to create a basic app with React Navigation 5 and Native Base. But it seems like React Navigation overrides of Native Base. The Content does not render simple text.

/**
 * @format
 */
import React from 'react';
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import NavigationInitializer from './route/NavigationSetup';
import { name as appName } from './app.json';
import { LogBox } from 'react-native';
import { Root, Container, Content, Header, Text, Footer } from 'native-base';
LogBox.ignoreAllLogs(); // remove unnecessary warnings
//  This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.

// AppRegistry.registerComponent(appName, () => NavigationInitializer);


AppRegistry.registerComponent(appName, () => () =>
    <Container>
        <Header>
            <Text style={{ color: "black" }}>
                HEADER
            </Text>
        </Header>
        <Content style={{ backgroundColor: "red" }}>
            <Text style={{ color: "black" }}>
                This is Content Section
            </Text>
        </Content>
        <Footer>
            <Text style={{ color: "black" }}>
                This is Footer Section
            </Text>
        </Footer>
    </Container>
);

Answer 1

Ok. I resolved it by upgrading React native and native base.

https://github.com/GeekyAnts/NativeBase/issues/3204#issuecomment-667596807