measure returns incorrect coordinates

[szkieb]

Description

When using measure it return an object's height, width, pageX, pageY, x, and y values. However, at least on Android, x and y are always 0 even when they should not.

Expected Behaviour

measure should return obejct's updated x and y values. That way I can keep track of the animated object during the pan gesture.

Actual Behaviour

measure always return x and y as 0.

Related Issue

In line with what has been said in this issue #3188

Steps to reproduce

minimal code example (

import React from 'react';

import { Dimensions, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  measure,
  runOnUI,
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const boxSizeDefault = { width: 100, height: 100 };

const { width: containerWidth, height: containerHeight } =
  Dimensions.get('screen');

function clamp(val, min, max) {
  return Math.min(Math.max(val, min), max);
}

export const PatientDetailScreen = (): JSX.Element => {
  const imageRef = useAnimatedRef();

  const translationX = useSharedValue(0);
  const translationY = useSharedValue(0);
  const prevTranslationX = useSharedValue(0);
  const prevTranslationY = useSharedValue(0);
  const boxSize = useSharedValue(boxSizeDefault);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [
      { translateX: translationX.value },
      { translateY: translationY.value },
    ],
  }));

  const pan = Gesture.Pan()
    .onUpdate((event) => {
      const maxTranslateX = containerWidth / 2 - boxSize.value.width / 2;
      const maxTranslateY = containerHeight / 2 - boxSize.value.height / 2;

      translationX.value = clamp(
        prevTranslationX.value + event.translationX,
        -maxTranslateX,
        maxTranslateX
      );
      translationY.value = clamp(
        prevTranslationY.value + event.translationY,
        -maxTranslateY,
        maxTranslateY
      );
    })
    .onEnd(() => {
      runOnUI(() => {
        const measurement = measure(imageRef);
        // safe guard
        if (measurement === null) {
          return;
        }
        console.log('measurement', measurement);
      })();
    })
    // })
    .runOnJS(true);

  return (
    <View
      style={{
        flex: 1,

        paddingHorizontal: 24,
        paddingVertical: 24,
      }}
    >
      <GestureHandlerRootView
        style={{
          backgroundColor: 'red',
        }}
      >
        <GestureDetector gesture={pan}>
          <Animated.View
            ref={imageRef}
            collapsable={false}
            style={[
              { width: '100%', height: '100%', backgroundColor: 'blue' },
              animatedStyles,
            ]}
          />
        </GestureDetector>
      </GestureHandlerRootView>
    </View>
  );
};

Snack or a link to a repository

https://snack.expo.dev/@srit/51ba0e

Reanimated version

3.16

React Native version

0.74.5

Platforms

Android

JavaScript runtime

JSC

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Samsung Galaxy S21 5G

Acknowledgements

Yes