Return null instead of undefined from measure on Fabric (#3622)

This PR removes error `Cannot read property 'x' of undefined` when using
`measure` function. For details, see changes.

Follow-up of #3598 and #3453.

References:
*
https://github.com/facebook/react-native/blob/278dad6438eac8358a6caaf9dc3b192c0b6137e2/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp#L557-L560
– `measure`
*
https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/ReactCommon/react/renderer/core/LayoutMetrics.h#L63-L69
– `EmptyLayoutMetrics`

* Changed the return value of native measure function from `undefined`
to `null` in case of empty layout metrics
* Fixed type of `_measure` function in `globals.d.ts`
* Added appropriate variant of warning message in case of empty layout
metrics
* Added missing spaces in other warning message in `measure` function
* Updated Article Progress Example

Tested on FabricExample app with Article Progress Example.

src/reanimated2/NativeMethods.ts

@@ -26,11 +26,11 @@ export function measure(
 
   if (!_WORKLET) {
     console.warn(
-      '[Reanimated] measure() was called from the main JS context. Measure is' +
-        'only available in the UI runtime. This may also happen if measure()' +
-        'was called by a worklet in the useAnimatedStyle hook, because useAnimatedStyle' +
-        'calls the given worklet on the JS runtime during render. If you want to' +
-        'prevent this warning then wrap the call with `if (_WORKLET)`. Then it will' +
+      '[Reanimated] measure() was called from the main JS context. Measure is ' +
+        'only available in the UI runtime. This may also happen if measure() ' +
+        'was called by a worklet in the useAnimatedStyle hook, because useAnimatedStyle ' +
+        'calls the given worklet on the JS runtime during render. If you want to ' +
+        'prevent this warning then wrap the call with `if (_WORKLET)`. Then it will ' +
         'only be called on the UI runtime after the render has been completed.'
     );
     return null;
@@ -45,7 +45,12 @@ export function measure(
   }
 
   const measured = _measure(viewTag);
-  if (measured.x === -1234567) {
+  if (measured === null) {
+    console.warn(
+      `[Reanimated] The view with tag ${viewTag} has some undefined, not-yet-computed or meaningless value of \`LayoutMetrics\` type. This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`
+    );
+    return null;
+  } else if (measured.x === -1234567) {
     console.warn(
       `[Reanimated] The view with tag ${viewTag} returned an invalid measurement response`
     );

src/reanimated2/globals.d.ts

@@ -20,7 +20,7 @@ declare global {
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
-  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _measure: (viewTag: number) => MeasuredDimensions | null;
   const _scrollTo: (
     viewTag: number,
     x: number,
@@ -40,7 +40,7 @@ declare global {
       _WORKLET: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
-      _measure: () => MeasuredDimensions;
+      _measure: () => MeasuredDimensions | null;
       _scrollTo: () => void;
       _chronoNow: () => number;
       performance: { now: () => number };