Add react-native-tabs as export from react-navigation

2026-03-06 22:39:41 +08:00 · 2018-03-18 17:50:02 -04:00
parent a9d8f2e03e
commit e6559f5878
13 changed files with 163 additions and 212 deletions
--- a/examples/NavigationPlayground/js/App.js
+++ b/examples/NavigationPlayground/js/App.js
@@ -32,7 +32,6 @@ import SimpleStack from './SimpleStack';
 import StackWithHeaderPreset from './StackWithHeaderPreset';
 import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
-import TabAnimations from './TabAnimations';
 import TabsWithNavigationFocus from './TabsWithNavigationFocus';

 const ExampleInfo = {
@@ -106,10 +105,6 @@ const ExampleInfo = {
    name: 'Link to Settings Tab',
    description: 'Deep linking into a route in tab',
  },
-  TabAnimations: {
-    name: 'Animated Tabs Example',
-    description: 'Tab transitions have custom animations',
-  },
  TabsWithNavigationFocus: {
    name: 'withNavigationFocus',
    description: 'Receive the focus prop to know when a screen is focused',
@@ -141,7 +136,6 @@ const ExampleRoutes = {
    screen: SimpleTabs,
    path: 'settings',
  },
-  TabAnimations,
  TabsWithNavigationFocus,
 };

--- a/examples/NavigationPlayground/js/SimpleTabs.js
+++ b/examples/NavigationPlayground/js/SimpleTabs.js
@@ -9,7 +9,7 @@ import type {

 import React from 'react';
 import { Platform, ScrollView, StatusBar, View } from 'react-native';
-import { SafeAreaView, createTabNavigator } from 'react-navigation';
+import { SafeAreaView, createBottomTabNavigator } from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
@@ -144,7 +144,7 @@ MySettingsScreen.navigationOptions = {
  ),
 };

-const SimpleTabs = createTabNavigator(
+const SimpleTabs = createBottomTabNavigator(
  {
    Home: {
      screen: MyHomeScreen,
@@ -164,8 +164,6 @@ const SimpleTabs = createTabNavigator(
    },
  },
  {
-    lazy: true,
-    removeClippedSubviews: true,
    tabBarOptions: {
      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
    },
--- a/examples/NavigationPlayground/js/StacksInTabs.js
+++ b/examples/NavigationPlayground/js/StacksInTabs.js
@@ -7,7 +7,7 @@ import { ScrollView, StatusBar } from 'react-native';
 import {
  SafeAreaView,
  createStackNavigator,
-  createTabNavigator,
+  createBottomTabNavigator,
 } from 'react-navigation';

 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -89,7 +89,7 @@ const SettingsTab = createStackNavigator({
  },
 });

-const StacksInTabs = createTabNavigator(
+const StacksInTabs = createBottomTabNavigator(
  {
    MainTab: {
      screen: MainTab,
@@ -121,9 +121,6 @@ const StacksInTabs = createTabNavigator(
    },
  },
  {
-    tabBarPosition: 'bottom',
-    animationEnabled: false,
-    swipeEnabled: false,
    tabBarOptions: {
      showLabel: false,
    },
--- a/examples/NavigationPlayground/js/StacksOverTabs.js
+++ b/examples/NavigationPlayground/js/StacksOverTabs.js
@@ -7,7 +7,7 @@ import { ScrollView, StatusBar } from 'react-native';
 import {
  SafeAreaView,
  createStackNavigator,
-  createTabNavigator,
+  createBottomTabNavigator,
 } from 'react-navigation';

 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -55,7 +55,7 @@ const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
 );

-const TabNav = createTabNavigator(
+const TabNav = createBottomTabNavigator(
  {
    MainTab: {
      screen: MyHomeScreen,
--- a/examples/NavigationPlayground/js/TabAnimations.js
+++ b/examples/NavigationPlayground/js/TabAnimations.js
@@ -1,128 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import { Animated, ScrollView, StatusBar } from 'react-native';
-import { createStackNavigator, createTabNavigator } from 'react-navigation';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-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="Open profile screen"
-    />
-    <Button
-      onPress={() => navigation.navigate('NotifSettings')}
-      title="Open notifications screen"
-    />
-    <Button
-      onPress={() => navigation.navigate('SettingsTab')}
-      title="Go to settings tab"
-    />
-    <Button onPress={() => navigation.goBack(null)} title="Go back" />
-    <StatusBar barStyle="default" />
-  </ScrollView>
-);
-
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
-
-const MyProfileScreen = ({ navigation }) => (
-  <MyNavScreen
-    banner={`${navigation.state.params.name}s Profile`}
-    navigation={navigation}
-  />
-);
-
-const MyNotificationsSettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-);
-
-const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Screen" navigation={navigation} />
-);
-
-const MainTab = createStackNavigator({
-  Home: {
-    screen: MyHomeScreen,
-    path: '/',
-    navigationOptions: {
-      title: 'Welcome',
-    },
-  },
-  Profile: {
-    screen: MyProfileScreen,
-    path: '/people/:name',
-    navigationOptions: ({ navigation }) => ({
-      title: `${navigation.state.params.name}'s Profile!`,
-    }),
-  },
-});
-
-const SettingsTab = createStackNavigator({
-  Settings: {
-    screen: MySettingsScreen,
-    path: '/',
-    navigationOptions: () => ({
-      title: 'Settings',
-    }),
-  },
-  NotifSettings: {
-    screen: MyNotificationsSettingsScreen,
-    navigationOptions: {
-      title: 'Notifications',
-    },
-  },
-});
-
-const TabAnimations = createTabNavigator(
-  {
-    MainTab: {
-      screen: MainTab,
-      path: '/',
-      navigationOptions: {
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ tintColor, focused }) => (
-          <Ionicons
-            name={focused ? 'ios-home' : 'ios-home-outline'}
-            size={26}
-            style={{ color: tintColor }}
-          />
-        ),
-      },
-    },
-    SettingsTab: {
-      screen: SettingsTab,
-      path: '/settings',
-      navigationOptions: {
-        tabBarLabel: 'Settings',
-        tabBarIcon: ({ tintColor, focused }) => (
-          <Ionicons
-            name={focused ? 'ios-settings' : 'ios-settings-outline'}
-            size={26}
-            style={{ color: tintColor }}
-          />
-        ),
-      },
-    },
-  },
-  {
-    tabBarPosition: 'bottom',
-    animationEnabled: true,
-    configureTransition: (currentTransitionProps, nextTransitionProps) => ({
-      timing: Animated.spring,
-      tension: 1,
-      friction: 35,
-    }),
-    swipeEnabled: false,
-  }
-);
-
-export default TabAnimations;
--- a/examples/NavigationPlayground/js/TabsInDrawer.js
+++ b/examples/NavigationPlayground/js/TabsInDrawer.js
@@ -4,7 +4,7 @@

 import React from 'react';
 import { Platform, ScrollView } from 'react-native';
-import { createTabNavigator, createDrawerNavigator } from 'react-navigation';
+import { createDrawerNavigator } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';
--- a/examples/NavigationPlayground/js/TabsWithNavigationFocus.js
+++ b/examples/NavigationPlayground/js/TabsWithNavigationFocus.js
@@ -3,8 +3,11 @@
 */

 import React from 'react';
-import { SafeAreaView, Text } from 'react-native';
-import { createTabNavigator, withNavigationFocus } from 'react-navigation';
+import { SafeAreaView, StatusBar, Text, View } from 'react-native';
+import {
+  createBottomTabNavigator,
+  withNavigationFocus,
+} from 'react-navigation';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Button } from './commonComponents/ButtonWithMargin';

@@ -66,9 +69,10 @@ const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
            />
          )}
          <Button
-            onPress={() => this.props.navigation.goBack(null)}
+            onPress={() => this.props.navigation.dismiss()}
            title="Back to other examples"
          />
+          <StatusBar barStyle="default" />
        </SafeAreaView>
      );
    }
@@ -76,27 +80,16 @@ const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
  return withNavigationFocus(TabScreen);
 };

