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 (

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

  }
}


 });