Touchable area of context menu is too small on Android
Opened this issue · 2 comments
Stafox commented
RN 0.74.1
Content of context menu is highlighted with orange.
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>
);
Stafox commented
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.
Stafox commented
Still get another issue. On Android it renders outside of visible area.
@mpiannucci have you experienced such behaviour before? Any idea for workaround?