From 54beee261667539d0314abc6bc39363784e41e37 Mon Sep 17 00:00:00 2001
From: Adam Comella <adcom@microsoft.com>
Date: Mon, 14 Nov 2016 08:45:29 -0800
Subject: [PATCH] Android: Reduce overdraw layers by hiding cards when they are
 not visible

Summary:
Cards which are not visible because another card is occluding them are still being rendered by Android resulting in overdraw. This results in wasted GPU time because some pixels are drawn multiple times. This change reduces overdraw by changing the opacity of occluded cards to 0.

This bug was found using the tools described in Android's overdraw docs: https://developer.android.com/topic/performance/rendering/overdraw.html

**Test plan (required)**

This change is being used in my team's app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/10908

Differential Revision: D4175758

Pulled By: ericvicenti

fbshipit-source-id: 4bfac7df16d2a7ea67db977659237a9aa6598f87
---
 .../NavigationCardStackStyleInterpolator.js    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js
index 391a5597fb4..e3ef1ad0543 100644
--- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js
+++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js
@@ -87,21 +87,21 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
   }
 
   const index = scene.index;
-  const inputRange = [index - 1, index, index + 1];
+  const inputRange = [index - 1, index, index + 0.99, index + 1];
   const width = layout.initWidth;
   const outputRange = I18nManager.isRTL ?
-    ([-width, 0, 10]: Array<number>) :
-    ([width, 0, -10]: Array<number>);
+    ([-width, 0, 10, 10]: Array<number>) :
+    ([width, 0, -10, -10]: Array<number>);
 
 
   const opacity = position.interpolate({
     inputRange,
-    outputRange: ([1, 1, 0.3]: Array<number>),
+    outputRange: ([1, 1, 0.3, 0]: Array<number>),
   });
 
   const scale = position.interpolate({
     inputRange,
-    outputRange: ([1, 1, 0.95]: Array<number>),
+    outputRange: ([1, 1, 0.95, 0.95]: Array<number>),
   });
 
   const translateY = 0;
@@ -132,23 +132,23 @@ function forVertical(props: NavigationSceneRendererProps): Object {
   }
 
   const index = scene.index;
-  const inputRange = [index - 1, index, index + 1];
+  const inputRange = [index - 1, index, index + 0.99, index + 1];
   const height = layout.initHeight;
 
   const opacity = position.interpolate({
     inputRange,
-    outputRange: ([1, 1, 0.3]: Array<number>),
+    outputRange: ([1, 1, 0.3, 0]: Array<number>),
   });
 
   const scale = position.interpolate({
     inputRange,
-    outputRange: ([1, 1, 0.95]: Array<number>),
+    outputRange: ([1, 1, 0.95, 0.95]: Array<number>),
   });
 
   const translateX = 0;
   const translateY = position.interpolate({
     inputRange,
-    outputRange: ([height, 0, -10]: Array<number>),
+    outputRange: ([height, 0, -10, -10]: Array<number>),
   });
 
   return {