How a proper RNN V2 structure looks like?

Question

I been trying to make a proper RNN V2 tree, but it's just doesn't make sense to me... given this example:

      root: {
            bottomTabs: {
                children: [
                    {
                        component: {
                            name: 'Main',
                            options: {
                                bottomTab: {
                                    text: 'Main',
                                },
                            },
                        },
                    },
                    {
                        component: {
                            name: 'Secondary',
                            options: {
                                bottomTab: {
                                    text: 'Secondary',
                                },
                            },
                        },
                    },
                ],
            },
        },
    }

So let's say I want to tell the Navigator to use red colour to the active bottom tab. If I want to achieve this then I need to add selectedTextColor to EACH COMPONENT

...component: {
   ...
   options: {
       ...
       selectedTextColor: 'red'
   }
}

Same with the bottomTabs visible, hide etc... How can I set it once in the parent, and let the children inherit these options?

This isn't really an answer but I suggest using react-navigation instead, the API is more straightforward and you can pass activeColors to navigation stacks instead of the individual components https://reactnavigation.org/ — Robbie Milejczak, Oct 12 '18 at 16:11

score 4 · Accepted Answer · answered Oct 13 '18 at 13:48

Options are resolved bottom-up for each BottomTab, therefore bottomTab options can be defined only once.

Let look at a slightly more complicated layout, taken from the playground app:

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabs',
      children: [
        {
          stack: {
            id: 'TAB1_ID',
            children: [
              {
                component: {
                  name: 'navigation.playground.TextScreen',
                  passProps: {
                    text: 'This is tab 1',
                    myFunction: () => 'Hello from a function!'
                  },
                  options: {
                    topBar: {
                      visible: true,
                      animate: false,
                      title: {
                        text: 'React Native Navigation!'
                      }
                    },
                  }
                }
              }
            ],
            options: {
              topBar: {
                visible: false
              },
              bottomTab: {
                text: 'Tab 1',
                icon: require('../images/one.png'),
                selectedIcon: require('../images/one.png'),
                testID: testIDs.FIRST_TAB_BAR_BUTTON
              }
            }
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'navigation.playground.TextScreen',
                  passProps: {
                    text: 'This is tab 2'
                  }
                }
              }
            ],
            options: {
              bottomTab: {
                text: 'Tab 2',
                icon: require('../images/two.png'),
                testID: testIDs.SECOND_TAB_BAR_BUTTON
              }
            }
          }
        },
        {
          component: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is tab 3',
              myFunction: () => 'Hello from a function!'
            },
            options: {
              topBar: {
                visible: true,
                animate: false
              },
              bottomTab: {
                text: 'Tab 3',
                icon: require('../images/one.png'),
                selectedIcon: require('../images/one.png')
              }
            }
          }
        }
      ],
      options: {
        bottomTabs: {
          titleDisplayMode: 'alwaysShow',
          testID: testIDs.BOTTOM_TABS_ELEMENT
        }
      }
    }
  }
});

As you can see, BottomTab options can be declared either in the stack options or in the component's options. This is because options are resolved for each tab from it's current layout tree. It's important to keep in mind options are resolved bottom-up, this means that deeper options (declared further from root) take precedence over higher options (declared closer to root).

Lets take a closer look at the BottomTab's first child. In this case it's a stack which declares bottomTab options. Any child pushed to this stack can override the stack's bottomTab options as it's deeper in the layout tree - The stack's options can be considered as default options.

Ohh so that how it's working! That made things a lot more clear :) Is there a way to merge the options in a child, instead of override it? — Istvan Orban, Oct 13 '18 at 14:14
Well, you can call [Navigation.mergeOptions()](https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=setting-styles-dynamically) to merge (update) a component options. — guy.gc, Oct 14 '18 at 07:12
@guy.gc if i want to hide the button text label for both android and ios what should we do? Tried with `titleDisplayMode: 'alwaysHide'` for android and `iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }` for ios but seems not working. Is there something else that we need to do as well ? — user7747472, Mar 22 '19 at 09:29
Just don't set title for tabs. Only icon is mandatory for BottomTab items. — guy.gc, Mar 24 '19 at 09:46

How a proper RNN V2 structure looks like?

1 Answers1