React-native-navigation: [v2] topBar isn't showing in iOS

Created on 10 Feb 2018  路  1Comment  路  Source: wix/react-native-navigation

Issue Description

topBar isn't showing in iOS (can't test in Android because of a build issue). I have the side menu working fine.

Steps to Reproduce / Code Snippets / Screenshots

I have tried to set the topBar options using:

static get options() {
    return {
      topBar: {
        title: 'Collapse',
        textColor: 'black',
        textFontSize: 16,
        backgroundColor: 'red',
        hidden: false,
        drawUnder: false
      }
    }
  }

and

  componentDidMount() {
    Navigation.setOptions(this.props.componentId, {
      topBar: {
        title: 'Collapse',
        textColor: 'black',
        textFontSize: 16,
        backgroundColor: 'red',
        hidden: false,
        drawUnder: false
      }
    });
 }

Also:

function start() {
  registerScreens();
  Navigation.events().onAppLaunched(() => {
    Navigation.setRoot({
      sideMenu: {
        left: {
          component: {
            name: 'navigation.SideMenuScreen'
          }
        },
        center: {
          component: {
            name: 'navigation.HomeScreen'
          }
        }
      }
    });
  });
}

Environment

  • React Native Navigation version: 2.0.2121
  • React Native version: 0.53.0
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator, iOS 10.3.1

Most helpful comment

Solved this by putting the center component into a stack (undocumented).. Which is required for when using the topBar.

Navigation.setRoot({
      sideMenu: {
        left: {
          component: {
            name: 'navigation.SideMenuScreen'
          }
        },
        center: {
          stack: {
            children: [
              {
                component: {
                  name: 'navigation.HomeScreen',
                }
              }
            ],
            options: {
              topBar: {
                title: 'Collapse',
                textColor: 'black',
                textFontSize: 16,
                backgroundColor: 'red',
                hidden: false,
                drawUnder: false
              }
            }
          }
        }
      }
 });

>All comments

Solved this by putting the center component into a stack (undocumented).. Which is required for when using the topBar.

Navigation.setRoot({
      sideMenu: {
        left: {
          component: {
            name: 'navigation.SideMenuScreen'
          }
        },
        center: {
          stack: {
            children: [
              {
                component: {
                  name: 'navigation.HomeScreen',
                }
              }
            ],
            options: {
              topBar: {
                title: 'Collapse',
                textColor: 'black',
                textFontSize: 16,
                backgroundColor: 'red',
                hidden: false,
                drawUnder: false
              }
            }
          }
        }
      }
 });
Was this page helpful?
0 / 5 - 0 ratings