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 #10908

Differential Revision: D4175758

Pulled By: ericvicenti

fbshipit-source-id: 4bfac7df16d2a7ea67db977659237a9aa6598f87

Author: Adam Comella

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 {