diff --git a/packages/stack/src/views/Header/HeaderStyleInterpolator.js b/packages/stack/src/views/Header/HeaderStyleInterpolator.js index 837f925c..0530fb92 100644 --- a/packages/stack/src/views/Header/HeaderStyleInterpolator.js +++ b/packages/stack/src/views/Header/HeaderStyleInterpolator.js @@ -324,8 +324,14 @@ function forCenterFromLeft(props) { }; } +// Default to no transition +function forBackground() { + return null; +} + +// Translate the background with the card const BACKGROUND_OFFSET = Dimensions.get('window').width; -function forBackground(props) { +function forBackgroundWithTranslation(props) { const { position, scene } = props; const interpolate = getSceneIndicesForInterpolationInputRange(props); if (!interpolate) return { opacity: 0 }; @@ -354,4 +360,5 @@ export default { forCenter, forRight, forBackground, + forBackgroundWithTranslation, }; diff --git a/packages/stack/src/views/StackView/StackViewLayout.js b/packages/stack/src/views/StackView/StackViewLayout.js index e4190606..f9716e2b 100644 --- a/packages/stack/src/views/StackView/StackViewLayout.js +++ b/packages/stack/src/views/StackView/StackViewLayout.js @@ -151,6 +151,7 @@ class StackViewLayout extends React.Component { headerLeftInterpolator, headerTitleInterpolator, headerRightInterpolator, + headerBackgroundInterpolator, } = this._getTransitionConfig(); const { transitionProps, ...passProps } = this.props; @@ -168,6 +169,7 @@ class StackViewLayout extends React.Component { leftInterpolator: headerLeftInterpolator, titleInterpolator: headerTitleInterpolator, rightInterpolator: headerRightInterpolator, + backgroundInterpolator: headerBackgroundInterpolator, })} );