Merge pull request #36 from slorber/backbehavior-examples

Add switch backbehavior examples

packages/core/example/App.js

@@ -10,7 +10,7 @@ import {
 import { List, Divider } from 'react-native-paper';
 
 import SimpleStack from './src/SimpleStack';
-import SimpleTabs from './src/SimpleTabs';
+import SimpleTabs, { createSimpleTabs } from './src/SimpleTabs';
 import EventsStack from './src/EventsStack';
 
 // Comment/uncomment the following two lines to toggle react-native-screens
@@ -27,6 +27,17 @@ const data = [
   { component: EventsStack, title: 'Events', routeName: 'EventsStack' },
 ];
 
+['initialRoute', 'none', 'order', 'history'].forEach(backBehavior => {
+  data.push({
+    component: createSimpleTabs({
+      backBehavior: backBehavior,
+      initialRouteName: 'C', // more easy to test initialRoute behavior
+    }),
+    title: `Tabs backBehavior=${backBehavior}`,
+    routeName: `Tabs backBehavior=${backBehavior}`,
+  });
+});
+
 // Cache images
 Asset.loadAsync(StackAssets);
 

packages/core/example/src/SimpleTabs.js

@@ -24,30 +24,36 @@ class Screen extends React.Component {
   }
 }
 
-export default createBottomTabNavigator(
-  {
-    A: {
-      screen: Screen,
-      params: { title: 'First One', icon: 'activity' },
+export const createSimpleTabs = (options = {}) => {
+  return createBottomTabNavigator(
+    {
+      A: {
+        screen: Screen,
+        params: { title: 'First One', icon: 'activity' },
+      },
+      B: {
+        screen: Screen,
+        params: { title: 'Second One', icon: 'aperture' },
+      },
+      C: {
+        screen: Screen,
+        params: { title: 'Third One', icon: 'anchor' },
+      },
+      D: {
+        screen: Screen,
+        params: { title: 'Fourth One', icon: 'archive' },
+      },
     },
-    B: {
-      screen: Screen,
-      params: { title: 'Second One', icon: 'aperture' },
-    },
-    C: {
-      screen: Screen,
-      params: { title: 'Third One', icon: 'award' },
-    },
-    D: {
-      screen: Screen,
-      params: { title: 'Fourth One', icon: 'bell' },
-    },
-  },
-  {
-    backBehavior: 'history',
-    tabBarOptions: {
-      activeTintColor: '#000',
-      inactiveTintColor: '#eee',
-    },
-  }
-);
+    {
+      backBehavior: 'history',
+      ...options,
+      tabBarOptions: {
+        activeTintColor: '#000',
+        inactiveTintColor: '#eee',
+        ...options.tabBarOptions,
+      },
+    }
+  );
+};
+
+export default createSimpleTabs();