tab bar sticking to the top of my screen

[kale-stew]

I have a TabNavigator component being used to nav between a private and public view within my app, with the logout method being implemented in a button on my tab bar. Since I've implemented my firebase auth, the navigator is sticking to the top of my private screen. The test views I've coded (colored background & text) to see where the views are rendering tell me they're displaying below the TabNavigator now.

My TabNav component:

'use strict'

import React, { Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import { Image } from 'react-native';
import firebase from 'firebase';

// my views
import Login from './Login';
import ListView from './ListView';
import StoreView from './Stores';
import HouseholdView from './Household';
import SettingsView from './Settings';

// icons
import fav from '../assets/icon.png';
import user from '../assets/userIcon.png';
import lists from '../assets/listIcon.png';
import stores from '../assets/storesIcon.png';
import household from '../assets/householdIcon.png';
import settings from '../assets/settingsIcon.png';

class Tabs extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: 'lists'
        };
    }

    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item
                   selected={ this.state.selectedTab === 'login' }
                   title="Login/Logout"
                   renderIcon={ ()=> <Image source={user} />}
                   onPress={ () => firebase.auth().signOut() }
                ><Login/></TabNavigator.Item>

                <TabNavigator.Item
                   selected={ this.state.selectedTab === 'lists' }
                   title="Lists"
                   renderIcon={ ()=> <Image source={lists} />}
                   onPress={ ()=> this.setState({ selectedTab: 'lists' }) }
                ><ListView/></TabNavigator.Item>

                <TabNavigator.Item
                   selected={ this.state.selectedTab === 'stores' }
                   title="Stores"
                   renderIcon={ ()=> <Image source={stores} />}
                   onPress={ ()=> this.setState({ selectedTab: 'stores' }) }
                ><StoreView/></TabNavigator.Item>

                <TabNavigator.Item
                   selected={ this.state.selectedTab === 'household' }
                   title="Household"
                   renderIcon={ ()=> <Image source={household} />}
                   onPress={ ()=> this.setState({ selectedTab: 'household' }) }
                ><HouseholdView/></TabNavigator.Item>

                <TabNavigator.Item
                   selected={ this.state.selectedTab === 'settings' }
                   title="Settings"
                   renderIcon={ ()=> <Image source={settings} />}
                   onPress={ ()=> this.setState({ selectedTab: 'settings' }) }
                ><SettingsView/></TabNavigator.Item>
            </TabNavigator>
        )
    }
};

export default Tabs;

My 'Welcome' view (what a successfully signed in user should see):

import React, { Component } from 'react';
import { View } from 'react-native';

// my components
import { Header, Card } from './common';
import Tabs from './TabNavigator';

class Welcome extends Component {
  render() {
    return (
      <View>
        <Tabs />
      </View>
    )
  };
}

export default Welcome;

And finally, my App.js:

import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Header, Button, Spinner } from './components/common';
import firebase from 'firebase';
import Tabs from './components/TabNavigator';

// switch views 
import LoginForm from './components/Login';
import Welcome from './components/Welcome';

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

    // best time to initialize firebase is before the App.js renders 
    componentWillMount() {
        firebase.initializeApp({
            apiKey: "AIzaSyCx92Sr3Ap736MpsjDHPFeyH0pF3OMdOfk",
            authDomain: "dont-forget-it-45fc1.firebaseapp.com",
            databaseURL: "https://dont-forget-it-45fc1.firebaseio.com",
            projectId: "dont-forget-it-45fc1",
            storageBucket: "dont-forget-it-45fc1.appspot.com",
            messagingSenderId: "145638025239"
        });

        // figuring out whether or not the user has just signed in or out
        // decide which screen to display to a user dependent on auth
        firebase.auth().onAuthStateChanged( (user) => {
            if (user) {
                this.setState({ loggedIn: true });
            } else {
                this.setState({ loggedIn: false });
            }
        });
    }

    // should handle the 3 different cases: null, true, false 
    // switch between
    renderContent() {
        switch( this.state.loggedIn ) {
            case true:
                return (
                <View>
                    <Header headerText="inside"/>
                    <Tabs />
                </View>
                );

            case false:
                return (
                    <View>
                        <ScrollView>
                            <Header headerText="Welcome!" />
                            <LoginForm />
                        </ScrollView>
                    </View>
                ); 

            default: // case null: just keep spinning 
                return <View style={{ padding: 150 }}><Spinner size="large" /></View>;
        };
    }

    render() {
        return(
            <View>
                { this.renderContent() }
            </View>
        )
    }
};

export default App;

adding a position: 'absolute' style has changed nothing. Please advise...

[kale-stew]

Please excuse the unnecessary imports / other ESLint type oversights (whoops!)

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.