[Feature] Handle window top and left for react-native-web

[NoZiL]

Hey,

I ran into an issue with this library with the positioning of the popover using my react-native app mounted on a web page under some content (this is reproductible by adding some margins on the root element).

I browse through the ContextMenu component and found out that the computePosition function could be enhanced by handling top and left coming from the windowLayout.

export const computePosition = (layouts, isRTL) => {
  const { windowLayout, triggerLayout, optionsLayout } = layouts;
  const {
    x: wX,
    y: wY,
    width: wWidth,
    height: wHeight,
    top: wTop = 0, // top coming from window `onLayout` func defaulting to 0 when native
    left: wLeft = 0, // left coming from window `onLayout` func defaulting to 0 when native
  } = windowLayout;
  const { x: tX, y: tY, height: tHeight, width: tWidth } = triggerLayout;
  const { height: oHeight, width: oWidth } = optionsLayout;
  const top = axisPosition(oHeight, wHeight, tY - wY, tHeight) - wTop; // fix the top position by removing the window top value
  const left = axisPosition(oWidth, wWidth, tX - wX, tWidth) - wLeft; // fix the left position by removing the window left value
  const start = isRTL ? "right" : "left";
  const position = { top, [start]: left };
  return fitPositionIntoSafeArea(position, layouts);
};

I will do a PR for this one but the workaround I have for now is to create a custom renderer based on the default one ContextMenu and change the computePosition func by the tweaked one.

[sodik82]

sounds fair :) I need to remind myself the windowLayout

but yes, anyone can implement its own renderer....