CODEWITHSUNDEEP
javascriptreact-native-navigationvelo
Harry Blue
Harry Blue

Reputation: 4512

react-native-navigation navigator is undefined custom button

I am using React Native Navigation by Wix (https://github.com/wix/react-native-navigation)

I am using Redux with my app also.

I am trying to add a custom button to my top bar, so I can trigger opening and closing the drawer.

I am adding a drawer to the tab as follows :

Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'Home',
        screen: 'swiftyApp.Home',
        icon: icons.homeOutline,
        selectedIcon: icons.home,
        title: 'Home',
        navigatorStyle,
        navigatorButtons: {
          leftButtons: [
            {
              id: 'custom-button',
              component: 'CustomButton',
              passProps: {
                text: 'Hi!'
              }
            }
          ]
        }
      }
    ],
    drawer: {
      left: {
        screen: 'swiftyApp.Drawer',
        passProps: {}
      },
      style: {
        drawerShadow: false,
        contentOverlayColor: 'rgba(0,0,0,0.25)',
        leftDrawerWidth: 75,
        rightDrawerWidth: 25
      },
      type: 'MMDrawer',
      animationType: 'slide',

      disableOpenGesture: false
    },
    appStyle: {
      orientation: 'portrait',
      hideBackButtonTitle: true
    }
  });
});

My Custom Button component looks like

const CustomButton = props => {
  console.log(props);
  const { text, navigator } = props;
  return (
    <TouchableOpacity
      style={[styles.button, { backgroundColor: 'tomato' }]}
      onPress={() =>
        navigator.toggleDrawer({
          side: 'left',
          animated: true
        })
      }
    >
      <View style={styles.button}>
        <Text style={{ color: 'white' }}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
};

The button displays and the styles are applied as expected. However when clicking the button an exception is thrown that the onPress fails as navigator.toggleDrawer is undefined, on checking the output of the navigator props being passed in, I can see in the log:

2017-11-25 13:33:48.703 [info][tid:com.facebook.react.JavaScript] '************', { testID: 'CustomButton',
  navigator: undefined,
  passPropsKey: 'customButtonComponent3',
  rootTag: 21,
  text: 'Hi!' }

Navigator is indeed undefined. I cannot for the life of my word out why.

How do I pass navigator into something such a custom button for the navbar, so I can toggle a drawer open or trigger a modal?

Upvotes: 2

Views: 1525

Answers (1)

guy.gc
guy.gc

Reputation: 3501

Custom buttons aren't associated with a navigator. You'll need to set the button in the screens' constructor and pass the navigator in props.

constructor(props) {
    super(props);
    this.props.navigator.setButtons(this.navigatorButtons(this.props.navigator));
  }

  navigatorButtons = (navigator) => {
    return {
      leftButtons: [
        {
          id: 'custom-button',
          component: 'CustomButton',
          passProps: {
            text: 'Hi!',
            navigator
          }
        }
      ]
    };
  }

Don't forget that custom left button isn't supported on Android.

Upvotes: 1

Related Questions