Calling measure on the element which is off the screen causing crash on Android

Description

If the element is off the screen (user can’t see it) on iOS we can get its measurements, on Android it causing the app to crash.

Screenshots

Steps To Reproduce

1. Run provided example
2. Wait 1 second. It will try to measure the element which is off the screen

Expected behavior

Should work just like on iOS – should return values off the screen

Actual behavior

Crashes

Snack or minimal code example

import React from 'react';
import { useEffect } from 'react';
import {
  FlatList,
  TapGestureHandler,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedRef,
  useAnimatedGestureHandler,
  measure,
  runOnUI,
} from 'react-native-reanimated';

function Block({ index }) {
  const ref = useAnimatedRef();

  const handler = useAnimatedGestureHandler({
    onFinish: () => {
      console.log(measure(ref));
    },
  });

  useEffect(() => {
    if (index === 9) {
      setTimeout(
        () =>
          runOnUI(() => {
            'worklet';

            console.log(measure(ref));
          })(),
        1000,
      );
    }
  }, []);

  return (
    <TapGestureHandler onGestureEvent={handler}>
      <Animated.View
        ref={ref}
        style={{
          height: 200,
          marginBottom: 16,
          backgroundColor: 'red',
        }}
      />
    </TapGestureHandler>
  );
}

function Navigation() {
  return (
    <FlatList
      data={Array.from({ length: 10 }).map((item, index) => index)}
      renderItem={({ index }) => <Block index={index} />}
    />
  );
}

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.7
• NodeJS: 12.16.2

[giovanijfc]

Hello, forgive me for the english of the google translator.

It seems to me that this is a rendering problem on android, the measure tries to get the measurements before the view is even rendered on the screen, I got a good result with the code below.

Even with this result, my team and I chose not to use measure less on android until we have a definitive correction, because this palliative solution that is found below may not work in 100% of cases.

const [alreadyRender, setAlreadyRender] = useState<boolean>(false)

useEffect(() => {
    if (!alreadyRender) return
    runOnUI(() => {
      'worklet'
      console.log(Platform.OS, measure(ref))
    })()
}, [alreadyRender])

<Container onLayout={() => setAlreadyRender(true)}>

[terrysahaidak]

Hi there, thanks for your reply, it seems like I had some caching issues on Android because now try-catch actually catches the error just like it’s on iOS.

I will let you know if I find any other issues regarding that.