| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Co-authored-by: Przemysław Sosna<przemyslaw.sosna@swmansion.com> # message auto-generated for no-merge-commit merge: !1287 merge @sosen/animated-props-fix into master fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Created-by: PrzemekSosna Commit-by: Przemysław Sosna Merged-by: huangyouhua Description: ## Description When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the values returned by measure are incorrect. This was actually fixed on 0.77, so this PR is a cherrypick of "Trigger rerender on animation complete (#37836)" from the upstream RN repository and "fix: values for animated props are not set correctly after display changes to none" from the 0.77 branch. "fix: the infinite loop caused by the error "Animated node with tag xxx does not exist"." (d7083d23e9573c805196f813d5c1051c702e150c) is also cherrypicked, as without that native driver is bugged and after a coupld of animations doesn't work properly. ## Changes - fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. ## Test Plan Check the code below, after pressing "Measure Box", the height logged should be 100. tsx import React, {useLayoutEffect, useRef} from 'react'; import {TouchableOpacity, View, Text, Animated} from 'react-native'; export default function App() { const scaleValue = useRef(new Animated.Value(0.2)).current; const boxRef = useRef<View>(null); React.useEffect(() => { Animated.spring(scaleValue, { toValue: 1, friction: 3, useNativeDriver: true, }).start(); }, []); const measureBox = () => { boxRef.current?.measure((x, y, width, height, pageX, pageY) => { console.log({x, y, width, height, pageX, pageY}); }); }; useLayoutEffect(() => { measureBox(); }, []); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 40, }}> <TouchableOpacity onPress={measureBox} style={{padding: 10, backgroundColor: '#eee'}}> <Text>Measure Box</Text> </TouchableOpacity> <Animated.View ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'orange', borderRadius: 8, transform: [{scale: scaleValue}], justifyContent: 'center', alignItems: 'center', }}> <Text>Scaled Box</Text> </Animated.View> </View> ); } ## Checklist - [x] Does not involve incompatible changes; if involved, has been reviewed accordingly. - [x] Does not impact performance, or performance testing has been conducted without degradation. - [x] Complies with the relevant coding standards. - [x] Does not involve documentation updates, or the documentation has been updated. - [x] Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added. - [x] No illegal file inclusions exist, such as images or code. See merge request: openharmony-sig/ohos_react_native!1287 | 10 个月前 | |
fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Co-authored-by: Przemysław Sosna<przemyslaw.sosna@swmansion.com> # message auto-generated for no-merge-commit merge: !1287 merge @sosen/animated-props-fix into master fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Created-by: PrzemekSosna Commit-by: Przemysław Sosna Merged-by: huangyouhua Description: ## Description When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the values returned by measure are incorrect. This was actually fixed on 0.77, so this PR is a cherrypick of "Trigger rerender on animation complete (#37836)" from the upstream RN repository and "fix: values for animated props are not set correctly after display changes to none" from the 0.77 branch. "fix: the infinite loop caused by the error "Animated node with tag xxx does not exist"." (d7083d23e9573c805196f813d5c1051c702e150c) is also cherrypicked, as without that native driver is bugged and after a coupld of animations doesn't work properly. ## Changes - fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. ## Test Plan Check the code below, after pressing "Measure Box", the height logged should be 100. tsx import React, {useLayoutEffect, useRef} from 'react'; import {TouchableOpacity, View, Text, Animated} from 'react-native'; export default function App() { const scaleValue = useRef(new Animated.Value(0.2)).current; const boxRef = useRef<View>(null); React.useEffect(() => { Animated.spring(scaleValue, { toValue: 1, friction: 3, useNativeDriver: true, }).start(); }, []); const measureBox = () => { boxRef.current?.measure((x, y, width, height, pageX, pageY) => { console.log({x, y, width, height, pageX, pageY}); }); }; useLayoutEffect(() => { measureBox(); }, []); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 40, }}> <TouchableOpacity onPress={measureBox} style={{padding: 10, backgroundColor: '#eee'}}> <Text>Measure Box</Text> </TouchableOpacity> <Animated.View ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'orange', borderRadius: 8, transform: [{scale: scaleValue}], justifyContent: 'center', alignItems: 'center', }}> <Text>Scaled Box</Text> </Animated.View> </View> ); } ## Checklist - [x] Does not involve incompatible changes; if involved, has been reviewed accordingly. - [x] Does not impact performance, or performance testing has been conducted without degradation. - [x] Complies with the relevant coding standards. - [x] Does not involve documentation updates, or the documentation has been updated. - [x] Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added. - [x] No illegal file inclusions exist, such as images or code. See merge request: openharmony-sig/ohos_react_native!1287 | 10 个月前 | |
fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Co-authored-by: Przemysław Sosna<przemyslaw.sosna@swmansion.com> # message auto-generated for no-merge-commit merge: !1287 merge @sosen/animated-props-fix into master fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. Created-by: PrzemekSosna Commit-by: Przemysław Sosna Merged-by: huangyouhua Description: ## Description When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the values returned by measure are incorrect. This was actually fixed on 0.77, so this PR is a cherrypick of "Trigger rerender on animation complete (#37836)" from the upstream RN repository and "fix: values for animated props are not set correctly after display changes to none" from the 0.77 branch. "fix: the infinite loop caused by the error "Animated node with tag xxx does not exist"." (d7083d23e9573c805196f813d5c1051c702e150c) is also cherrypicked, as without that native driver is bugged and after a coupld of animations doesn't work properly. ## Changes - fix: values from animated props aren't set correctly after finishing animation with native driver, leading to wrong values in measure. ## Test Plan Check the code below, after pressing "Measure Box", the height logged should be 100. tsx import React, {useLayoutEffect, useRef} from 'react'; import {TouchableOpacity, View, Text, Animated} from 'react-native'; export default function App() { const scaleValue = useRef(new Animated.Value(0.2)).current; const boxRef = useRef<View>(null); React.useEffect(() => { Animated.spring(scaleValue, { toValue: 1, friction: 3, useNativeDriver: true, }).start(); }, []); const measureBox = () => { boxRef.current?.measure((x, y, width, height, pageX, pageY) => { console.log({x, y, width, height, pageX, pageY}); }); }; useLayoutEffect(() => { measureBox(); }, []); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 40, }}> <TouchableOpacity onPress={measureBox} style={{padding: 10, backgroundColor: '#eee'}}> <Text>Measure Box</Text> </TouchableOpacity> <Animated.View ref={boxRef} style={{ width: 100, height: 100, backgroundColor: 'orange', borderRadius: 8, transform: [{scale: scaleValue}], justifyContent: 'center', alignItems: 'center', }}> <Text>Scaled Box</Text> </Animated.View> </View> ); } ## Checklist - [x] Does not involve incompatible changes; if involved, has been reviewed accordingly. - [x] Does not impact performance, or performance testing has been conducted without degradation. - [x] Complies with the relevant coding standards. - [x] Does not involve documentation updates, or the documentation has been updated. - [x] Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added. - [x] No illegal file inclusions exist, such as images or code. See merge request: openharmony-sig/ohos_react_native!1287 | 10 个月前 |
| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
| 10 个月前 | ||
| 10 个月前 | ||
| 10 个月前 |