React Native nested navigation example. Fixed header navigation with nested tab navigation.

App.js

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

import MyStacksOverTabs from '../config/routes';

export default class NavigationScreen extends Component {
  render() {
    return (
      <MyStacksOverTabs />
    );
  }
}

routes.js

import React from 'react';
import { Button, Text, View } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1 }}>
        <Text> Welcome Home </Text>
        <Button title='Open FavScreen' onPress={() => { navigation.navigate('FavScreen') }} />
        <MyTabsNavigation screenProps={{ rootNavigation: navigation }} />
      </View>
    );
  }
}
class FavScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View>
        <Text>Favourites</Text>
        <Button title='Go Back' onPress={() => { navigation.goBack() }} />
      </View>
    );
  }
}
class Tab1 extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <Button title='Open Tab 2' onPress={() => { navigation.navigate('Tab2') }} />
    );
  }
}
class Tab2 extends React.Component {
  render() {
    const { navigation } = this.props;
    const { rootNavigation } = this.props.screenProps;

    return (
      <Button title='Open FavScreen' onPress={() => { rootNavigation.navigate('FavScreen') }} />
    );
  }
}

export const MyTabsNavigation = TabNavigator({
  Tab1: {
    screen: Tab1,
  },
  Tab2: {
    screen: Tab2,
  },
});

export default MyStacksOverTabs = StackNavigator({
  HomeScreen: {
    screen: HomeScreen,
  },
  FavScreen: {
    screen: FavScreen,
  },
},
  {
    mode: 'modal',
    headerMode: 'none',
  },
);