Tapping on a Popover freezes the app and becomes unusable on iOS with React Native New Architecture

[webmaster-qiagroup]

Describe the bug
Using this basic example makes the iOS app freeze upon tapping on the popover.
This happens on Expo SDK 52 which has React Native new Architecture enabled.
Disabling the New Architecture(Bridgeless mode) makes it work again.

<Popover
  from={(
    <TouchableOpacity>
      <Text>Press here to open popover!</Text>
    </TouchableOpacity>
  )}>
  <Text>This is the contents of the popover</Text>
</Popover>

Device/Setup Info:

• Device: iPad 6th gen
• OS: 17.7.1
• react-native version: 0.76
• react-native-popover-view version: 5.1.9

Debug Output
(NOBRIDGE) LOG [2024-11-19T01:34:57.727Z] calculateRectFromRef - waiting for ref
(NOBRIDGE) LOG [2024-11-19T01:34:57.729Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}

[smfunder]

@webmaster-qiagroup I modified the library mostly the utility.ts file to fix this issue: Here is the change:

After modifying the src files, you will need to run npm run build

// Need any here to match signature of findNodeHandle
// eslint-disable-next-line
type RefType = RefObject<number | Component<any, any, any> | ComponentClass<any, any> | null | React.Component<any, any>>;

export function getRectForRef(ref: RefType): Promise<Rect> {
  return new Promise((resolve, reject) => {
    if (!ref.current) {
      reject(new Error("Reference is not set or the component is not mounted"));
      return;
    }
    if (!((ref.current as any).measure)) {
      if (ref.current) {
        NativeModules.UIManager.measure(
          findNodeHandle(ref.current),
          (_1: unknown, _2: unknown, width: number, height: number, x: number, y: number) =>
            resolve(new Rect(x, y, width, height))
        );
      } else {
        reject(new Error('getRectForRef - current is not set'));
      }
    } else {
      // Wait for the next layout event
      (ref.current as any).measure((x: number, y: number, width: number, height: number, _pageX: number, _pageY: number) => {
        resolve(new Rect(Number(_pageX), Number(_pageY), Number(width), Number(height) ));
      });
    }
  });
}

Or if this helps, here I leave the patch file to use with patch-package library.

react-native-popover-view+5.1.9.patch

The only problem I have is that CircleCI is not able to apply the patch. If anyone can help me?

[smfunder]

And here is the possible duplicated item I created: #183