Example of nested react-navigation navigators

routes.js

import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

// Credits to @richardfickling 
// https://github.com/react-community/react-navigation/issues/686
function DismissableStackNavigator(routes, options) {
  const Navigator = StackNavigator(routes, options);
  return class extends Component {
    static router = Navigator.router;
    render() {
      const { state, goBack } = this.props.navigation;
      const navigation = {
        ...this.props.navigation,
        dismiss: () => goBack(state.key)
      };

      return <Navigator navigation={navigation} />;
    }
  };
}

const statusBarHeight = Platform.OS === 'ios' ? 20 : 24;

const headerStyle = {
  elevation: 1,
  paddingTop: statusBarHeight,
  height: (Platform.OS === 'ios' ? 44 : 56) + statusBarHeight
};

const DashboardNavigator = StackNavigator(
  {
    Index: {
      getScreen: () => require('./screens/Dashboard').default
    },
    ActivityDetail: {
      getScreen: () => require('./screens/ActivityDetail').default
    }
  },
  {
    initialRouteName: 'Index',
    navigationOptions: {
      headerStyle
    }
  }
);

const ProfileNavigator = StackNavigator(
  {
    Index: {
      getScreen: () => require('./screens/Profile').default
    }
  },
  {
    initialRouteName: 'Index',
    navigationOptions: {
      headerStyle
    }
  }
);

const RecordActivityNavigator = DismissableStackNavigator(
  {
    Index: {
      getScreen: () => require('./screens/RecordActivity').default
    },
    AddExercise: {
      getScreen: () => require('./screens/AddExercise').default
    },
    ActivitySummary: {
      getScreen: () => require('./screens/ActivitySummary').default
    }
  },
  {
    initialRouteName: 'Index',
    navigationOptions: {
      headerStyle
    }
  }
);

const TabsNavigator = TabNavigator(
  {
    Home: {
      screen: DashboardNavigator,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) =>
          <Icon
            name={`ios-calendar${focused ? '' : '-outline'}`}
            color={tintColor}
            size={25}
          />
      }
    },
    Profile: {
      screen: ProfileNavigator,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) =>
          <Icon
            name={`ios-contact${focused ? '' : '-outline'}`}
            color={tintColor}
            size={25}
          />
      }
    }
  },
  {
    initialRouteName: 'Home',
    tabBarPosition: 'bottom',
    tabBarComponent: TabBarBottom,
    tabBarOptions: {
      style: {
        height: 60
      },
      labelStyle: {
        fontSize: 15,
        marginBottom: 7
      }
    },
    swipeEnabled: false,
    animationEnabled: false,
    backBehavior: 'none'
  }
);

const AppNavigator = StackNavigator(
  {
    Tabs: {
      screen: TabsNavigator
    },
    RecordActivity: {
      screen: RecordActivityNavigator
    }
  },
  {
    mode: 'modal',
    initialRouteName: 'Tabs',
    headerMode: 'none'
  }
);

const defaultGetStateForAction = AppNavigator.router.getStateForAction;

AppNavigator.router.getStateForAction = (action, state) => {
  return defaultGetStateForAction(action, state);
};

export default AppNavigator;