-const TabsWithNavigationFocus = createTabNavigator(
-  {
-    One: {
-      screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
-    },
-    Two: {
-      screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
-    },
-    Three: {
-      screen: createTabScreen(
-        'Three',
-        'numeric-3-box-outline',
-        'numeric-3-box'
-      ),
-    },
+const TabsWithNavigationFocus = createBottomTabNavigator({
+  One: {
+    screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
  },
-  {
-    tabBarPosition: 'bottom',
-    animationEnabled: true,
-    swipeEnabled: true,
-  }
-);
+  Two: {
+    screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
+  },
+  Three: {
+    screen: createTabScreen('Three', 'numeric-3-box-outline', 'numeric-3-box'),
+  },
+});

 export default TabsWithNavigationFocus;
--- a/examples/NavigationPlayground/rn-cli.config.js
+++ b/examples/NavigationPlayground/rn-cli.config.js
@@ -11,7 +11,9 @@ module.exports = {
    return blacklist([
      /react\-navigation\/examples\/(?!NavigationPlayground).*/,
      /react\-navigation\/node_modules\/react-native\/(.*)/,
-      /react\-navigation\/node_modules\/react\/(.*)/
+      /react\-navigation\/node_modules\/react\/(.*)/,
+      /react\-navigation\/node_modules\/react-native-paper\/(.*)/,
+      /react\-navigation\/node_modules\/@expo\/vector-icons\/(.*)/,
    ]);
  },
  extraNodeModules: getNodeModulesForDirectory(path.resolve('.')),
--- a/examples/NavigationPlayground/yarn.lock
+++ b/examples/NavigationPlayground/yarn.lock
@@ -3,14 +3,14 @@


 "@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.41"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.41.tgz#68845c10a895050ab643e869100bbcf294b64e09"
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962"
  dependencies:
-    "@babel/highlight" "7.0.0-beta.41"
+    "@babel/highlight" "7.0.0-beta.42"

-"@babel/highlight@7.0.0-beta.41":
-  version "7.0.0-beta.41"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.41.tgz#7e1d634de3821e664bc8ad9688f240530d239b95"
+"@babel/highlight@7.0.0-beta.42":
+  version "7.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.42.tgz#a502a1c0d6f99b2b0e81d468a1b0c0e81e3f3623"
  dependencies:
    chalk "^2.0.0"
    esutils "^2.0.2"
@@ -240,12 +240,12 @@ any-promise@^1.0.0, any-promise@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"

-anymatch@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
  dependencies:
-    micromatch "^2.1.5"
-    normalize-path "^2.0.0"
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"

 append-transform@^0.4.0:
  version "0.4.0"
@@ -1203,7 +1203,7 @@ body-parser@1.18.2, body-parser@^1.15.2:

 body-parser@~1.13.3:
  version "1.13.3"
-  resolved "http://registry.npmjs.org/body-parser/-/body-parser-1.13.3.tgz#c08cf330c3358e151016a05746f13f029c97fa97"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.13.3.tgz#c08cf330c3358e151016a05746f13f029c97fa97"
  dependencies:
    bytes "2.1.0"
    content-type "~1.0.1"
@@ -1888,6 +1888,10 @@ deepmerge@^1.3.0, deepmerge@^1.5.1:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"

+deepmerge@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.0.tgz#511a54fff405fc346f0240bb270a3e9533a31102"
+
 default-require-extensions@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -4335,7 +4339,7 @@ metro@^0.24.1:
    xpipe "^1.0.5"
    yargs "^9.0.0"

-micromatch@^2.1.5, micromatch@^2.3.11:
+micromatch@^2.3.11:
  version "2.3.11"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
  dependencies:
@@ -4353,7 +4357,7 @@ micromatch@^2.1.5, micromatch@^2.3.11:
    parse-glob "^3.0.4"
    regex-cache "^0.4.2"

-micromatch@^3.1.8:
+micromatch@^3.1.4, micromatch@^3.1.8:
  version "3.1.9"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.9.tgz#15dc93175ae39e52e93087847096effc73efcf89"
  dependencies:
@@ -4413,7 +4417,7 @@ min-document@^2.19.0:
  dependencies:
    dom-walk "^0.1.0"

-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.3, minimatch@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
  dependencies:
@@ -4530,8 +4534,8 @@ mz@^2.6.0:
    thenify-all "^1.0.0"

 nan@^2.3.0:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.9.2.tgz#f564d75f5f8f36a6d9456cca7a6c4fe488ab7866"
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"

 nanomatch@^1.2.9:
  version "1.2.9"
@@ -4642,7 +4646,7 @@ normalize-package-data@^2.3.2:
    semver "2 || 3 || 4 || 5"
    validate-npm-package-license "^3.0.1"

-normalize-path@^2.0.0, normalize-path@^2.0.1:
+normalize-path@^2.0.1, normalize-path@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
  dependencies:
@@ -4676,8 +4680,8 @@ number-is-nan@^1.0.0:
  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

 nwmatcher@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"

 oauth-sign@~0.8.1, oauth-sign@~0.8.2:
  version "0.8.2"
@@ -5285,6 +5289,15 @@ react-native-maps@0.19.0:
  version "0.19.0"
  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.19.0.tgz#ce94fad1cf360e335cb4338a68c95f791e869074"

+react-native-paper@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-1.2.3.tgz#5632a08dea8eecc1f4e764e3cea260e5ba0f007a"
+  dependencies:
+    color "^2.0.1"
+    create-react-context "^0.2.1"
+    deepmerge "^2.0.1"
+    hoist-non-react-statics "^2.5.0"
+
 react-native-platform-touchable@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"
@@ -5413,6 +5426,17 @@ react-navigation-header-buttons@^0.0.4:
  dependencies:
    react-native-platform-touchable "^1.1.1"

+react-navigation-tabs@^0.1.0-alpha.0:
+  version "0.1.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.1.0-alpha.0.tgz#48a1ba6fb750594696e8214a71d0a97f07cbee28"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^1.0.2"
+    react-native-paper "^1.2.3"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^0.0.74"
+
 "react-navigation@link:../..":
  version "0.0.0"
  uid ""
@@ -5833,13 +5857,13 @@ safe-regex@^1.1.0:
    ret "~0.1.10"

 sane@^2.0.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.4.1.tgz#29f991208cf28636720efdc584293e7fd66663a5"
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-2.5.0.tgz#6359cd676f5efd9988b264d8ce3b827dd6b27bec"
  dependencies:
-    anymatch "^1.3.0"
+    anymatch "^2.0.0"
    exec-sh "^0.2.0"
    fb-watchman "^2.0.0"
-    minimatch "^3.0.2"
+    micromatch "^3.1.4"
    minimist "^1.1.1"
    walker "~1.0.5"
    watch "~0.18.0"
--- a/flow/react-navigation.js
+++ b/flow/react-navigation.js
@@ -793,6 +793,19 @@ declare module 'react-navigation' {
    routeConfigs: NavigationRouteConfigMap,
    config?: _TabNavigatorConfig
  ): NavigationContainer<*, *, *>;
+  /* TODO: fix the config for each of these tab navigator types */
+  declare export function createBottomTabNavigator(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: _TabNavigatorConfig
+  ): NavigationContainer<*, *, *>;
+  declare export function createMaterialBottomTabNavigator(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: _TabNavigatorConfig
+  ): NavigationContainer<*, *, *>;
+  declare export function createMaterialTopTabNavigator(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: _TabNavigatorConfig
+  ): NavigationContainer<*, *, *>;
  declare type _SwitchNavigatorConfig = {|
    ...NavigationSwitchRouterConfig,
  |};
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
    "react-lifecycles-compat": "^1.0.2",
    "react-native-drawer-layout-polyfill": "^1.3.2",
    "react-native-safe-area-view": "^0.7.0",
-    "react-navigation-deprecated-tab-navigator": "1.0.0"
+    "react-navigation-deprecated-tab-navigator": "1.0.0",
+    "react-navigation-tabs": "^0.1.0-alpha.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
--- a/src/react-navigation.js
+++ b/src/react-navigation.js
@@ -37,19 +37,6 @@ module.exports = {
    );
    return require('./navigators/createSwitchNavigator').default;
  },
