mpiannucci/react-native-context-menu-view

Touchable area of context menu is too small on Android

Opened this issue · 2 comments

RN 0.74.1

Content of context menu is highlighted with orange.
image

On Android it tappable only on the top border (1-3px) of orange area. On iOS everything is fine. Any idea how to make all children content of ContextMenu tappable?

return (
    <View style={classes.root}>
      <BottomSheet bottomSheetModalRef={bottomSheetModalRef} />
      <ContextMenu
        style={{ backgroundColor: 'orange' }}
        width={24}
        height={24}
        onLongPress={() => null}
        dropdownMenuMode={true}
        actions={[
          { title: i18n.t('translate_to'), icon: icons.language },
          { title: i18n.t('report_content_issue'), icon: icons.report, destructive: true },
        ]}
        onPress={(e) => {
          console.warn('ContextMenu tapped');
        }}
      >
        <View style={classes.touchable}>
          <MenuCircleIcon />
        </View>
      </ContextMenu>
    </View>
  );

Seems like it related to the RN issue like this entria/react-native-view-overflow#32

same issue was discussed there: facebook/react-native#26374

I was able to find a workaround by expanding parent area and use positioning to put it to the required place.

Still get another issue. On Android it renders outside of visible area.
image

@mpiannucci have you experienced such behaviour before? Any idea for workaround?