CODEWITHSUNDEEP
javascriptreact-nativereact-native-paper
ror
ror

Reputation: 3500

Paper menu rendered but not clickable

I am setting up menu in headerRight of section like this:

const Tab1 = createStackNavigator({
  S1: {
    screen: CouponsScreen,
    navigationOptions: () => ({
      title: `Test`,
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerRight: (
        <CustomMenu/>
      ),
    }),
  },
});

My menu control uses state to visualize:

//state itself
  state = {
    visible: false,
  };

//class methods
  _openMenu = () => this.setState({visible: true});
  _closeMenu = () => this.setState({visible: false});

//render()  part:
      <Provider>
        <View>
          <Menu
            visible={this.state.visible}
            onDismiss={this._closeMenu}
            anchor={
              <DotsIcon
                onPress={this._openMenu}
                name="dots-three-vertical"
                color={Colors.WHITE}
                size={20}
              />
            }>
...

This is basically standard sample from https://callstack.github.io/react-native-paper/menu.html. Any idea why it's not working? I mean the control DotsIcon is shown, but nothing happens upon clicks.

Upvotes: 2

Views: 2126

Answers (1)

ror
ror

Reputation: 3500

I've discovered ReactNative provides a way to inspect DOM of application (with android, shake device, toggle inspect). It turns out my menu item was shadowed by Context.Consumer. When I removed <Provider> tags from my render () section, it finally worked (was able to handle clicks).

Probably worth mentioning: from the very beginning my AppContainer at the top most level was wrapped like this:

      <PaperProvider>
        <StatusBar
          backgroundColor={Colors.TOOLBAR_BACKGROUND}
          barStyle="light-content"
        />
        <AppContainer />
      </PaperProvider>

Upvotes: 3

Related Questions