React-native-navigation: custom topBar button, not clickable

[shakogele]

Issue Description

I added custom topBar to screen and added custom button inside the topBar, using TouchableOpacity, TouchableNativeFeedback but when I click on button nothing happens, onPress even alert not working

Steps to Reproduce / Code Snippets / Screenshots

this is my custom topBar

import React, { Component } from "react";
import { View, Text, TouchableOpacity, TouchableNativeFeedback, Platform } from "react-native";
import styles from './screenHeaderWithHamburgerStyles';
import Icon from "react-native-vector-icons/Ionicons";

class ScreenHeaderWithHamburger extends Component {
  showSideDrawer = () => {
      alert("showSideDrawer");
  };
  render(){
    const hamburgerButton = (
      <View style={styles.hamburgerButton}>
          <Icon name="ios-menu" size={30} color="#fff" />
      </View>
    );
    const hamburgerClickable = (Platform.OS === "android") ?(<TouchableNativeFeedback onPress={ () => this.showSideDrawer() }>
          {hamburgerButton}
        </TouchableNativeFeedback> ) : (<TouchableOpacity onPress={ () => this.showSideDrawer() }>{hamburgerButton}</TouchableOpacity>);

    return (
      <View style={styles.headerBackground}>
        { hamburgerClickable }
      </View>
    )
  }
}

export default ScreenHeaderWithHamburger;

this is my screen options which returns my custom topBar

export const signUpScreenOptions = {
  layout: {
    backgroundColor: '#ffffff',
    orientation: ['portrait', 'landscape']
  },
  topBar: {
    visible: true,
    animate: false,
    hideOnScroll: true,
    buttonColor: '#f8a11b',
    drawBehind: false,
    shadowColor: 'red',
    testID: 'topBar',
    elevation: 0,
    backButton: {
      visible: false,
      color: '#f8a11b'
    },
    background: {
      component: {
        name: 'dsprov1.HeaderCustomBackButton'
      }
    }
  }
}

after export I import this file into my SignUpScreen and then using static method like following:

import { signUpScreenOptions } from './signUpScreenOptions';

...


  static options(passProps) {
    return signUpScreenOptions;
  };

I see the output - the icon in custom topBar in my screen but why I am not able to click on this icon? Thanks

Environment

• React Native Navigation version: ^2.1.3-patch.2
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[glocore]

I've been trying to do the exact same thing... I think it simply renders the custom component as a background, and cannot be interacted with. I finally decided to hide the RNN TopBar entirely and render my own component instead. The tradeoff here would be that you'll have to add your custom topbar to every screen. For it to work on Android, along with visible: false, you'll also have to set drawBehind: true as well (#3224)

[guyca]

perhaps use title.component instead. Background component is problematic for this use case.

[shakogele]

Sorry but Still not works, when I use the component inside 'title' the buttons are clickable but cant style the title field properly, whereas in 'background' the styling works nice but buttons are not clickable

[archana-iron]

I am facing the same issue, Is there any method to make it clickable. I cannot add a custom Top bar because there are so many screens and my app is almost completed. I am just facing this problem for ios 10 or below otherwise it works on other devices. Please suggest, if anybody having a solution except applying a custom topBar. Thanks in advance.

[markieparky]

Have the same problem. When I use a custom component for the topbar (image for a logo in my case) the buttons will not work. This persist in the whole stack, meaning that every pushed screen will have the same problem.

[jycl]

I think this issue is similar to https://github.com/wix/react-native-navigation/issues/3648#issuecomment-408680892 which also has the solution.

Using a custom component in title, leftButtons or rightButtons with passProps that has a callback such as onClick.

Example:

Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    title: {
      component: {
        name: 'navigation.NavBar',
          aligment: 'center',
          passProps: {
            onClick: () => alert('Pressed button'),
          }
        },
      },
  }
});