status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Adam Comella 2016-11-14 08:45:29 -08:00 committed by Facebook Github Bot
parent 16b2d5aa15
commit 54beee2616
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js
View File

@ -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 {