React-native-navigation: Custom Right Button not showing on Android

[witalobenicio]

I've created a Custom button to add in navbar but it only shows on iPhone.

function CartBadgeButton({style, itens_quantity}) {

  return (
    <View style={style || {}}>
      <Touchable
        onPress={() => {
          Navigation.handleDeepLink({link: 'show-cart'})
        }}
        background={Touchable.SelectableBackground()}
      >
        <View style={styles.iconContainer}>
          <Image
            style={styles.icon}
            source={Images.iconCart}
          />
          {itens_quantity > 0 &&
          <View style={[default_styles.badge18, {position: 'absolute', top: 0, right: 0}]}>
            <Text style={default_styles.badgeText}>{itens_quantity}</Text>
          </View>
          }
        </View>
      </Touchable>
    </View>
  );
}

const styles = StyleSheet.create({
  touchable: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 5,
    alignItems: 'center',
    elevation: 3,
  },
  iconContainer: {
    width: 36,
    height: 36,
  },
  icon: {
    tintColor: '#fff',
    width: 24,
    height: 24,
    margin: 6,
  },
  badge: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: config.Colors.redBadge,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
});

function mapStateToProps(state, ownProps) {
  return {
    itens_quantity: state.company.itens_quantity,
  };
}

export default connect(mapStateToProps)(CartBadgeButton);

And this is how I'm using it:

this.props.navigator.setButtons({
rightButtons: [
{
id: 'cart',
component: 'CartBadgeButton',
},
],
leftButtons: [
closeButton
]
});

[pqkluan]

Might be related to this.

[kevinmeyvaert]

We're facing the same issue on our app. No issues on iOS, yet custom component not showing on Android. As we're already passing props, linked issue above @pqkluan, is not relevant to this issue.

this.props.navigator.setButtons({
      rightButtons: [
        {
          component: SCREEN_IDS.SETTINGS_INDICATOR,
          passProps: {
            onIndicatorPress: () => navigateTo({
              link: SCREEN_IDS.UNIT_SETTINGS,
              navigator: this.props.navigator,
              config: { animated: true },
              currentLink: this.props.screenID,
            }),
          },
          id: 'settingsIcon',
        },
      ],
    });

just for your reference, here's the return value from the render function of our custom component.

<TouchableOpacity onPress={() => onIndicatorPress()}>
    {/* TODO: Change circle style bgColor depending on type (error/warning), awaiting object mock */}
    {activeIndicators &&
      activeIndicators.length > 0 && (
        <View style={[styles.circle, { backgroundColor: getColorForIndicator(activeIndicators) }]}>
          <Text style={styles.text}>!</Text>
        </View>
      )}
    <BaseIcon source={cog} iconTintColor={demoMode ? Colors.white : Colors.buttonBlue} iconSize={SIZE.LARGE} />
  </TouchableOpacity>

[bjacog]

@witalobenicio @kevinmeyvaert Are either of you setting height or width for the component? I have the same issue for the left button. Had the same issue for the right one as well, adding height and width seemed to resolve it for the right button only.

[kevinmeyvaert]

@bjacog Seems to do the trick! Might be useful to document this.

[tkulpa]

I followed guide on adding custom button to navbar and it wasnt showing up, https://wix.github.io/react-native-navigation/#/adding-buttons-to-the-navigator?id=custom-navigation-buttons
After @bjacog post i switched to rightButtons and it worked, any fix for leftButtons? I need it on left side

[bjacog]

@tkulpa The author of RNN has stated that leftButton using components are
not implemented because they did not need it. I would recommend using an
icon and id and respond to the is in onNavigatorEvent.

On Wed, 14 Feb 2018 at 17:51, tkulpa [e-mail] wrote:

I followed guide on adding custom button to navbar and it wasnt showing
up,
https://wix.github.io/react-native-navigation/#/adding-buttons-to-the-navigator?id=custom-navigation-buttons
After @bjacog https://github.com/bjacog post i switched to rightButtons
and it worked, any fix for leftButtons? I need it on left side

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/2597#issuecomment-365551105,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI1RnNFPgkkwbG8P4romFgIKelmlwO5ks5tUqyNgaJpZM4RtptQ
.

>

Regards / Groete
Jaco

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[jneuendorf]

What @bjacog is actually stated in the docs (which I found after reading this issue 😉 )

Additionally, ensure that the view is able to size itself, as custom navigation buttons will size depending on their content. Only width will be respected by the navigation bar; views can overflow outside of the navigation bar if they are too tall.