diff --git a/examples/NavigationPlayground/js/StackWithTranslucentHeader.js b/examples/NavigationPlayground/js/StackWithTranslucentHeader.js index c64fc8c..821f4fa 100644 --- a/examples/NavigationPlayground/js/StackWithTranslucentHeader.js +++ b/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: { diff --git a/package.json b/package.json index b57d4a8..3d5ad90 100644 --- a/package.json +++ b/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": { diff --git a/src/react-navigation.js b/src/react-navigation.js index 70556b9..fa4320f 100644 --- a/src/react-navigation.js +++ b/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() { diff --git a/yarn.lock b/yarn.lock index 5587527..dd312df 100644 --- a/yarn.lock +++ b/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"