Nativebase Footer Tabs with react-navigation 5 BottomTabNavigator

App.js

import React from 'react';
import {
  Container,
  Header,
  Content,
  Footer,
  FooterTab,
  Button,
  Icon,
  Text,
  View,
} from 'native-base';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const Home = () => {
  return (
    <React.Fragment>
      <Header />
      <Content>
        <View>
          <Text>Home</Text>
        </View>
      </Content>
    </React.Fragment>
  );
};

const Settings = () => {
  return (
    <React.Fragment>
      <Header />
      <Content>
        <View>
          <Text>Settings</Text>
        </View>
      </Content>
    </React.Fragment>
  );
};

const BottomNavigation = ({state, descriptors, navigation}) => {
  return (
    <Footer>
      <FooterTab>
        {state.routes.map((route, index) => {
          const {options} = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <Button
              active={isFocused}
              vertical
              onPress={onPress}
              onLongPress={onLongPress}
              key={index}>
              <Icon name={options.icon} />
              <Text>{label}</Text>
            </Button>
          );
        })}
      </FooterTab>
    </Footer>
  );
};

const App = () => {
  return (
    <Container>
      <NavigationContainer>
        <Tab.Navigator tabBar={props => <BottomNavigation {...props} />}>
          <Tab.Screen name="Home" component={Home} options={{icon: 'home'}} />
          <Tab.Screen
            name="Settings"
            component={Settings}
            options={{icon: 'settings'}}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </Container>
  );
};

export default App;

I tried tihis, but it shows header. But content is empty.

I how to change bg color and other ?? i try but nothing