darrylsyms / fretwise-app-private

0 stars 0 forks source link

'setScreensWithoutTabBar' doesn't work with new StackNavigators inside of 'setFilterBottomTabsRoutes' #24

Closed darrylsyms closed 2 years ago

darrylsyms commented 2 years ago

The setScreensWithoutTabBar hook doesn't work with new StackNavigators inside of thesetFilterBottomTabsRoutes hook.

This issue is not really solvable given the nature of the custom StackNavigator. The only reason I wish to use my own StackNavigator is so that I can display my own MoreScreen so that I can adjust the header height of the MoreScreen. A better workaround would be to use a more specific hook that adjusts the MoreScreen Header.

Reproducing the issue

When replacing the MoreScreen by using the following hook:

   externalCodeSetup.navigationApi.setFilterBottomTabsRoutes((
        routes,
        metaMoreScreen,
        constructTabbarAllScreens,
        showTabBarOnAllScreens
      ) => {

        const NewMoreScreen = createStackNavigator(
          {
            "0": { screen: MoreScreeen },
            ...constructTabbarAllScreens()
          },
          {
            initialRouteParams: {
              item: metaMoreScreen,
              isMainNavigator: true,
              isShowingTabBarOnAllScreens: showTabBarOnAllScreens,
            },
            headerLayoutPreset: "center",
          }
        );

        return {
          ...routes,
          MoreScreen: NewMoreScreen
        }
      })

The setScreensWithoutTabBar hook no longer works with screens inside the custom MoreScreen component. For example, if I put the Groups component as an item within the MoreScreen, these will not work:

externalCodeSetup.navigationApi.setScreensWithoutTabBar([
        "GroupsSingleScreen",
        "GroupActivity",
])

If I remove the setFilterBottomTabsRoutes hook code above, the setScreensWithoutTabBar hook does work. It's only when I use the setFilterBottomTabsRoutes hook that the setScreensWithoutTabBar hook does not work.

darrylsyms commented 2 years ago

This would not need to be a problem if it were possible to edit the MoreScreen header height without needing to use the reusable MoreScreen component.