Fix crash in RS5 due to missing facade property

change/react-native-windows-2019-10-29-13-55-40-noRS5crash.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "comment": "Fix crash in RS5 due to missing facade property",
+  "packageName": "react-native-windows",
+  "email": "asklar@winse.microsoft.com",
+  "commit": "1cd1d5fe48d2f304c5b1b4597c7a9930c76183ff",
+  "date": "2019-10-29T20:55:40.104Z",
+  "file": "F:\\rnw\\change\\react-native-windows-2019-10-29-13-55-40-noRS5crash.json"
+}

vnext/ReactUWP/Modules/Animated/PropsAnimatedNode.cpp

@@ -3,6 +3,7 @@
 
 #include "pch.h"
 
+#include <ReactUWP/Views/ReactControl.h>
 #include <ReactUWP\Modules\NativeUIManager.h>
 #include <Views/ShadowNodeBase.h>
 #include "NativeAnimatedNodeManager.h"
@@ -121,6 +122,11 @@ void PropsAnimatedNode::StartAnimations() {
         if (!m_centerPointAnimation) {
           m_centerPointAnimation = winrt::Window::Current().Compositor().CreateExpressionAnimation();
           m_centerPointAnimation.Target(L"CenterPoint");
+
+          if (g_HasActualSizeProperty == TriBit::Undefined) {
+            // ActualSize works on 19H1+ only
+            g_HasActualSizeProperty = (uiElement.try_as<winrt::IUIElement10>()) ? TriBit::Set : TriBit::NotSet;
+          }
           m_centerPointAnimation.SetReferenceParameter(
               L"centerPointPropertySet", GetShadowNodeBase()->EnsureTransformPS());
           m_centerPointAnimation.Expression(L"centerPointPropertySet.center");

vnext/ReactUWP/Views/ExpressionAnimationStore.cpp

@@ -4,6 +4,7 @@
 #include "pch.h"
 
 #include "ExpressionAnimationStore.h"
+#include "ReactControl.h"
 
 namespace winrt {
 using namespace Windows::UI::Xaml;
@@ -37,8 +38,17 @@ winrt::ExpressionAnimation ExpressionAnimationStore::GetElementCenterPointExpres
   return m_elementCenterPointExpression;
 */
 
+  // In React Native, animations use the element's center as the center or rotation/scale
+  // However XAML uses CenterPoint which is usually not set and therefore remains at 0,0,0
+  // This means Rotate animations would rotate around the top left corner instead of around the center of the element
+  // In order to fix that we need a transform (see GetTransformCenteringExpression)
+  // The way we obtain the center of an element is by using the ActualSize façade. However this was only added in 19h1
+  // An expression animation that refers to a non-existent property (e.g. in RS5) will crash, so use the CenterPoint as
+  // a fallback. This might be wrong but at least we won't crash.
   return winrt::Window::Current().Compositor().CreateExpressionAnimation(
-      L"vector3(0.5 * uielement.ActualSize.x, 0.5 * uielement.ActualSize.y, 0)");
+      g_HasActualSizeProperty == TriBit::Set
+          ? L"vector3(0.5 * uielement.ActualSize.x, 0.5 * uielement.ActualSize.y, 0)"
+          : L"vector3(uielement.CenterPoint.X, uielement.CenterPoint.Y, uielement.CenterPoint.Z)");
 }
 
 // Expression for applying a TransformMatrix about the centerpoint of a

vnext/ReactUWP/Views/ReactControl.cpp

@@ -473,5 +473,6 @@ void ReactControl::ToggleInspector() {
   }
 }
 
+TriBit g_HasActualSizeProperty{TriBit::Undefined};
 } // namespace uwp
 } // namespace react

vnext/ReactUWP/Views/ReactControl.h

@@ -25,6 +25,9 @@ using namespace Windows::UI::Xaml::Media;
 namespace react {
 namespace uwp {
 
+enum class TriBit { Undefined = -1, NotSet = 0, Set = 1 };
+extern TriBit g_HasActualSizeProperty;
+
 class ReactControl : public std::enable_shared_from_this<ReactControl>, public IXamlReactControl {
  public:
   ReactControl(IXamlRootView *parent, XamlView rootView);