Native-base doesn't show footer component in my view React-native - react-native

Question

I'm triyng to use the Footer component from native-base in my view, but i can't see nothing when i implement the code from: Footer component native-base
I don't know if maybe is a bug or if i need implement an aditional option in my code.
My code:
(I dont show Login.tsx because only use footer in Home view)'.
App.tsx
import {createStore} from 'redux';
import rootReducer from './Store/Reducers/Reducers';
const store = createStore(rootReducer);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({ loading: false });
}
render(){
if (this.state.loading) {
return (
<Root>
<AppLoading />
</Root>
);
}
else {
return (
<Provider store={store}>
<Root>
<NavigationContainer>
<Navigator/>
</NavigationContainer>
</Root>
</Provider>
);
}
}
}
Navigator.tsx
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'
import Register from '../Views/Register'
const Stack = createStackNavigator();
const Navigator= () =>{
return (
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{headerShown:false}}/>
<Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
<Stack.Screen name="Register" component={Register} options={{title:'Register.'}}/>
</Stack.Navigator>
);
}
export default Navigator;
Home.tsx (Only the footer here)
import React from 'react'
import {Footer, Icon, Button, Text, FooterTab, Container} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'
const Home =(props) => {
const {users} = props;
return(
<Container style={Styles.container}>
{users.list !== undefined && users.list.length>0 ?
users.list.map(user=> (
<Text>Hello {user.nick}</Text>
))
: null
}
<Footer>
<FooterTab>
<Button vertical>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button vertical>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button vertical active>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
const mapStateToProps=(state)=>{
const {users} = state;
return {users};
}
export default connect(mapStateToProps)(Home);
The result in Home:

Answer 1

Try add Content before Footer, like that, Content is also imported from native-base, if it's still not working, try removing the style of the container
<Container>
<Content><Text>dsdsds</Text></Content>
<Footer>
<Button vertical>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
</Footer>
</Container>