From 758fcaa8e4019ca443f680682ad250368a511754 Mon Sep 17 00:00:00 2001
From: Eric Vicenti <eric@aven.io>
Date: Wed, 31 Oct 2018 12:21:04 -0700
Subject: [PATCH] Header to fade by default

Fixes https://github.com/react-navigation/react-navigation-stack/issues/12
---
 src/views/Header/HeaderStyleInterpolator.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/Header/HeaderStyleInterpolator.js b/src/views/Header/HeaderStyleInterpolator.js
index 0530fb9..60a0b5e 100644
--- a/src/views/Header/HeaderStyleInterpolator.js
+++ b/src/views/Header/HeaderStyleInterpolator.js
@@ -324,11 +324,22 @@ function forCenterFromLeft(props) {
   };
 }
 
-// Default to no transition
-function forBackground() {
-  return null;
+// Fade in background of header while transitioning
+function forBackgroundWithFade(props) {
+  const { position, scene } = props;
+  const sceneRange = getSceneIndicesForInterpolationInputRange(props);
+  if (!sceneRange) return { opacity: 0 };
+  return {
+    opacity: position.interpolate({
+      inputRange: [sceneRange.first, scene.index, sceneRange.last],
+      outputRange: [0, 1, 1],
+    }),
+  };
 }
 
+// Default to fade transition
+const forBackground = forBackgroundWithFade;
+
 // Translate the background with the card
 const BACKGROUND_OFFSET = Dimensions.get('window').width;
 function forBackgroundWithTranslation(props) {
@@ -360,5 +371,6 @@ export default {
   forCenter,
   forRight,
   forBackground,
+  forBackgroundWithFade,
   forBackgroundWithTranslation,
 };