react-navigation header

router.js

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import type { UserStore } from './types'
import { View,Text,Button } from 'react-native'
import { TabNavigator,StackNavigator } from 'react-navigation'
import Home from './screens/Home'
import Profile  from './screens/Profile'
import Settings  from './screens/Settings'
import Login from './screens/Login'
import Practice from './screens/Practice'

const tabNavigatorConfig  = {
  initialRouteName: 'Practice',
  mode:'modal',
  tabBarPosition :'top',
  tabBarOptions:{
    activeTintColor: '#fff',
    labelStyle: {
      fontSize: 14,
    },
    style: {
      backgroundColor: '#34495e',
    },
  }

};

const AppNavigator = TabNavigator({
  Practice: {
    screen: Practice,
  },
  Home: {
    screen: Home,
  },
  Profile:{
    screen:Profile,
  }
}, tabNavigatorConfig)


const MainNavigator =  StackNavigator({
  AppNavigator: { screen: AppNavigator },
  Settings: { screen: Settings },
}, {
  initialRouteName: 'AppNavigator',
  mode: 'card',
  tintColor: '#ffffff',
  headerMode: 'screen',
  cardStyle: { backgroundColor: 'transparent' },
  navigationOptions : {
    headerStyle:{ backgroundColor: '#e74c3c'},
    headerTitleStyle:{ color: 'white'},
  }
})


type Props = {
  userStore: UserStore;
};

@inject('userStore')
@observer
export default class App extends Component {
  props: Props

  render(){
    const { userStore } = this.props
    return userStore.isLoggedIn ?  <MainNavigator />: <Login />
  }
}