Default to hide hidden header backgrounds

packages/stack/example/App.js

@@ -16,6 +16,11 @@ import LifecycleInteraction from './src/LifecycleInteraction';
 import GestureInteraction from './src/GestureInteraction';
 import SwitchWithStacks from './src/SwitchWithStacks';
 import StackWithDrawer from './src/StackWithDrawer';
+import {
+  HeaderBackgroundDefault,
+  HeaderBackgroundTranslate,
+  HeaderBackgroundFade,
+} from './src/HeaderBackgrounds';
 
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
@@ -54,6 +59,21 @@ const data = [
     title: 'Stack with drawer inside',
     routeName: 'StackWithDrawer',
   },
+  {
+    component: HeaderBackgroundDefault,
+    title: 'Header background (default transition)',
+    routeName: 'HeaderBackgroundDefault',
+  },
+  {
+    component: HeaderBackgroundFade,
+    title: 'Header background (fade transition)',
+    routeName: 'HeaderBackgroundFade',
+  },
+  {
+    component: HeaderBackgroundTranslate,
+    title: 'Header background (translate transition)',
+    routeName: 'HeaderBackgroundTranslate',
+  },
 ];
 
 // Cache images
@@ -103,9 +123,6 @@ const Root = createStackNavigator(
   {
     mode: 'modal',
     headerMode: 'none',
-    defaultNavigationOptions: {
-      gesturesEnabled: false,
-    },
   }
 );
 

packages/stack/example/src/HeaderBackgrounds.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import {
+  createStackNavigator,
+  HeaderStyleInterpolator,
+} from 'react-navigation-stack';
+
+function createHeaderBackgroundExample(options = {}) {
+  return createStackNavigator(
+    {
+      Login: {
+        screen: ({ navigation }) => (
+          <View style={styles.container}>
+            <Text
+              style={styles.tips}
+              onPress={() => navigation.navigate('Games')}
+            >
+              Login Screen
+            </Text>
+          </View>
+        ),
+        navigationOptions: {
+          headerTitle: 'Login Screen',
+          headerTintColor: '#fff',
+          headerBackground: (
+            <View style={{ flex: 1, backgroundColor: '#FF0066' }} />
+          ),
+        },
+      },
+      Games: {
+        screen: ({ navigation }) => (
+          <View style={styles.container}>
+            <Text
+              style={styles.tips}
+              onPress={() => navigation.navigate('Main')}
+            >
+              Games Screen
+            </Text>
+          </View>
+        ),
+        navigationOptions: {
+          headerTitle: 'Games Screen',
+          headerTintColor: '#fff',
+          headerBackground: (
+            <View style={{ flex: 1, backgroundColor: '#3388FF' }} />
+          ),
+        },
+      },
+      Main: {
+        screen: ({ navigation }) => (
+          <View style={styles.container}>
+            <Text style={styles.tips} onPress={() => navigation.navigate('My')}>
+              Main Screen
+            </Text>
+          </View>
+        ),
+        navigationOptions: {
+          headerTitle: 'Main Screen',
+        },
+      },
+      My: {
+        screen: ({ navigation }) => (
+          <View style={styles.container}>
+            <Text
+              style={styles.tips}
+              onPress={() => navigation.navigate('News')}
+            >
+              My Screen
+            </Text>
+          </View>
+        ),
+        navigationOptions: {
+          headerTitle: 'My Screen',
+        },
+      },
+      News: {
+        screen: ({ navigation }) => (
+          <View style={styles.container}>
+            <Text style={styles.tips} onPress={() => {}}>
+              News Screen
+            </Text>
+          </View>
+        ),
+        navigationOptions: {
+          headerTitle: 'News Screen',
+        },
+      },
+    },
+    {
+      initialRouteName: 'Login',
+      ...options,
+    }
+  );
+}
+export const HeaderBackgroundDefault = createHeaderBackgroundExample();
+export const HeaderBackgroundTranslate = createHeaderBackgroundExample({
+  transitionConfig: () => ({
+    headerBackgroundInterpolator:
+      HeaderStyleInterpolator.forBackgroundWithTranslation,
+  }),
+});
+export const HeaderBackgroundFade = createHeaderBackgroundExample({
+  transitionConfig: () => ({
+    headerBackgroundInterpolator: HeaderStyleInterpolator.forBackgroundWithFade,
+  }),
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tips: {
+    fontSize: 20,
+  },
+});