Fix initial scenes rendering for NavigationPagerStyleInterpolator
Summary: The initial layout used to render scenes does not contain the actual width and height measured and causes the issue as described at https://github.com/ericvicenti/navigation-rfc/issues/61 The fix is to update the layout and re-render scenes once layout is modified. Also scenes renderer should also consider the case that when the layout is not measured yet. Reviewed By: ericvicenti Differential Revision: D3203245 fb-gh-sync-id: 4de89b9b43bc993d7c970c831458bd31c094073e fbshipit-source-id: 4de89b9b43bc993d7c970c831458bd31c094073e
This commit is contained in:
parent
50d6de9448
commit
24f44558f6
|
@ -51,6 +51,29 @@ import type {
|
|||
* +-------------+-------------+-------------+
|
||||
*/
|
||||
|
||||
/**
|
||||
* Render the initial style when the initial layout isn't measured yet.
|
||||
*/
|
||||
function forInitial(props: NavigationSceneRendererProps): Object {
|
||||
const {
|
||||
navigationState,
|
||||
scene,
|
||||
} = props;
|
||||
|
||||
const focused = navigationState.index === scene.index;
|
||||
const opacity = focused ? 1 : 0;
|
||||
// If not focused, move the scene to the far away.
|
||||
const dir = scene.index > navigationState.index ? 1 : -1;
|
||||
const translate = focused ? 0 : (1000000 * dir);
|
||||
return {
|
||||
opacity,
|
||||
transform: [
|
||||
{ translateX: translate },
|
||||
{ translateY: translate },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
function forHorizontal(props: NavigationSceneRendererProps): Object {
|
||||
const {
|
||||
layout,
|
||||
|
@ -58,6 +81,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
|
|||
scene,
|
||||
} = props;
|
||||
|
||||
if (!layout.isMeasured) {
|
||||
return forInitial(props);
|
||||
}
|
||||
|
||||
const index = scene.index;
|
||||
const inputRange = [index - 1, index, index + 1];
|
||||
|
||||
|
|
Loading…
Reference in New Issue