Dr oscar
Dr oscar

Reputation: 415

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

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:

enter image description here

Upvotes: 0

Views: 565

Answers (1)

lam
lam

Reputation: 565

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>

Upvotes: 1

Related Questions