React-native-navigation: [v2] Multi-children stack ignores bottomTab options

[habovh]

Issue Description

I've been having some issues using setStackRoot, but it turns out I've just been misusing it. However, during my investigation I've discovered an issue. Hang tight, it's getting pretty... deep. Ahem.

If you call setRoot with bottomTabs, and one children is a stack layout that has more than one child, the options for this stack will be ignored, e.g. preventing setting the bottom tab name and icon.
However, having only one children in the said stack layout brings back the options, allowing to set the tab name and icon as expected.

Also, and this is what I'm currently stuck with, calling setStackRoot with bottomTabs and a stack, the icon and name also disappears.

Steps to Reproduce / Code Snippets / Screenshots

Works fine

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [
              { component: { name: 'RootComp' } }
            ],
            options: {
              bottomTab: { name: 'Messages' }
            }
          }
        },
        [... other tabs here]
      ]
    }
  }
})

Looks like

---

Missing bottom tab icon or name

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [
              { component: { name: 'RootComp' } },
              { component: { name: 'TopComp', passProps: { discussionId: 1 } } },
            ],
            options: {
              bottomTab: { name: 'Messages' }
            }
          }
        },
        [... other tabs here]
      ]
    }
  }
})

Looks like

Using setStackRoot

Using setStackRoot with the following parameters, on a perfectly working setRoot, leads to the icon and text disappearing:

Navigation.setStackRoot({
  bottomTabs: {
    children: [
      {
        stack: {
          children: [
            { component: { name: 'RootComp' } },
            { component: { name: 'TopComp', passProps: { discussionId: 1 } } },
          ],
          options: {
            bottomTab: { name: 'Messages' }
          }
        }
      }
    ]
  }
})

Also looks like

Side effects

Popping from the top level at this point works using pop, but not using the pop gesture, and does not fix the missing bottom tab text/icon.

---

Environment

• React Native Navigation version: 2.0.2418
• React Native version: 0.53.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info: Simulator, iOS 11, Debug

[habovh]

Little update on what I've tried so far.

I've discovered other options are taken in account. For example, bottomTabs.backgroundColor or bottomTab.badge works fine when using setRoot, even with a multiple children stack. It seems that only the whole options object is being completely ignored when calling setStackRoot. No matter what layout you pass as a parameter, the BottomTab loses its icon and text.

I've even tried using setDefaultOptions with a default text and icon for bottomTab, and it disappears as soon as I call setStackRoot, or does not even show up when calling setRoot with a multi-children stack.

Still investigating why this is happening, but I'd greatly appreciate some help on this!

[nicollecastrog]

@habovh your issue is interesting because I'm having the exact same one, except that my tab's text disappears even when the stack contains only one child:

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [
              {
                component: {
                  id: "tab1",
                  name: "Home"
                }
              }
            ],
            options: {
              bottomTab: {
                text: "Home"
              }
            }
          }
        },
        {
          component: {
            id: "tab2",
            name: "Hello",
            passProps: {
              text: "This is tab 2"
            },
            options: {
              bottomTab: {
                text: "Tab 2"
              }
            }
          }
        }
      ]
    }
  }
});

Looks like:

... when the bottomTabs's children was comprised of two simple components (like what Tab 2 still is), both tabs' text rendered fine. As you mentioned, I also tried using setDefaultOptions to set the text, and no luck.

I'm also testing on iOS 11, via simulator, using Debug. Sorry I don't have a solution to contribute, I'll keep digging.

[toadums]

I found that if you include an icon in your options it works. But if you have a stack, and do not provide an icon it doesn't render anything

[habovh]

@toadums For the sake of the issue’s readability I did not include the icon in my snippets but I do have them in my app. That’s probably something worth pointing out!
Also, are you talking about setRoot or setStackRoot?
For that matters icon and title works for me only using a single-children stack with setRoot. Any call to setStackRoot on the said stack results in icon/name loss.

[smooJitter]

Im having the same problem. A more general question, what’s the point of having a ‘stack’ on a bottom tab? I assume it enhances performance. I’m having a difficult time wrapping my head around the notion of “stacks”. This is only one of several odd and unpredictable behaviors

[habovh]

@smooJitter As I understand it, a stack is a RNN layout type that allows you to push to and pop component layouts from. In the most common use case for bottomTabs, one would be likely to push component layouts onto the currently selected tab. Hence the need to initialize your bottomTabs with stacks. However, you might want to initialize one bottomTab with a single component layout type, should you not want to push another component on top of it. Correct me if I’m wrong, but after asking myself the same question that’s what I’ve deduced from using it...

[smooJitter]

@habovh, After playing around with different configuration, I reach the same conclusion. It’s also buried in the documation related to modals. It’s cool because once can switch between tabs yet maintain stack position of each. Also, not that I have a use case for such, it appears one can programmatically switch between tabs and to specific positions of a tag stack.

Speaking of which, the stacks are a bit buggy. I encounter unpredictable behaviors when push screens to the stack. For example, I set up three screens, List, Detail, Home. For playground purpose, each screen can push itself along with the others. The stack is initiated with the Home screen. I can contiously push multuple instances of the Home or stack root screen. But I run into problems pushing Home > Home > Detail > List > List... at some point I’m not allowed to push the other screens. No error, the buttons just stop working.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[habovh]

Now that's a useful stale reminder!
I did not check whether the issue was still happening because I figured out another way that works in my case.
Turns out it's working fine, at least now I'm on 2.0.2513 (I originally reported the issue on 2.0.2418) and I was able to initialize a multi-children stack layout using setRoot without breaking the options. So I'll go ahead and close this issue.