[Playgrond] Add StacksOverTabs example (#928)

* [Playground] Duplicate StacksInTabs to StacksOverTabs

* [Playground] Move nested routes into root stack so they appear on top

* [Playground] Go to SettingsTab instead of pushing a new Settings screen

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -17,6 +17,7 @@ import CustomTabs from './CustomTabs';
 import Drawer from './Drawer';
 import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
+import StacksOverTabs from './StacksOverTabs';
 import SimpleStack from './SimpleStack';
 import SimpleTabs from './SimpleTabs';
 
@@ -51,6 +52,11 @@ const ExampleRoutes = {
     description: 'Nested stack navigation in tabs',
     screen: StacksInTabs,
   },
+  StacksOverTabs: {
+    name: 'Stacks over Tabs',
+    description: 'Nested stack navigation that pushes on top of tabs',
+    screen: StacksOverTabs,
+  },
   LinkStack: {
     name: 'Link in Stack',
     description: 'Deep linking into a route in stack',

packages/react-navigation/examples/NavigationPlayground/js/StacksInTabs.js

@@ -27,7 +27,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to notification settings"
     />
     <Button
-      onPress={() => navigation.navigate('Settings')}
+      onPress={() => navigation.navigate('SettingsTab')}
       title="Go to settings"
     />
     <Button

packages/react-navigation/examples/NavigationPlayground/js/StacksOverTabs.js

@@ -0,0 +1,131 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import {
+  Button,
+  ScrollView,
+} from 'react-native';
+import {
+  StackNavigator,
+  TabNavigator,
+} from 'react-navigation';
+
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({ navigation, banner }) => (
+  <ScrollView>
+    <SampleText>{banner}</SampleText>
+    <Button
+      onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
+      title="Go to a profile screen"
+    />
+    <Button
+      onPress={() => navigation.navigate('NotifSettings')}
+      title="Go to notification settings"
+    />
+    <Button
+      onPress={() => navigation.navigate('SettingsTab')}
+      title="Go to settings"
+    />
+    <Button
+      onPress={() => navigation.goBack(null)}
+      title="Go back"
+    />
+  </ScrollView>
+);
+
+const MyHomeScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner="Home Screen"
+    navigation={navigation}
+  />
+);
+
+const MyProfileScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner={`${navigation.state.params.name}s Profile`}
+    navigation={navigation}
+  />
+);
+MyProfileScreen.navigationOptions = {
+  title: ({ state }) => `${state.params.name}'s Profile!`,
+};
+
+const MyNotificationsSettingsScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner="Notification Settings"
+    navigation={navigation}
+  />
+);
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner="Settings"
+    navigation={navigation}
+  />
+);
+
+const TabNav = TabNavigator({
+  MainTab: {
+    screen: MyHomeScreen,
+    path: '/',
+    navigationOptions: {
+      tabBar: () => ({
+        label: 'Home',
+        icon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-home' : 'ios-home-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      }),
+    },
+  },
+  SettingsTab: {
+    screen: MySettingsScreen,
+    path: '/settings',
+    navigationOptions: {
+      tabBar: () => ({
+        label: 'Settings',
+        icon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-settings' : 'ios-settings-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      }),
+    },
+  },
+}, {
+  tabBarPosition: 'bottom',
+  animationEnabled: false,
+  swipeEnabled: false,
+});
+
+const StacksOverTabs = StackNavigator({
+  Root: {
+    screen: TabNav,
+  },
+  NotifSettings: {
+    screen: MyNotificationsSettingsScreen,
+    navigationOptions: {
+      title: () => 'Notification Settings',
+    },
+  },
+  Profile: {
+    screen: MyProfileScreen,
+    path: '/people/:name',
+    navigationOptions: {
+      title: ({ state }) => `${state.params.name}'s Profile!`,
+    },
+  },
+}, {
+  headerMode: 'none',
+});
+
+export default StacksOverTabs;