Summary of Issue
I am trying to get the x and y relative-to-parent position every time I move an animated view. It is working fine on iOS, but on Android those values are always 0.
Snack
Environment
Expo CLI 3.11.7 environment info:
System:
OS: Windows 10
Binaries:
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
React Native info:
System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Core⢠i7-8750H CPU @ 2.20GHz
Memory: 8.44 GB / 15.85 GB
Binaries:
Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
npmGlobalPackages:
react-native-cli: 2.0.1
Reproducible Demo
Just create an Animated.View inside a View (at the middle for example) and get it position using this function
// This function get the X/Y position of a specific node
const measureNode = (node) => {
// TODO - there are problems on android
return new Promise((resolve, reject) =>
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
console.log(y);
resolve({ x, y });
})
);
};
as follows:
/* Run on an Android Device !!! */
/* Expected Behaviour: 'Y' has to be 10, as it is relative-to-parent */
import React, { useRef } from 'react';
import {
View,
Button,
Animated,
UIManager,
findNodeHandle,
Platform,
} from 'react-native';
export default function App(props) {
const viewRef = useRef(null);
const measureNode = (node) => {
// TODO - Ihere are issues on Android
return new Promise((resolve, reject) =>
UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
console.log('Y: ' + y); // Relative to parent (Working on iOS, but not on Android)
console.log('Page Y: ' + pageY); // Relative to device's screen
resolve({ x, y });
})
);
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
width: 250,
height: 400,
alignItems: 'center',
marginVertical: 10,
backgroundColor: 'lime',
}}>
<Animated.View
ref={viewRef}
style={{ top: 10, width: 100, height: 100, backgroundColor: 'red' }}
/>
</View>
<Button
title="Press me"
onPress={async () => {
await measureNode(findNodeHandle(viewRef.current));
}}
/>
</View>
);
}
Expected Behaviour
x and y should be different from 0 on Android. Just like on iOS.