Add perspective transform support on Android

Summary: Rebased facebook#6926 against master. Fixes facebook#2915 Closes facebook#11713 Differential Revision: D4513111 fbshipit-source-id: 9fb653c4bfd64eda12a605f6cabb0159b2af8f73
nicktate · Feb 9, 2017 · e3d8e63 · e3d8e63
1 parent d99635d
commit e3d8e63
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/Examples/UIExplorer/js/TransformExample.js b/Examples/UIExplorer/js/TransformExample.js
@@ -211,7 +211,7 @@ exports.title = 'Transforms';
 exports.description = 'View transforms';
 exports.examples = [
   {
-    title: 'Perspective',
+    title: 'Perspective, Rotate, Animation',
     description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
     render(): React.Element<any> { return <Flip />; }
   },

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -5,8 +5,6 @@
 import android.graphics.Color;
 import android.os.Build;
 import android.view.View;
-import android.view.ViewGroup;
-
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
@@ -35,6 +33,9 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
   private static final String PROP_TRANSLATE_X = "translateX";
   private static final String PROP_TRANSLATE_Y = "translateY";
 
+  private static final int PERSPECTIVE_ARRAY_INVERTED_CAMERA_DISTANCE_INDEX = 2;
+  private static final float CAMERA_DISTANCE_NORMALIZATION_MULTIPLIER = 5;
+
   /**
    * Used to locate views in end-to-end (UI) tests.
    */
@@ -165,6 +166,22 @@ private static void setTransformProperty(View view, ReadableArray transforms) {
     view.setRotationY((float) sMatrixDecompositionContext.rotationDegrees[1]);
     view.setScaleX((float) sMatrixDecompositionContext.scale[0]);
     view.setScaleY((float) sMatrixDecompositionContext.scale[1]);
+
+    double[] perspectiveArray = sMatrixDecompositionContext.perspective;
+
+    if (perspectiveArray.length > PERSPECTIVE_ARRAY_INVERTED_CAMERA_DISTANCE_INDEX) {
+      float invertedCameraDistance = (float) perspectiveArray[PERSPECTIVE_ARRAY_INVERTED_CAMERA_DISTANCE_INDEX];
+      if (invertedCameraDistance < 0) {
+        float cameraDistance = -1 / invertedCameraDistance;
+        float scale = DisplayMetricsHolder.getScreenDisplayMetrics().density;
+
+        // The following converts the matrix's perspective to a camera distance
+        // such that the camera perspective looks the same on Android and iOS
+        float normalizedCameraDistance = scale * cameraDistance * CAMERA_DISTANCE_NORMALIZATION_MULTIPLIER;
+
+        view.setCameraDistance(normalizedCameraDistance);
+      }
+    }
   }
 
   private static void resetTransformProperty(View view) {
@@ -175,5 +192,6 @@ private static void resetTransformProperty(View view) {
     view.setRotationY(0);
     view.setScaleX(1);
     view.setScaleY(1);
+    view.setCameraDistance(0);
   }
 }