React-native-navigation: [V2] Topbar button won't show

[mdelclaro]

Issue Description

Topbar buttons won't show. I can see the allocated space for it, but it is not there. Am I missing something?

Steps to Reproduce / Code Snippets / Screenshots

My navigation.js

(...)
const startApp = () => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        id: 'sideMenu',
        left: {
          component: {
            id: 'leftDrawer',
            name: 'motoapp.Screen2'
          }
        },
        center: {
          stack: {
            id: 'navStack',
            children: [
              {
                component: {
                  id: 'Home',
                  name: 'motoapp.Home'
                },
              },
            ],
            options: {
              topBar: {
                title: {
                  text: 'Moto App'
                }
              }
            }
          }
        }
      }
    }
  });
};

My Home.js

(...)
static get options() {
    return {
      topBar: {
        title: {
          text: 'Moto App',
          animate: true,
          drawBehind: true,
          buttonColor: 'black',
          testID: 'topBar',
        },
        leftButtons: [
          {
            id: 'menuButton',
            text: 'Menu',
            component: {
              name: 'motoapp.Screen2'
            },
          }
        ]
      }
    };
  }
(...)

---

Environment

• React Native Navigation version: 0.56
• React Native version: 2.0.2555
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device 5.1.1

[guyca]

React components are not supported as left buttons

[mdelclaro]

Sorry, that "component" is there just because I was trying different things, but even without it, I see no buttons. Shouldn't just an "id" and "text" show the button? Thanks.

Em 18 de set de 2018, às 03:19, Guy Carmeli <[email protected][e-mail]> escreveu:

React components are not supported as left buttons

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/wix/react-native-navigation/issues/3982#issuecomment-422268917, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AfbylIwp0FruAzo4NKLW4_sEEXdZUWTgks5ucJBhgaJpZM4WtKmm.

[guyca]

Textual left button is also not supported on Android. Only icon buttons are supported as left buttons on Android.

[mdelclaro]

Thank you very much for your attention.

[socceroos]

Is this a limitation of RNN 2 or is it a limitation imposed by the Android platform?

Is there any way around this? Perhaps there is some other topBar I can use to achieve the design we require? I've been searching for a while but have been unable to find a solution to this.

[zubko]

I think it's possible to make a custom component covering the whole top bar, which will render a custom button on the left. Maybe it's not for all cases, but for some cases this should work.