2

I'm using react-native-popup-menu but I'm trying to increase the area where the user can click for the menu option to be triggered. I've gone through the documentation and there is information about TouchableOpactiy but it seems to be about styling it but I feel like I'm also not understanding it.

I have a component that I'm passing OptionsMenu as a prop:

<TouchableOpacity style={{alignContent: 'flex-end', paddingRight:10}} hitSlop={{bottom: 50, top: 50, left: 50, right: 50 }}>
   //I know using hitSlop here is wrong and it is not triggering anything here. Just showing what I have.
      {OptionMenu}
  </TouchableOpacity>

and in another screen I have it set to

<Menu>

    <MenuTrigger>
        <Svg
            viewBox="0 0 64 512"
            height={34}
            width={10}
            fill='#7b8794'
        >
            <Path d="M32 224c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM0 136c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zm0 240c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32z" />
        </Svg>
    </MenuTrigger>


    <MenuOptions>
        <MenuOption onSelect={() => handleInsert(item, index)} text='Duplicate' />
        <MenuOption onSelect={() => handleRemove(index)}>
            <Text style={{ color: 'red' }}>Delete</Text>
        </MenuOption>
    </MenuOptions>

</Menu>

I'm not understanding where I can pass hitSlop in to be able to increase the touchable area to trigger the MenuOptions.

Bruce Mathers
  • 661
  • 1
  • 8
  • 24
  • you could use `triggerTouchable` to pass the prop to touchable. https://github.com/instea/react-native-popup-menu/blob/master/doc/api.md#custom-styles-1 or make your own `TriggerTouchableComponent` – sodik Feb 01 '21 at 22:39
  • so I wrap the ` jsx with `TouchableOpacity` jsx and pass `triggerTouchable` into `TouchableOpacity` as a prop? What would I set `triggerTouchable` to? I'm sorry I'm just so confused – Bruce Mathers Feb 02 '21 at 03:35
  • 1
    sorry, I confused trigger with menu option, but check the doc - there is also `optionTouchable` and see it in official example https://github.com/instea/react-native-popup-menu/blob/master/examples/TouchableExample.js – sodik Feb 03 '21 at 08:32
  • So I add `optionTouchable` to `MenuOption` but I'm confused on how can I pass `hitSlop` to it? I'm sorry I'm still learning javascript and the documentation is a little confusing to me. I just want to make the area that users can press for the menu button to be triggered bigger. – Bruce Mathers Feb 05 '21 at 15:21

0 Answers0