Header transition presets with support for standard iOS transition style (#3526)

Header transition presets with approximate support for UIKit transition style

examples/NavigationPlayground/js/App.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react';
-import { Constants, ScreenOrientation } from 'expo';
+import { Asset, Constants, ScreenOrientation } from 'expo';
 
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
@@ -28,13 +28,14 @@ import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
 import StacksWithKeys from './StacksWithKeys';
 import SimpleStack from './SimpleStack';
+import StackWithHeaderPreset from './StackWithHeaderPreset';
 import SimpleTabs from './SimpleTabs';
 import TabAnimations from './TabAnimations';
 
 const ExampleInfo = {
   SimpleStack: {
     name: 'Stack Example',
-    description: 'A card stack!',
+    description: 'A card stack',
   },
   SimpleTabs: {
     name: 'Tabs Example',
@@ -44,6 +45,10 @@ const ExampleInfo = {
     name: 'Drawer Example',
     description: 'Android-style drawer navigation',
   },
+  StackWithHeaderPreset: {
+    name: 'UIKit-style Header Transitions',
+    description: 'Masked back button and sliding header items. iOS only.',
+  },
   // MultipleDrawer: {
   //   name: 'Multiple Drawer Example',
   //   description: 'Add any drawer you need',
@@ -102,6 +107,7 @@ const ExampleRoutes = {
   // MultipleDrawer: {
   //   screen: MultipleDrawer,
   // },
+  StackWithHeaderPreset: StackWithHeaderPreset,
   TabsInDrawer: TabsInDrawer,
   CustomTabs: CustomTabs,
   CustomTransitioner: CustomTransitioner,
@@ -128,6 +134,11 @@ class MainScreen extends React.Component<any, State> {
     scrollY: new Animated.Value(0),
   };
 
+  componentWillMount() {
+    Asset.fromModule(require('react-navigation/src/views/assets/back-icon-mask.png')).downloadAsync();
+    Asset.fromModule(require('react-navigation/src/views/assets/back-icon.png')).downloadAsync();
+  }
+
   render() {
     const { navigation } = this.props;
 

examples/NavigationPlayground/js/SimpleStack.js

@@ -19,14 +19,12 @@ type MyNavScreenProps = {
 
 class MyBackButton extends React.Component<any, any> {
   render() {
-    return (
-      <Button onPress={this._navigateBack} title="Custom Back" />
-    );
+    return <Button onPress={this._navigateBack} title="Custom Back" />;
   }
 
   _navigateBack = () => {
     this.props.navigation.goBack(null);
-  }
+  };
 }
 
 const MyBackButtonWithNavigation = withNavigation(MyBackButton);
@@ -108,7 +106,7 @@ type MyPhotosScreenProps = {
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     title: 'Photos',
-    headerLeft: <MyBackButtonWithNavigation />
+    headerLeft: <MyBackButtonWithNavigation />,
   };
   _s0: NavigationEventSubscription;
   _s1: NavigationEventSubscription;
@@ -180,18 +178,20 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = StackNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-  Photos: {
-    path: 'photos/:name',
-    screen: MyPhotosScreen,
-  },
-});
+const SimpleStack = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
+  }
+);
 
 export default SimpleStack;

examples/NavigationPlayground/js/StackWithHeaderPreset.js

@@ -0,0 +1,68 @@
+/**
+ * @flow
+ */
+import type { NavigationScreenProp } from 'react-navigation';
+
+import * as React from 'react';
+import { Button, ScrollView, StatusBar } from 'react-native';
+import { StackNavigator, SafeAreaView } from 'react-navigation';
+
+type NavScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class HomeScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class OtherScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Your title here',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+const StackWithHeaderPreset = StackNavigator(
+  {
+    Home: HomeScreen,
+    Other: OtherScreen,
+  },
+  {
+    headerTransitionPreset: 'uikit',
+  }
+);
+
+export default StackWithHeaderPreset;