Add header preset example

example/App.js

@@ -20,6 +20,7 @@ import LifecycleInteraction from './src/LifecycleInteraction';
 import GestureInteraction from './src/GestureInteraction';
 import SwitchWithStacks from './src/SwitchWithStacks';
 import StackWithDrawer from './src/StackWithDrawer';
+import HeaderPreset from './src/HeaderPreset';
 import {
   HeaderBackgroundDefault,
   HeaderBackgroundTranslate,
@@ -36,6 +37,7 @@ useScreens();
 
 const data = [
   { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
+  { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
   { component: ImageStack, title: 'Image', routeName: 'ImageStack' },
   { component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
   {

example/src/HeaderPreset.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Button, ScrollView, StatusBar } from 'react-native';
+import { SafeAreaView } from '@react-navigation/native';
+import { createStackNavigator } from 'react-navigation-stack';
+
+class HomeScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+
+  render() {
+    const { navigation } = this.props;
+    const { push } = navigation;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button onPress={() => push('Other')} title="Push another screen" />
+        <Button
+          onPress={() => push('ScreenWithNoHeader')}
+          title="Push screen with no header"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go Home" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class OtherScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Your title here',
+  };
+
+  render() {
+    const { navigation } = this.props;
+    const { push, pop } = navigation;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button
+          onPress={() => push('ScreenWithLongTitle')}
+          title="Push another screen"
+        />
+        <Button
+          onPress={() => push('ScreenWithNoHeader')}
+          title="Push screen with no header"
+        />
+        <Button onPress={() => pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class ScreenWithLongTitle extends React.Component {
+  static navigationOptions = {
+    title: "Another title that's kind of long",
+  };
+
+  render() {
+    const { navigation } = this.props;
+    const { pop } = navigation;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button onPress={() => pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class ScreenWithNoHeader extends React.Component {
+  static navigationOptions = {
+    header: null,
+    title: 'No Header',
+  };
+
+  render() {
+    const { navigation } = this.props;
+    const { push, pop } = navigation;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button onPress={() => push('Other')} title="Push another screen" />
+        <Button onPress={() => pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+const StackWithHeaderPreset = createStackNavigator(
+  {
+    Home: HomeScreen,
+    Other: OtherScreen,
+    ScreenWithNoHeader: ScreenWithNoHeader,
+    ScreenWithLongTitle: ScreenWithLongTitle,
+  },
+  {
+    headerTransitionPreset: 'uikit',
+  }
+);
+
+export default StackWithHeaderPreset;