There are numerous issues in the implementation of useOverlayPosition hook. The hook also has significant differences across different platforms.
CodeSandbox/Snack link
No response
Steps to reproduce
useOverlayPosition hook is not consistent across different platform:
Web version accepts props containerPadding, boundaryElement, shouldUpdatePosition and onClose, which are not supported on other platforms (could be others as well)
APPROX_STATUSBAR_HEIGHT is undefined for all but "ios" and "android", causing issues e.g. if the platform is "windows"
Calling requestAnimationFrame causes infinite loop if either overlayOffset or triggerOffset truly has no dimensions:
A new instance of updatePosition is always created making it inefficient to use id e.g. as a dependency of another hook as the dependency updates every time.
Description
There are numerous issues in the implementation of
useOverlayPosition
hook. The hook also has significant differences across different platforms.CodeSandbox/Snack link
No response
Steps to reproduce
useOverlayPosition
hook is not consistent across different platform:containerPadding
,boundaryElement
,shouldUpdatePosition
andonClose
, which are not supported on other platforms (could be others as well)APPROX_STATUSBAR_HEIGHT
isundefined
for all but"ios"
and"android"
, causing issues e.g. if the platform is "windows"Calling
requestAnimationFrame
causes infinite loop if eitheroverlayOffset
ortriggerOffset
truly has no dimensions:https://github.com/gluestack/gluestack-ui/blob/055d69ac9399d978a1abedb5a47b9fb061d5a32e/packages/react-native-aria/overlays/src/useOverlayPosition.ts#L125C5-L133C6
State is being updated after component has been unmounted:
https://github.com/gluestack/gluestack-ui/blob/055d69ac9399d978a1abedb5a47b9fb061d5a32e/packages/react-native-aria/overlays/src/useOverlayPosition.ts#L158C3-L162C10
A new instance of
updatePosition
is always created making it inefficient to use id e.g. as a dependency of another hook as the dependency updates every time.https://github.com/gluestack/gluestack-ui/blob/055d69ac9399d978a1abedb5a47b9fb061d5a32e/packages/react-native-aria/overlays/src/useOverlayPosition.ts#L118
There are other return props that could also be memoized.
gluestack-ui Version
@react-native-aria/overlays@0.3.12
Platform
Other Platform
Windows
Additional Information
No response