React-native-navigation: [v2] how to push screen outside bottomTabs stack

[redwind]

Issue Description

I have chat application with bottomTabs contain message,account tab in first screen, when press on row at message tab, it push new chat detail screen in message tab's stack. How can i push new screen to stack outside bottomTabs stack ?
Here is my setRoot config:

```
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'TAB1_ID',
children: [
{
component: {
name: constants.TAB_MESSAGE,
passProps: {
text: 'This is tab 1',
myFunction: () => 'Hello from a function!'
},
options: {
}
}
}
],
options: {
bottomTab: {
title: 'Tab 1',
},
topBar: {
visible: false
}
}
}
},
{
stack: {
children: [
{
component: {
name: constants.TAB_ACCOUNT,
passProps: {
text: 'This is tab 2'
}
}
}
],
options: {
bottomTab: {
title: 'Tab 2',
}
}
}
}
],
options: {
bottomTabs: {
tabColor: 'red',
titleDisplayMode: 'alwaysShow',
selectedTabColor: 'blue',
fontFamily: 'HelveticaNeue-Italic',
fontSize: 13,
}
}
}
}
});

```

Environment

• React Native Navigation version: v2.0.2349
• React Native version: 0.51
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator + Debug mode

[redwind]

Hi @guyca , is it bottomTab property only getted in stack, i try to config bottomTab option like this but it's not display:
Thanks !!!
```
Navigation.setRoot({
root: {
stack: {
options: {
topBar: {
visible: false,
hidden: true,
}
},
children: [
{
bottomTabs: {
options: {
bottomTabs: {
translucent: true,
hideShadow: false,
tabColor: 'red',
titleDisplayMode: 'alwaysShow',
selectedTabColor: 'blue',
fontFamily: 'HelveticaNeue-Italic',
fontSize: 13,
}
},
children: [{
component: {
name: constants.TAB_MESSAGE,

                            },
                            bottomTab: {
                                title: "Tab1",
                                icon: require('./src/assets/images/person.png'),
                                forceTitlesDisplay: true
                            }
                        }, {
                            component: {
                                name: constants.TAB_ACCOUNT,

                            },
                            bottomTab: {
                                title: "Tab2",
                                icon: require('./src/assets/images/person.png'),
                                forceTitlesDisplay: true
                            }
                        }]

                    }

                }
            ]
        }
    }
});

```

[support[bot]]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.

[a289459798]

+1

[a289459798]

@redwind add options: {bottomTabs: {visible: false}}

Navigation.push(this.props.componentId,
            {
                component: {
                    name: component,
                    passProps: {
                    },
                    options: {
                        bottomTabs: {
                            visible: false
                        }
                    }
                }
            });

[redwind]

thanks @a289459798 , i tried, but new screen still push in message tab's stack :(
I try to config new root like this then new screen pushed stack without bottomTabs but it get another issue, bottomTab config not working. Did you meet this issue ? thanks

Navigation.setRoot({
       root: {
           stack: {
               options: {
                   topBar: {
                       visible: false,
                       hidden: true,
                   }
               },
               children: [
                   {
                       bottomTabs: {
                           options: {
                               bottomTabs: {
                                   translucent: true,
                                   hideShadow: false,
                                   tabColor: 'red',
                                   titleDisplayMode: 'alwaysShow',
                                   selectedTabColor: 'blue',
                                   fontFamily: 'HelveticaNeue-Italic',
                                   fontSize: 13,
                               }
                           },
                           children: [{
                               component: {
                                   name: constants.TAB_MESSAGE,

                               },
                               bottomTab: {
                                   title: "Tab1",
                                   icon: require('./src/assets/images/person.png'),
                                   forceTitlesDisplay: true
                               }
                           }, {
                               component: {
                                   name: constants.TAB_ACCOUNT,

                               },
                               bottomTab: {
                                   title: "Tab2",
                                   icon: require('./src/assets/images/person.png'),
                                   forceTitlesDisplay: true
                               }
                           }]

                       }

                   }
               ]
           }
       }
   });

[terreb]

@redwind, I have the same layout as you posted in your last message (tabs as a child of stack layout) and I'm facing a similar issue. Have you found a solution?

[itsakt]

Set root like this.

Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: SCREENS.HOME,
                    options: {
                      bottomTab: {
                        text: "Home",
                        icon: ICONS.IC_HOME
                      }
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    }
  });

Now you can push from this screen.

  Navigation.push(this.props.componentId, {
    component: {
      name: SCREENS.SETTINGS,
      options: {
        bottomTabs: {
          visible: false
        }
      }
    }
  });

[uinz]

Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            bottomTabs: {
              children: [
                {
                  component: {
                    name: "NewsScreen",
                    options: {
                      bottomTab: {
                        text: "News",
                        icon: HASH,
                        testID: "NewsScreen"
                      }
                    }
                  }
                },
                {
                  component: {
                    name: "SettingsScreen",
                    options: {
                      bottomTab: {
                        text: "Settings",
                        icon: SETTINGS,
                        testID: "SettingsScreen"
                      }
                    }
                  }
                }
              ]
            }
          } as any // ignore types error
        ]
      }
    }
  });

it works, but has types error
and can not set tabs title so sad