diff --git a/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json b/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json new file mode 100644 index 00000000000..0dc6a29cb59 --- /dev/null +++ b/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Resolve transform before animation", + "packageName": "react-native-windows", + "email": "10109130+sharath2727@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index f0a3757811d..061a388b5e6 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -180,11 +180,46 @@ const facebook::react::LayoutMetrics &ComponentView::layoutMetrics() const noexc return m_layoutMetrics; } +void ComponentView::FinalizeTransform( + facebook::react::LayoutMetrics const &layoutMetrics, + const facebook::react::ViewProps &viewProps) noexcept { + const auto resolveTransformMatrix = viewProps.resolveTransform(layoutMetrics); + winrt::Windows::Foundation::Numerics::float4x4 transformMatrix; + transformMatrix.m11 = resolveTransformMatrix.matrix[0]; + transformMatrix.m12 = resolveTransformMatrix.matrix[1]; + transformMatrix.m13 = resolveTransformMatrix.matrix[2]; + transformMatrix.m14 = resolveTransformMatrix.matrix[3]; + transformMatrix.m21 = resolveTransformMatrix.matrix[4]; + transformMatrix.m22 = resolveTransformMatrix.matrix[5]; + transformMatrix.m23 = resolveTransformMatrix.matrix[6]; + transformMatrix.m24 = resolveTransformMatrix.matrix[7]; + transformMatrix.m31 = resolveTransformMatrix.matrix[8]; + transformMatrix.m32 = resolveTransformMatrix.matrix[9]; + transformMatrix.m33 = resolveTransformMatrix.matrix[10]; + transformMatrix.m34 = resolveTransformMatrix.matrix[11]; + transformMatrix.m41 = resolveTransformMatrix.matrix[12]; + transformMatrix.m42 = resolveTransformMatrix.matrix[13]; + transformMatrix.m43 = resolveTransformMatrix.matrix[14]; + transformMatrix.m44 = resolveTransformMatrix.matrix[15]; + + auto centerPointPropSet = EnsureCenterPointPropertySet(); + if (centerPointPropSet) { + centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix); + } + + EnsureTransformMatrixFacade(); + m_FinalizeTransform = false; +} + void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept { if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) { finalizeBorderUpdates(m_layoutMetrics, *viewProps()); } + if (m_FinalizeTransform) { + FinalizeTransform(m_layoutMetrics, *viewProps()); + } + base_type::FinalizeUpdates(updateMask); } @@ -1246,30 +1281,7 @@ void ComponentView::updateTransformProps( // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates if (oldViewProps.transform != newViewProps.transform) { - winrt::Windows::Foundation::Numerics::float4x4 transformMatrix; - transformMatrix.m11 = newViewProps.transform.matrix[0]; - transformMatrix.m12 = newViewProps.transform.matrix[1]; - transformMatrix.m13 = newViewProps.transform.matrix[2]; - transformMatrix.m14 = newViewProps.transform.matrix[3]; - transformMatrix.m21 = newViewProps.transform.matrix[4]; - transformMatrix.m22 = newViewProps.transform.matrix[5]; - transformMatrix.m23 = newViewProps.transform.matrix[6]; - transformMatrix.m24 = newViewProps.transform.matrix[7]; - transformMatrix.m31 = newViewProps.transform.matrix[8]; - transformMatrix.m32 = newViewProps.transform.matrix[9]; - transformMatrix.m33 = newViewProps.transform.matrix[10]; - transformMatrix.m34 = newViewProps.transform.matrix[11]; - transformMatrix.m41 = newViewProps.transform.matrix[12]; - transformMatrix.m42 = newViewProps.transform.matrix[13]; - transformMatrix.m43 = newViewProps.transform.matrix[14]; - transformMatrix.m44 = newViewProps.transform.matrix[15]; - - auto centerPointPropSet = EnsureCenterPointPropertySet(); - if (centerPointPropSet) { - centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix); - } - - EnsureTransformMatrixFacade(); + m_FinalizeTransform = true; } } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 1ad1df1d440..ef9927b1f76 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -168,7 +168,11 @@ struct ComponentView std::array FindSpecialBorderLayers() const noexcept; void UpdateCenterPropertySet() noexcept; + void FinalizeTransform( + facebook::react::LayoutMetrics const &layoutMetrics, + const facebook::react::ViewProps &viewProps) noexcept; + bool m_FinalizeTransform{false}; ComponentViewFeatures m_flags; void showFocusVisual(bool show) noexcept; winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};