Update react-navigation-stack, export HeaderStyleInterpolator, and add example of using it to playground

examples/NavigationPlayground/js/StackWithTranslucentHeader.js

@@ -19,7 +19,11 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { Header, createStackNavigator } from 'react-navigation';
+import {
+  Header,
+  HeaderStyleInterpolator,
+  createStackNavigator,
+} from 'react-navigation';
 import invariant from 'invariant';
 
 import SampleText from './SampleText';
@@ -230,6 +234,14 @@ const StackWithTranslucentHeader = createStackNavigator(
   },
   {
     headerTransitionPreset: 'uikit',
+
+    // You can leave this out if you don't want the card shadow to
+    // be visible through the header
+    transitionConfig: () => ({
+      headerBackgroundInterpolator:
+        HeaderStyleInterpolator.forBackgroundWithTranslation,
+    }),
+
     navigationOptions: {
       headerTransparent: true,
       headerStyle: {

package.json

@@ -39,7 +39,7 @@
     "react-native-safe-area-view": "^0.9.0",
     "react-navigation-deprecated-tab-navigator": "1.3.0",
     "react-navigation-drawer": "0.5.0",
-    "react-navigation-stack": "0.1.2",
+    "react-navigation-stack": "0.2.1",
     "react-navigation-tabs": "0.6.0"
   },
   "devDependencies": {

src/react-navigation.js

@@ -143,6 +143,9 @@ module.exports = {
   get HeaderBackButton() {
     return require('react-navigation-stack').HeaderBackButton;
   },
+  get HeaderStyleInterpolator() {
+    return require('react-navigation-stack').HeaderStyleInterpolator;
+  },
 
   // DrawerView
   get DrawerView() {

yarn.lock

@@ -4751,9 +4751,9 @@ react-native-safe-area-view@^0.7.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-safe-area-view@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.8.0.tgz#22d78cb8e8658d04a10cd53c1546e0bc86cb7aea"
+react-native-safe-area-view@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.9.0.tgz#10ece2ecac70e7005a5b0b3f06c8833060e6d21f"
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
@@ -4848,9 +4848,9 @@ react-navigation-drawer@0.5.0:
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"
 
-react-navigation-stack@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.1.2.tgz#cde9448347b4b08fc27e4147e81a5878347c56fb"
+react-navigation-stack@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.2.1.tgz#30529f48129a95a456084a58b3acb2a378dc9408"
 
 react-navigation-tabs@0.6.0:
   version "0.6.0"