-  get createTabNavigator() {
-    console.warn(
-      'TabNavigator is deprecated. Please use the react-navigation-tabs package instead: https://github.com/react-navigation/react-navigation-tabs'
-    );
-    return require('react-navigation-deprecated-tab-navigator')
-      .createTabNavigator;
-  },
-  get TabNavigator() {
-    console.warn(
-      'TabNavigator is deprecated. Please use the react-navigation-tabs package instead: https://github.com/react-navigation/react-navigation-tabs'
-    );
-    return require('react-navigation-deprecated-tab-navigator').default;
-  },
  get createDrawerNavigator() {
    return require('./navigators/createDrawerNavigator').default;
  },
@@ -59,6 +46,28 @@ module.exports = {
    );
    return require('./navigators/createDrawerNavigator').default;
  },
+  get createTabNavigator() {
+    console.warn(
+      'TabNavigator is deprecated. Please use the createBottomTabNavigator or createMaterialTopNavigator instead.'
+    );
+    return require('react-navigation-deprecated-tab-navigator')
+      .createTabNavigator;
+  },
+  get TabNavigator() {
+    console.warn(
+      'TabNavigator is deprecated. Please use the createBottomTabNavigator or createMaterialTopNavigator instead.'
+    );
+    return require('react-navigation-deprecated-tab-navigator').default;
+  },
+  get createBottomTabNavigator() {
+    return require('react-navigation-tabs').createBottomTabNavigator;
+  },
+  get createMaterialBottomTabNavigator() {
+    return require('react-navigation-tabs').createMaterialBottomTabNavigator;
+  },
+  get createMaterialTopTabNavigator() {
+    return require('react-navigation-tabs').createMaterialTopTabNavigator;
+  },

  // Routers
  get StackRouter() {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1372,20 +1372,34 @@ collection-visit@^1.0.0:
    map-visit "^1.0.0"
    object-visit "^1.0.0"

-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
  dependencies:
    color-name "^1.1.1"

-color-name@^1.1.1:
+color-name@^1.0.0, color-name@^1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"

+color-string@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"

+color@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
@@ -1679,6 +1693,10 @@ deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"

+deepmerge@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.0.tgz#511a54fff405fc346f0240bb270a3e9533a31102"
+
 default-require-extensions@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -2712,7 +2730,7 @@ hoek@4.x.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"

-hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1:
+hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"

@@ -2865,6 +2883,10 @@ is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

+is-arrayish@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
+
 is-binary-path@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -4827,6 +4849,15 @@ react-native-drawer-layout@1.3.2:
  dependencies:
    react-native-dismiss-keyboard "1.0.0"

+react-native-paper@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-1.2.3.tgz#5632a08dea8eecc1f4e764e3cea260e5ba0f007a"
+  dependencies:
+    color "^2.0.1"
+    create-react-context "^0.2.1"
+    deepmerge "^2.0.1"
+    hoist-non-react-statics "^2.5.0"
+
 react-native-safe-area-view@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
@@ -4912,6 +4943,17 @@ react-navigation-deprecated-tab-navigator@1.0.0:
  dependencies:
    react-native-tab-view "^0.0.74"

+react-navigation-tabs@^0.1.0-alpha.0:
+  version "0.1.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.1.0-alpha.0.tgz#48a1ba6fb750594696e8214a71d0a97f07cbee28"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^1.0.2"
+    react-native-paper "^1.2.3"
+    react-native-safe-area-view "^0.7.0"
+    react-native-tab-view "^0.0.74"
+
 react-proxy@^1.1.7:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
@@ -5452,6 +5494,12 @@ simple-plist@^0.2.1:
    bplist-parser "0.1.1"
    plist "2.0.1"

+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"