react-navigation tab navigator Screens' contents are not shown / the screens are blank issue

Question

I have a problem with react-navigation tab navigator. Screens' contents are not shown / the screens are blank. any ideas ? This is my navigator structure:

import { StackNavigator, TabNavigator } from 'react-navigation';
import PeopleList from './PeopleList';
import CompanyList from './CompanyList';
import AddPerson from './AddPerson';
const Navigation = TabNavigator({
  People: { screen: PeopleList },
  Person: { screen: AddPerson },
  Company: { screen: CompanyList },
 }, {
 tabBarOptions: {
  activeTintColor: 'white',
  inactiveTintColor: '#80cbc4',
  swipeEnabled: true,
  showLabel: false,
  style: {
    backgroundColor: '#26a69a',
  },
 },
});
export default Navigation;

UPDATE:

this the App.js file which include render methods:

    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';
    import firebase from 'firebase';
    import {Provider} from 'react-redux';
    import {createStore} from 'redux'
    import Login from './Login';
    import Loader from './Loader';
    import Navigation from './Navigation';
    import reducers from '../reducers/PeopleReducer';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }
    });

    const store = createStore(reducers);

    export default class App extends Component {
      state = {
        loggedIn: null
      };

      componentWillMount() {
        firebase.initializeApp({
          apiKey: "xxxxxxxxxxxxxxxxxxx",
          authDomain: "xxxxxxxxxxxxxxxxxxx",
          databaseURL: "xxxxxxxxxxxxxxxxxxx",
          projectId: "xxxxxxxxxxxxxxxxxxx",
          storageBucket: "xxxxxxxxxxxxxxxxxxx",
          messagingSenderId: "xxxxxxxxxxxxxxxxxxx"
        });

        firebase
          .auth()
          .onAuthStateChanged((user) => {
            if (user) {
              this.setState({loggedIn: true});
            } else {
              this.setState({loggedIn: false});
            }
          });
      }

      renderInitialView() {
        switch (this.state.loggedIn) {
          case true:
            return <Navigation/> /*exists above*/
          case false:
            return <Login/>;
          default:
            return <Loader size="large"/>;
        }
      }
      render() {
        return (
          <Provider store={store}>
            <View style={styles.container}>
              {this.renderInitialView()}
            </View>
          </Provider>
        );
      }
    }

I'm sure it goes for the first case of switch, but got a blank screen and I don't know the reason.

Answer 1

render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          {this.renderInitialView()}
        </View>
      </Provider>
    );
  }
}

remove the tag navigation cannot be wrapped in a tag , like this.

render() {
    return (
      <Provider store={store}>

          {this.renderInitialView()}

      </Provider>
    );
  }
}

this will work then.