navigation.js

import React, { Component } from 'react';
import { Text } from 'native-base';
import { StackNavigator, TabNavigator, TabBarTop } from 'react-navigation';

import Login from '../components/Login';
import Home from '../components/Home';
import Works from '../components/Works';
import TaskList from '../components/TaskList';
import Task from '../components/Task';

const tabs = TabNavigator({
    Works: {
        screen: Works,
        navigationOptions: {
            tabBarLabel: 'OBRAS',
            tabBarIcon: null
        }
    },
    TaskList: {
        screen: TaskList,
        navigationOptions: {
            tabBarLabel: 'TAREFAS',
            tabBarIcon: null
        }
    }
},
    {
        tabBarPosition: 'top',
        tabBarComponent: TabBarTop,
        tabBarOptions: {
            style: {
                backgroundColor: '#0C61AA'
            },
            labelStyle: {
                fontWeight: '900'
            },
            indicatorStyle: {
                backgroundColor: '#FFDF13',
                height: 5
            }
        }
    })

const routes = {
    Login: {
        screen: Login,
        navigationOptions: {
            header: null
        }
    },
    Home: {
        screen: tabs,
        navigationOptions: {
            headerStyle: {
                shadowOpacity: 0,
                backgroundColor: '#0C61AA',
                height: 50,
                elevation: 0
            },
            headerLeft: null,
            headerRight: <Text style={{ color: '#fff', marginRight: 10, fontWeight: '900', fontSize: 12 }}>SAIR</Text>
        }
    },
    Task: {
        screen: Task,
        navigationOptions: {
            header: null
        }
    }
};

const configuration = {
    headerMode: 'screen',
    initialRouteName: 'Login'
};

const stack = StackNavigator({
    Login: { screen: Login }
}, {
        headerMode: 'none'
    })

export const Root = StackNavigator(routes, configuration);