React Navigation (V2): How to set the Icon and the label of a stack Navigator inside a Drawer Navigator?

Question

I'm trying to customize my StackNavigator within my DrawerNavigator.

Here is my code:

const HomeStack = createStackNavigator(
  {
    HomeScreen,
    HomeDetailScreen,
    InteriorScreen,
    InteriorDetailScreen
  },
  {
    initialRouteName: "HomeScreen",
    navigationOptions: {
      headerTitleStyle: {
        color: headerColor
      },
      headerBackTitleStyle: {
        color: headerColor
      },
      headerTintColor: headerColor
    }
  }

const MainStack = createStackNavigator(
  {
    HomeStack,
    ChooseLocationScreen,
    FilterHomesScreen
  },
  {
    initialRouteName: "HomeStack",
    mode: "modal",
    navigationOptions: ({ navigation }) => {
      const options = {
        headerTitleStyle: {
          color: headerColor
        },
        headerBackTitleStyle: {
          color: headerColor
        },
        headerTintColor: headerColor,
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20, height: 20, tintColor: tintColor }}
          />
        )
      };
      if (navigation.state.routeName === "HomeStack") options["header"] = null;
      return options;
    }
  }
);

const MainDrawer = createDrawerNavigator(
  { MainStack },
  {
    initialRouteName: "MainStack",
    drawerBackgroundColor: backgroundColor,
    contentOptions: {
      inactiveTintColor: headerColor,
      activeTintColor: activeTintColor
    }
  }
);

My problem is, that within the DrawerNavigator, the item still just says "MainStack". But I would like it to say "Home" (which is the value of SCREEN_TEXT_HOME_HEADER) and I would like it to have the "home.png" icon. As you can see, I tried to change the navigation options according to the docs, but it somehow doesn't work. How can I achieve the correct icon and label?

Answer 1

Found the solution. After silly try and error, here is how I made it work:

  {
    Main: {
      screen: MainStack,
      navigationOptions: {
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20, height: 20, tintColor: tintColor }}
          />
        )
      }
    }
  }