How To navigate from createMaterialTopTabNavigatorto other screen - React Navigation?

Question

I have some issue when navigating from top Tabnavigator to other screens so my app navigation is

My Orders Screen from Drawer => Top TabNavigatore (Accepted/Completed) => Order Details

In Route.js I put every single navigation I want like Drawer - Auth navigation and so on, and I put a StackNavigator contain the Orders Screen like this:

const OrdersStack = createStackNavigator({
  Orders: {
    screen: Orders,
    navigationOptions: ({ navigation }) => ({
      headerLeft: (
        // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
          />
        </TouchableOpacity>
      ),
      headerRight: <View />,
      title: "My Orders",
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  }
});

In the Orders.js I put these:

import React, { Component } from "react";
import { createAppContainer, createStackNavigator } from "react-navigation";
import NavTabs from "../screens/NavTabs";
import NavOrderDetails from "../screens/NavOrderDetails";

// create a component
export default class Orders extends Component {
  render() {
    return <MyOrdersScreen />;
  }
}

export const root = createStackNavigator({
  NavTabs: NavTabs,
  NavOrderDetails: NavOrderDetails
});

const MyOrdersScreen = createAppContainer(root);

As I mentioned in Orders.js it Contains Tabs and Order Details

In Tabs, I'm creating a createMaterialTopTabNavigator

import { createMaterialTopTabNavigator } from "react-navigation";
import AcceptedOrders from "../screens/AcceptedOrders";
import CompletedOrders from "../screens/CompletedOrders";

const MainTabs = createMaterialTopTabNavigator(
  {
    Accepted: { screen: AcceptedOrders },
    Completed: { screen: CompletedOrders }
  },
  {
    tabBarOptions: {
      activeTintColor: "#fff",
      inactiveTintColor: "#ddd",
      tabStyle: {
        justifyContent: "center"
      },
      indicatorStyle: {
        backgroundColor: "#fcc11e"
      },
      style: {
        backgroundColor: "#2F98AE"
      }
    }
  }
);
export default MainTabs;

and another screen is OrderDeatils.js

import { createStackNavigator } from "react-navigation";
import OrderDetails from "../screens/OrderDetails";
import React, { Component } from "react";
import { View } from "react-native";
const OrderDetailsStack = createStackNavigator({
  OrderDetails: {
    screen: OrderDetails,
    navigationOptions: () => ({
      title: "Order Details",
      headerRight: <View />,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        flex: 1,
        elevation: 0,
        fontSize: 25
      }
    })
  }
});
export default OrderDetailsStack;

Here are a screenShots it should explain what I mean

1- My Orders

2- Order Details

Answer 1

If i understand, you are concerned about the blank header that appears on top of the screen under your first header.

That one is created by createStackNavigator .

A the first Stack that creates the first Header named OrdersStack .

Inside that you have the root constant (probably, as there isn't the full code) that is creating the second header.

Inside root you are then defining your createMaterialTopTabNavigator with your two screens, that's showing the topBar with the label "accepted" and "completed".

To hide that white space you have to disable your root header doing:

export const root = createStackNavigator({
  NavTabs: NavTabs,
  NavOrderDetails: NavOrderDetails
},
   {
     defaultNavigationOptions:{
       header:null
   }
});

UPDATE.

You have two ways to fix this and still have a backButton:

1) You can either create a parent CustomHeader that, using react-navigation's withNavigation HOC, is aware about his childrens navigation state.

2) Dinamically hide the parent header when the second one is showing. You can accomplish this using this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false}) then your OrdersStack would be:

 const OrdersStack = createStackNavigator({
Orders: {
  screen: Orders,
  navigationOptions: ({ navigation }) => {
    var defaultHeader={
        headerLeft: (
        <TouchableOpacity
            onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
            <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
            />
        </TouchableOpacity>
        ),
        headerRight: <View />,
        title: "My Orders",
        headerTintColor: "#2F98AE",
        headerStyle: {
        borderBottomColor: "white"
        },
        headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
        }
    }
    if (navigation.state.params)
        return(navigation.state.params.showHeader?{defaultHeader}:null)
    else return defaultHeader

  }
}


 });