Implement unstable_getBoundingClientRect in RN Fabric refs

[rubennorte]

We're fixing the timing of layout and passive effects in React Native, and adding support for some Web APIs so common use cases for those effects can be implemented with the same code on React and React Native.

Let's take this example:

function MyComponent(props) {
  const viewRef = useRef();

  useLayoutEffect(() => {
    const rect = viewRef.current?.getBoundingClientRect();
    console.log('My view is located at', rect?.toJSON());
  }, []);

  return <View ref={viewRef}>{props.children}</View>;
}

This could would work as expected on Web (ignoring the use of View and assuming something like div) but not on React Native because:

1. Layout is done asynchronously in a background thread in parallel with the execution of layout and passive effects. This is incorrect and it's being fixed in React Native (see facebook/react-native@afec07a).
2. We don't have an API to access layout information synchronously. The existing ref.current.measureInWindow uses callbacks to pass the result. That is asynchronous at the moment in Paper (the legacy renderer in React Native), but it's actually synchronous in Fabric (the new React Native renderer).

This fixes point 2) by adding a Web-compatible method to access layout information (on Fabric only).

This has 2 dependencies in React Native:

1. Access to getBoundingClientRect in Fabric, which was added in https://github.com/facebook/react-native/blob/main/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp#L644-
   L676
2. Access to DOMRect, which was added in facebook/react-native@673c761 .

As next step, I'll modify the implementation of this and other methods in Fabric to warn when they're accessed during render. We can't do this on Web because we can't (shouldn't) modify built-in DOM APIs, but we can do it in React Native because the refs objects are built by the framework.

[react-sizebot]

Comparing: 3ff1540...ee79b6c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	154.82 kB	154.82 kB	=	49.11 kB	49.11 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	156.82 kB	156.82 kB	=	49.72 kB	49.72 kB
facebook-www/ReactDOM-prod.classic.js	=	533.52 kB	533.52 kB	=	94.98 kB	94.98 kB
facebook-www/ReactDOM-prod.modern.js	=	518.79 kB	518.79 kB	=	92.83 kB	92.83 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against ee79b6c

[necolas]

Note that on web this is expected to have top/left/right/bottom values too: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

[rubennorte]

Yeah, this is only the mock I defined for the React tests because jsdom doesn't provide DOMRect. In React Native, the implementation is spec-compliant (see https://github.com/facebook/react-native/blob/main/Libraries/DOM/Geometry/DOMRect.js :) )

[sammy-SC]

looks good! thanks for adding this.