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?

Answer 1

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.