feat: initial commit

2026-02-15 09:17:26 +08:00 · 2018-03-17 18:37:54 +01:00
parent 8511aa7a05
commit f362912bf7
60 changed files with 18179 additions and 0 deletions
--- a/packages/tabs/.babelrc
+++ b/packages/tabs/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}
--- a/packages/tabs/.circleci/config.yml
+++ b/packages/tabs/.circleci/config.yml
@@ -0,0 +1,63 @@
+version: 2
+
+defaults: &defaults
+  docker:
+    - image: circleci/node:7.10
+  working_directory: ~/project
+
+jobs:
+  install-dependencies:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - restore_cache:
+          keys:
+            - v1-dependencies-example-{{ checksum "example/package.json" }}
+            - v1-dependencies-example-
+      - run: |
+          yarn install
+          yarn install --cwd example
+      - save_cache:
+          key: v1-dependencies-{{ checksum "package.json" }}
+          paths: node_modules
+      - save_cache:
+          key: v1-dependencies-example-{{ checksum "example/package.json" }}
+          paths: example/node_modules
+      - persist_to_workspace:
+          root: .
+          paths: .
+  lint-and-flow:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn run lint
+            yarn run flow
+  unit-tests:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: yarn test -- --coverage
+        - store_artifacts:
+            path: coverage
+            destination: coverage
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - install-dependencies
+      - lint-and-flow:
+          requires:
+            - install-dependencies
+      - unit-tests:
+          requires:
+            - install-dependencies
--- a/packages/tabs/.editorconfig
+++ b/packages/tabs/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/packages/tabs/.eslintignore
+++ b/packages/tabs/.eslintignore
@@ -0,0 +1,3 @@
+node_modules/
+flow-typed/
+dist/
--- a/packages/tabs/.eslintrc
+++ b/packages/tabs/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "extends": "eslint-config-satya164",
+
+  "plugins": ["react-native-globals"],
+
+  "env": {
+    "es6": true,
+    "react-native-globals/all": true,
+  }
+}
--- a/packages/tabs/.flowconfig
+++ b/packages/tabs/.flowconfig
@@ -0,0 +1,69 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore templates for 'react-native init'
+.*/local-cli/templates/.*
+
+; Ignore the website subdir
+<PROJECT_ROOT>/website/.*
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Ignore duplicate modules under example/
+.*/example/node_modules/fbjs
+.*/example/node_modules/fbemitter
+.*/example/node_modules/react
+.*/example/node_modules/react-native
+.*/example/node_modules/expo
+.*/example/node_modules/xdl
+.*/example/node_modules/reqwest
+.*/example/\.buckd/
+
+.*/node_modules/react-native-gesture-handler
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+
+[options]
+emoji=true
+
+module.system=haste
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^expo$' -> 'emptyObject'
+module.name_mapper='^react-native-gesture-handler$' -> 'emptyObject'
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.56.0
--- a/packages/tabs/.github/ISSUE_TEMPLATE.md
+++ b/packages/tabs/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,32 @@
+<!-- Issues that don't use this template are likely to be closed. -->
+<!-- Please search the existing issues and read the documentation before opening an issue. -->
+
+### Current behaviour
+
+<!-- What's currently happening? -->
+
+### Expected behaviour
+
+<!-- What do you expect to happen? If there is an error, provide the complete error message with stack trace. -->
+
+### Code sample
+
+<!-- Provide a complete code sample that could be run to reproduce the issue, ideally on snack.expo.io or in a github repo. -->
+
+### Screenshots (if applicable)
+
+<!-- Include screenshots if there's a bug in the layout. -->
+
+### What have you tried
+
+<!-- List down the steps you have tried to fix or identify the issue and links to any related issues you found. -->
+
+### Your Environment
+
+| software              | version
+| --------------------- | -------
+| ios or android        |
+| react-native          |
+| react-navigation-tabs |
+| node                  |
+| npm or yarn           |
--- a/packages/tabs/.github/PULL_REQUEST_TEMPLATE.md
+++ b/packages/tabs/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,10 @@
+<!-- Please provide enough information so that others can review your pull request. -->
+<!-- Keep pull requests small and focused on a single change. -->
+
+### Motivation
+
+<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->
+
+### Test plan
+
+<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->
--- a/packages/tabs/.gitignore
+++ b/packages/tabs/.gitignore
@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+tsconfig.json
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Build
+dist/
--- a/packages/tabs/LICENSE.md
+++ b/packages/tabs/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Native Community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/packages/tabs/README.md
+++ b/packages/tabs/README.md
@@ -0,0 +1,15 @@
+# React Navigation Tabs
+
+[![Build Status][build-badge]][build]
+[![Version][version-badge]][package]
+[![MIT License][license-badge]][license]
+
+Tab navigators for React Navigation.
+
+<!-- badges -->
+[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation-tabs/master.svg?style=flat-square
+[build]: https://circleci.com/gh/react-navigation/react-navigation-tabs
+[version-badge]: https://img.shields.io/npm/v/react-navigation-tabs.svg?style=flat-square
+[package]: https://www.npmjs.com/package/react-navigation-tabs
+[license-badge]: https://img.shields.io/npm/l/react-navigation-tabs.svg?style=flat-square
+[license]: https://opensource.org/licenses/MIT
--- a/packages/tabs/setup/enzyme.js
+++ b/packages/tabs/setup/enzyme.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
--- a/packages/tabs/example/.babelrc
+++ b/packages/tabs/example/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "expo"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "react-navigation-tabs": "../src"
+      }
+    }]
+  ]
+}
--- a/packages/tabs/example/.buckconfig
+++ b/packages/tabs/example/.buckconfig
@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
--- a/packages/tabs/example/.eslintrc
+++ b/packages/tabs/example/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "extends": '../.eslintrc',
+
+  "settings": {
+    "import/core-modules": [ "expo", "react-navigation-tabs", "react-navigation-tabs/types" ]
+  },
+
+  "rules": {
+    "react/prop-types": "off",
+  }
+}
--- a/packages/tabs/example/.watchmanconfig
+++ b/packages/tabs/example/.watchmanconfig
@@ -0,0 +1 @@
+{}
--- a/packages/tabs/example/App.js
+++ b/packages/tabs/example/App.js
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Expo from 'expo';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { createStackNavigator } from 'react-navigation';
+import BottomTabs from './src/BottomTabs';
+import MaterialTopTabs from './src/MaterialTopTabs';
+import MaterialBottomTabs from './src/MaterialBottomTabs';
+
+class Home extends React.Component {
+  render() {
+    return (
+      <View>
+        <TouchableOpacity
+          style={styles.item}
+          onPress={() => this.props.navigation.push('BottomTabs')}
+        >
+          <Text>Bottom tabs</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.item}
+          onPress={() => this.props.navigation.push('MaterialTopTabs')}
+        >
+          <Text>Material top tabs</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.item}
+          onPress={() => this.props.navigation.push('MaterialBottomTabs')}
+        >
+          <Text>Material bottom tabs</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const App = createStackNavigator({
+  Home,
+  BottomTabs,
+  MaterialTopTabs,
+  MaterialBottomTabs,
+});
+
+const styles = {
+  item: {
+    padding: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#eee',
+  },
+};
+
+Expo.registerRootComponent(App);
--- a/packages/tabs/example/README.md
+++ b/packages/tabs/example/README.md
@@ -0,0 +1,8 @@
+## Run the example
+
+- [View it with Expo](https://expo.io/@satya164/react-navigation-tabs-demos)
+- Run the example locally
+  + Clone the repository and `cd` to this directory
+  + Run `yarn` to install the dependencies
+  + Run `yarn start` to start the packager
+  + Scan the QR Code with the Expo app
--- a/packages/tabs/example/app.json
+++ b/packages/tabs/example/app.json
@@ -0,0 +1,22 @@
+{
+  "expo": {
+    "name": "React Navigation Tabs Example",
+    "description": "Demonstrates the various capabilities of react-navigation-tabs: https://github.com/react-navigation/react-navigation-tabs",
+    "slug": "react-navigation-tabs-demos",
+    "sdkVersion": "23.0.0",
+    "version": "1.0.0",
+    "primaryColor": "#2196f3",
+    "icon": "assets/icon.png",
+    "loading": {
+      "icon": "assets/icon.png",
+      "hideExponentText": false
+    },
+    "packagerOpts": {
+      "assetExts": [
+        "ttf"
+      ],
+      "config": "./rn-cli.config.js",
+      "projectRoots": ""
+    }
+  }
+}
--- a/packages/tabs/example/package.json
+++ b/packages/tabs/example/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "tabviewexample",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "react-native-scripts start",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^6.2.0",
+    "expo": "~23.0.4",
+    "hoist-non-react-statics": "^2.5.0",
+    "prop-types": "^15.6.0",
+    "react": "16.0.0",
+    "react-native": "0.50.4",
+    "react-native-paper": "^1.2.3",
+    "react-native-safe-area-view": "^0.7.0",
+    "react-native-tab-view": "^0.0.74",
+    "react-navigation": "^2.0.0-alpha.5"
+  },
+  "devDependencies": {
+    "babel-plugin-module-resolver": "^3.0.0",
+    "babel-preset-expo": "^4.0.0",
+    "glob-to-regexp": "^0.3.0",
+    "react-native-scripts": "1.8.1"
+  },
+  "main": "App.js",
+  "resolutions": {
+    "**/hoist-non-react-statics": "2.5.0"
+  }
+}
--- a/packages/tabs/example/rn-cli.config.js
+++ b/packages/tabs/example/rn-cli.config.js
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-commonjs */
+
+const path = require('path');
+const glob = require('glob-to-regexp');
+const blacklist = require('metro-bundler/src/blacklist');
+const pak = require('../package.json');
+
+const dependencies = Object.keys(pak.dependencies);
+const peerDependencies = Object.keys(pak.peerDependencies);
+
+module.exports = {
+  getProjectRoots() {
+    return [__dirname, path.resolve(__dirname, '..')];
+  },
+  getProvidesModuleNodeModules() {
+    return [...dependencies, ...peerDependencies];
+  },
+  getBlacklistRE() {
+    return blacklist([
+      glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
+      glob(`${__dirname}/node_modules/*/{${dependencies.join(',')}}`, {
+        extended: true,
+      }),
+    ]);
+  },
+};
--- a/packages/tabs/example/src/BottomTabs.js
+++ b/packages/tabs/example/src/BottomTabs.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const tabBarIcon = name => ({ tintColor }) => (
+  <MaterialIcons name={name} color={tintColor} size={24} />
+);
+
+class Album extends React.Component {
+  static navigationOptions = {
+    tabBarIcon: tabBarIcon('photo-album'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Album</Text>
+      </View>
+    );
+  }
+}
+
+class Library extends React.Component {
+  static navigationOptions = {
+    tabBarIcon: tabBarIcon('photo-library'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Library</Text>
+      </View>
+    );
+  }
+}
+
+class History extends React.Component {
+  static navigationOptions = {
+    tabBarIcon: tabBarIcon('history'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>History</Text>
+      </View>
+    );
+  }
+}
+
+class Cart extends React.Component {
+  static navigationOptions = {
+    tabBarIcon: tabBarIcon('shopping-cart'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Cart</Text>
+      </View>
+    );
+  }
+}
+
+export default createBottomTabNavigator({
+  Album,
+  Library,
+  History,
+  Cart,
+});
--- a/packages/tabs/example/src/MaterialBottomTabs.js
+++ b/packages/tabs/example/src/MaterialBottomTabs.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createMaterialBottomTabNavigator } from 'react-navigation-tabs';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const tabBarIcon = name => ({ tintColor }) => (
+  <MaterialIcons
+    style={{ backgroundColor: 'transparent' }}
+    name={name}
+    color={tintColor}
+    size={24}
+  />
+);
+
+class Album extends React.Component {
+  static navigationOptions = {
+    tabBarColor: '#3F51B5',
+    tabBarIcon: tabBarIcon('photo-album'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Album</Text>
+      </View>
+    );
+  }
+}
+
+class Library extends React.Component {
+  static navigationOptions = {
+    tabBarColor: '#009688',
+    tabBarIcon: tabBarIcon('photo-library'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Library</Text>
+      </View>
+    );
+  }
+}
+
+class History extends React.Component {
+  static navigationOptions = {
+    tabBarColor: '#795548',
+    tabBarIcon: tabBarIcon('history'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>History</Text>
+      </View>
+    );
+  }
+}
+
+class Cart extends React.Component {
+  static navigationOptions = {
+    tabBarColor: '#607D8B',
+    tabBarIcon: tabBarIcon('shopping-cart'),
+  };
+
+  render() {
+    return (
+      <View>
+        <Text>Cart</Text>
+      </View>
+    );
+  }
+}
+
+export default createMaterialBottomTabNavigator(
+  {
+    Album,
+    Library,
+    History,
+    Cart,
+  },
+  {
+    shifting: false,
+    activeTintColor: '#F44336',
+  }
+);
--- a/packages/tabs/example/src/MaterialTopTabs.js
+++ b/packages/tabs/example/src/MaterialTopTabs.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
+
+class Album extends React.Component {
+  render() {
+    return (
+      <View>
+        <Text>Album</Text>
+      </View>
+    );
+  }
+}
+
+class Library extends React.Component {
+  render() {
+    return (
+      <View>
+        <Text>Library</Text>
+      </View>
+    );
+  }
+}
+
+class History extends React.Component {
+  render() {
+    return (
+      <View>
+        <Text>History</Text>
+      </View>
+    );
+  }
+}
+
+export default createMaterialTopTabNavigator({
+  Album,
+  Library,
+  History,
+});
--- a/packages/tabs/example/yarn.lock
+++ b/packages/tabs/example/yarn.lock
--- a/packages/tabs/flow-typed/npm/@expo/vector-icons_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/@expo/vector-icons_vx.x.x.js
@@ -0,0 +1,346 @@
+// flow-typed signature: c7c91558bdd879554405af715286a9e4
+// flow-typed version: <<STUB>>/@expo/vector-icons_v^6.2.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   '@expo/vector-icons'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module '@expo/vector-icons' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module '@expo/vector-icons/createIconSet' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/createIconSetFromFontello' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/createIconSetFromIcoMoon' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Entypo' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/EvilIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Feather' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/FontAwesome' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Foundation' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/iconFontSources' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Ionicons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/MaterialCommunityIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/MaterialIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Octicons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/SimpleLineIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Entypo' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Feather' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Foundation' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-icon' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/index' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Ionicons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Octicons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Zocial' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/err-if-inside-universe' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/src/App' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/src/Icon' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/src/IconConstants' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/src/IconList' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/website/src/index' {
+  declare module.exports: any;
+}
+
+declare module '@expo/vector-icons/Zocial' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module '@expo/vector-icons/createIconSet.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/createIconSet'>;
+}
+declare module '@expo/vector-icons/createIconSetFromFontello.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/createIconSetFromFontello'>;
+}
+declare module '@expo/vector-icons/createIconSetFromIcoMoon.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/createIconSetFromIcoMoon'>;
+}
+declare module '@expo/vector-icons/Entypo.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Entypo'>;
+}
+declare module '@expo/vector-icons/EvilIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/EvilIcons'>;
+}
+declare module '@expo/vector-icons/Feather.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Feather'>;
+}
+declare module '@expo/vector-icons/FontAwesome.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/FontAwesome'>;
+}
+declare module '@expo/vector-icons/Foundation.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Foundation'>;
+}
+declare module '@expo/vector-icons/iconFontSources.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/iconFontSources'>;
+}
+declare module '@expo/vector-icons/index' {
+  declare module.exports: $Exports<'@expo/vector-icons'>;
+}
+declare module '@expo/vector-icons/index.js' {
+  declare module.exports: $Exports<'@expo/vector-icons'>;
+}
+declare module '@expo/vector-icons/Ionicons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Ionicons'>;
+}
+declare module '@expo/vector-icons/MaterialCommunityIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/MaterialCommunityIcons'>;
+}
+declare module '@expo/vector-icons/MaterialIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/MaterialIcons'>;
+}
+declare module '@expo/vector-icons/Octicons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Octicons'>;
+}
+declare module '@expo/vector-icons/SimpleLineIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/SimpleLineIcons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Entypo.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Entypo'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/EvilIcons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Feather.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Feather'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/FontAwesome'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Foundation.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Foundation'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-icon.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/generate-icon'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/generate-material-icons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/index.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/index'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Ionicons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Ionicons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-fontello'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set-from-icomoon'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/create-icon-set'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/generate-icon-set-from-css'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/icon-button'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/react-native.osx'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/tab-bar-item-ios'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/lib/toolbar-android'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/MaterialCommunityIcons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/MaterialIcons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Octicons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Octicons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/RNIMigration'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/SimpleLineIcons'>;
+}
+declare module '@expo/vector-icons/vendor/react-native-vector-icons/Zocial.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/vendor/react-native-vector-icons/Zocial'>;
+}
+declare module '@expo/vector-icons/website/err-if-inside-universe.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/err-if-inside-universe'>;
+}
+declare module '@expo/vector-icons/website/src/App.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/src/App'>;
+}
+declare module '@expo/vector-icons/website/src/Icon.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/src/Icon'>;
+}
+declare module '@expo/vector-icons/website/src/IconConstants.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/src/IconConstants'>;
+}
+declare module '@expo/vector-icons/website/src/IconList.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/src/IconList'>;
+}
+declare module '@expo/vector-icons/website/src/index.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/website/src/index'>;
+}
+declare module '@expo/vector-icons/Zocial.js' {
+  declare module.exports: $Exports<'@expo/vector-icons/Zocial'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-jest_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-jest_vx.x.x.js
@@ -0,0 +1,32 @@
+// flow-typed signature: fda9206a865012e0b4454d59b28fc825
+// flow-typed version: <<STUB>>/babel-jest_v^21.2.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-jest'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-jest' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-jest/build/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-jest/build/index.js' {
+  declare module.exports: $Exports<'babel-jest/build/index'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-plugin-syntax-class-properties_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-plugin-syntax-class-properties_vx.x.x.js
@@ -0,0 +1,32 @@
+// flow-typed signature: d0d6a4ba1367cd2e4c6482a08b1a4b01
+// flow-typed version: <<STUB>>/babel-plugin-syntax-class-properties_v^6.13.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-plugin-syntax-class-properties'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-plugin-syntax-class-properties' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-plugin-syntax-class-properties/lib/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-plugin-syntax-class-properties/lib/index.js' {
+  declare module.exports: $Exports<'babel-plugin-syntax-class-properties/lib/index'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-plugin-syntax-jsx_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-plugin-syntax-jsx_vx.x.x.js
@@ -0,0 +1,32 @@
+// flow-typed signature: bca43ddbe413a229b1ee05870181660f
+// flow-typed version: <<STUB>>/babel-plugin-syntax-jsx_v^6.18.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-plugin-syntax-jsx'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-plugin-syntax-jsx' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-plugin-syntax-jsx/lib/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-plugin-syntax-jsx/lib/index.js' {
+  declare module.exports: $Exports<'babel-plugin-syntax-jsx/lib/index'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-plugin-syntax-object-rest-spread_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-plugin-syntax-object-rest-spread_vx.x.x.js
@@ -0,0 +1,32 @@
+// flow-typed signature: 3bc29d2dec3d90d765e922c8096d8dfc
+// flow-typed version: <<STUB>>/babel-plugin-syntax-object-rest-spread_v^6.13.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-plugin-syntax-object-rest-spread'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-plugin-syntax-object-rest-spread' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-plugin-syntax-object-rest-spread/lib/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-plugin-syntax-object-rest-spread/lib/index.js' {
+  declare module.exports: $Exports<'babel-plugin-syntax-object-rest-spread/lib/index'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-plugin-transform-flow-strip-types_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-plugin-transform-flow-strip-types_vx.x.x.js
@@ -0,0 +1,32 @@
+// flow-typed signature: 2374cfcadfa849e9026f394d9681deb2
+// flow-typed version: <<STUB>>/babel-plugin-transform-flow-strip-types_v^6.22.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-plugin-transform-flow-strip-types'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-plugin-transform-flow-strip-types' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-plugin-transform-flow-strip-types/lib/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-plugin-transform-flow-strip-types/lib/index.js' {
+  declare module.exports: $Exports<'babel-plugin-transform-flow-strip-types/lib/index'>;
+}
--- a/packages/tabs/flow-typed/npm/babel-preset-react-native_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/babel-preset-react-native_vx.x.x.js
@@ -0,0 +1,73 @@
+// flow-typed signature: da7f4ffcfb420e0ad7492e04856705c2
+// flow-typed version: <<STUB>>/babel-preset-react-native_v^4.0.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-preset-react-native'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-preset-react-native' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-preset-react-native/configs/hmr' {
+  declare module.exports: any;
+}
+
+declare module 'babel-preset-react-native/configs/main' {
+  declare module.exports: any;
+}
+
+declare module 'babel-preset-react-native/lib/resolvePlugins' {
+  declare module.exports: any;
+}
+
+declare module 'babel-preset-react-native/plugins' {
+  declare module.exports: any;
+}
+
+declare module 'babel-preset-react-native/transforms/transform-dynamic-import' {
+  declare module.exports: any;
+}
+
+declare module 'babel-preset-react-native/transforms/transform-symbol-member' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-preset-react-native/configs/hmr.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/configs/hmr'>;
+}
+declare module 'babel-preset-react-native/configs/main.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/configs/main'>;
+}
+declare module 'babel-preset-react-native/index' {
+  declare module.exports: $Exports<'babel-preset-react-native'>;
+}
+declare module 'babel-preset-react-native/index.js' {
+  declare module.exports: $Exports<'babel-preset-react-native'>;
+}
+declare module 'babel-preset-react-native/lib/resolvePlugins.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/lib/resolvePlugins'>;
+}
+declare module 'babel-preset-react-native/plugins.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/plugins'>;
+}
+declare module 'babel-preset-react-native/transforms/transform-dynamic-import.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/transforms/transform-dynamic-import'>;
+}
+declare module 'babel-preset-react-native/transforms/transform-symbol-member.js' {
+  declare module.exports: $Exports<'babel-preset-react-native/transforms/transform-symbol-member'>;
+}
--- a/packages/tabs/flow-typed/npm/enzyme-adapter-react-16_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/enzyme-adapter-react-16_vx.x.x.js
@@ -0,0 +1,67 @@
+// flow-typed signature: 7814bad223d2abb492841c50a587c50a
+// flow-typed version: <<STUB>>/enzyme-adapter-react-16_v^1.1.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'enzyme-adapter-react-16'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'enzyme-adapter-react-16' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-adapter-react-16/build/index' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-adapter-react-16/build/ReactSixteenAdapter' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-adapter-react-16/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-adapter-react-16/src/ReactSixteenAdapter' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/build/findCurrentFiberUsingSlowPath'>;
+}
+declare module 'enzyme-adapter-react-16/build/index.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/build/index'>;
+}
+declare module 'enzyme-adapter-react-16/build/ReactSixteenAdapter.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/build/ReactSixteenAdapter'>;
+}
+declare module 'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/src/findCurrentFiberUsingSlowPath'>;
+}
+declare module 'enzyme-adapter-react-16/src/index.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/src/index'>;
+}
+declare module 'enzyme-adapter-react-16/src/ReactSixteenAdapter.js' {
+  declare module.exports: $Exports<'enzyme-adapter-react-16/src/ReactSixteenAdapter'>;
+}
--- a/packages/tabs/flow-typed/npm/enzyme-to-json_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/enzyme-to-json_vx.x.x.js
@@ -0,0 +1,73 @@
+// flow-typed signature: baf756de734230f106096f5cc7925608
+// flow-typed version: <<STUB>>/enzyme-to-json_v^3.2.2/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'enzyme-to-json'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'enzyme-to-json' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'enzyme-to-json/createSerializer' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-to-json/mount' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-to-json/render' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-to-json/serializer' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-to-json/shallow' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme-to-json/utils' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'enzyme-to-json/createSerializer.js' {
+  declare module.exports: $Exports<'enzyme-to-json/createSerializer'>;
+}
+declare module 'enzyme-to-json/index' {
+  declare module.exports: $Exports<'enzyme-to-json'>;
+}
+declare module 'enzyme-to-json/index.js' {
+  declare module.exports: $Exports<'enzyme-to-json'>;
+}
+declare module 'enzyme-to-json/mount.js' {
+  declare module.exports: $Exports<'enzyme-to-json/mount'>;
+}
+declare module 'enzyme-to-json/render.js' {
+  declare module.exports: $Exports<'enzyme-to-json/render'>;
+}
+declare module 'enzyme-to-json/serializer.js' {
+  declare module.exports: $Exports<'enzyme-to-json/serializer'>;
+}
+declare module 'enzyme-to-json/shallow.js' {
+  declare module.exports: $Exports<'enzyme-to-json/shallow'>;
+}
+declare module 'enzyme-to-json/utils.js' {
+  declare module.exports: $Exports<'enzyme-to-json/utils'>;
+}
--- a/packages/tabs/flow-typed/npm/enzyme_v3.x.x.js
+++ b/packages/tabs/flow-typed/npm/enzyme_v3.x.x.js
@@ -0,0 +1,128 @@
+// flow-typed signature: 7be2af8800fdadaea6ac0404d256bafc
+// flow-typed version: 6ce6a0467c/enzyme_v3.x.x/flow_>=v0.53.x
+
+import * as React from "react";
+
+declare module "enzyme" {
+  declare type PredicateFunction<T: Wrapper> = (
+    wrapper: T,
+    index: number
+  ) => boolean;
+  declare type NodeOrNodes = React.Node | Array<React.Node>;
+  declare type EnzymeSelector = string | Class<React.Component<*, *>> | Object;
+
+  // CheerioWrapper is a type alias for an actual cheerio instance
+  // TODO: Reference correct type from cheerio's type declarations
+  declare type CheerioWrapper = any;
+
+  declare class Wrapper {
+    find(selector: EnzymeSelector): this,
+    findWhere(predicate: PredicateFunction<this>): this,
+    filter(selector: EnzymeSelector): this,
+    filterWhere(predicate: PredicateFunction<this>): this,
+    hostNodes(): this,
+    contains(nodeOrNodes: NodeOrNodes): boolean,
+    containsMatchingElement(node: React.Node): boolean,
+    containsAllMatchingElements(nodes: NodeOrNodes): boolean,
+    containsAnyMatchingElements(nodes: NodeOrNodes): boolean,
+    dive(option?: { context?: Object }): this,
+    exists(): boolean,
+    isEmptyRender(): boolean,
+    matchesElement(node: React.Node): boolean,
+    hasClass(className: string): boolean,
+    is(selector: EnzymeSelector): boolean,
+    isEmpty(): boolean,
+    not(selector: EnzymeSelector): this,
+    children(selector?: EnzymeSelector): this,
+    childAt(index: number): this,
+    parents(selector?: EnzymeSelector): this,
+    parent(): this,
+    closest(selector: EnzymeSelector): this,
+    render(): CheerioWrapper,
+    unmount(): this,
+    text(): string,
+    html(): string,
+    get(index: number): React.Node,
+    getDOMNode(): HTMLElement | HTMLInputElement,
+    at(index: number): this,
+    first(): this,
+    last(): this,
+    state(key?: string): any,
+    context(key?: string): any,
+    props(): Object,
+    prop(key: string): any,
+    key(): string,
+    simulate(event: string, ...args: Array<any>): this,
+    setState(state: {}, callback?: Function): this,
+    setProps(props: {}): this,
+    setContext(context: Object): this,
+    instance(): React.Component<*, *>,
+    update(): this,
+    debug(options?: Object): string,
+    type(): string | Function | null,
+    name(): string,
+    forEach(fn: (node: this, index: number) => mixed): this,
+    map<T>(fn: (node: this, index: number) => T): Array<T>,
+    reduce<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    reduceRight<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    some(selector: EnzymeSelector): boolean,
+    someWhere(predicate: PredicateFunction<this>): boolean,
+    every(selector: EnzymeSelector): boolean,
+    everyWhere(predicate: PredicateFunction<this>): boolean,
+    length: number
+  }
+
+  declare class ReactWrapper extends Wrapper {
+    constructor(nodes: NodeOrNodes, root: any, options?: ?Object): ReactWrapper,
+    mount(): this,
+    ref(refName: string): this,
+    detach(): void
+  }
+
+  declare class ShallowWrapper extends Wrapper {
+    constructor(
+      nodes: NodeOrNodes,
+      root: any,
+      options?: ?Object
+    ): ShallowWrapper,
+    equals(node: React.Node): boolean,
+    shallow(options?: { context?: Object }): ShallowWrapper,
+    getElement(): React.Node,
+    getElements(): Array<React.Node>
+  }
+
+  declare function shallow(
+    node: React.Node,
+    options?: { context?: Object, disableLifecycleMethods?: boolean }
+  ): ShallowWrapper;
+  declare function mount(
+    node: React.Node,
+    options?: {
+      context?: Object,
+      attachTo?: HTMLElement,
+      childContextTypes?: Object
+    }
+  ): ReactWrapper;
+  declare function render(
+    node: React.Node,
+    options?: { context?: Object }
+  ): CheerioWrapper;
+
+  declare module.exports: {
+    configure(options: {
+      Adapter?: any,
+      disableLifecycleMethods?: boolean
+    }): void,
+    render: typeof render,
+    mount: typeof mount,
+    shallow: typeof shallow,
+    ShallowWrapper: typeof ShallowWrapper,
+    ReactWrapper: typeof ReactWrapper
+  };
+}
--- a/packages/tabs/flow-typed/npm/eslint-config-satya164_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/eslint-config-satya164_vx.x.x.js
@@ -0,0 +1,33 @@
+// flow-typed signature: 971f61790d6569f915291a15ddb751b5
+// flow-typed version: <<STUB>>/eslint-config-satya164_v^1.0.1/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'eslint-config-satya164'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'eslint-config-satya164' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+
+
+// Filename aliases
+declare module 'eslint-config-satya164/index' {
+  declare module.exports: $Exports<'eslint-config-satya164'>;
+}
+declare module 'eslint-config-satya164/index.js' {
+  declare module.exports: $Exports<'eslint-config-satya164'>;
+}
--- a/packages/tabs/flow-typed/npm/eslint-plugin-react-native-globals_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/eslint-plugin-react-native-globals_vx.x.x.js
@@ -0,0 +1,33 @@
+// flow-typed signature: be404e429473f2b985d42c86032a2276
+// flow-typed version: <<STUB>>/eslint-plugin-react-native-globals_v^0.1.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'eslint-plugin-react-native-globals'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'eslint-plugin-react-native-globals' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+
+
+// Filename aliases
+declare module 'eslint-plugin-react-native-globals/index' {
+  declare module.exports: $Exports<'eslint-plugin-react-native-globals'>;
+}
+declare module 'eslint-plugin-react-native-globals/index.js' {
+  declare module.exports: $Exports<'eslint-plugin-react-native-globals'>;
+}
--- a/packages/tabs/flow-typed/npm/eslint_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/eslint_vx.x.x.js
--- a/packages/tabs/flow-typed/npm/flow-bin_v0.x.x.js
+++ b/packages/tabs/flow-typed/npm/flow-bin_v0.x.x.js
@@ -0,0 +1,6 @@
+// flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
+// flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
+
+declare module "flow-bin" {
+  declare module.exports: string;
+}
--- a/packages/tabs/flow-typed/npm/hoist-non-react-statics_v2.x.x.js
+++ b/packages/tabs/flow-typed/npm/hoist-non-react-statics_v2.x.x.js
@@ -0,0 +1,15 @@
+// flow-typed signature: 4a70afc6aaa9f6d8678add172ff49ba7
+// flow-typed version: 341cb80802/hoist-non-react-statics_v2.x.x/flow_>=v0.54.1
+
+declare module 'hoist-non-react-statics' {
+  /*
+    S - source component statics
+    TP - target component props
+    SP - additional source component props
+  */
+  declare module.exports: <TP, SP, S>(
+    target: React$ComponentType<TP>,
+    source: React$ComponentType<TP & SP> & S,
+    blacklist?: { [key: $Keys<S>]: boolean }
+  ) => React$ComponentType<TP> & $Shape<S>;
+}
--- a/packages/tabs/flow-typed/npm/jest_v21.x.x.js
+++ b/packages/tabs/flow-typed/npm/jest_v21.x.x.js
@@ -0,0 +1,584 @@
+// flow-typed signature: 107cf7068b8835594e97f938e8848244
+// flow-typed version: 8b4dd96654/jest_v21.x.x/flow_>=v0.39.x
+
+type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
+  (...args: TArguments): TReturn,
+  /**
+   * An object for introspecting mock calls
+   */
+  mock: {
+    /**
+     * An array that represents all calls that have been made into this mock
+     * function. Each call is represented by an array of arguments that were
+     * passed during the call.
+     */
+    calls: Array<TArguments>,
+    /**
+     * An array that contains all the object instances that have been
+     * instantiated from this mock function.
+     */
+    instances: Array<TReturn>
+  },
+  /**
+   * Resets all information stored in the mockFn.mock.calls and
+   * mockFn.mock.instances arrays. Often this is useful when you want to clean
+   * up a mock's usage data between two assertions.
+   */
+  mockClear(): void,
+  /**
+   * Resets all information stored in the mock. This is useful when you want to
+   * completely restore a mock back to its initial state.
+   */
+  mockReset(): void,
+  /**
+   * Removes the mock and restores the initial implementation. This is useful
+   * when you want to mock functions in certain test cases and restore the
+   * original implementation in others. Beware that mockFn.mockRestore only
+   * works when mock was created with jest.spyOn. Thus you have to take care of
+   * restoration yourself when manually assigning jest.fn().
+   */
+  mockRestore(): void,
+  /**
+   * Accepts a function that should be used as the implementation of the mock.
+   * The mock itself will still record all calls that go into and instances
+   * that come from itself -- the only difference is that the implementation
+   * will also be executed when the mock is called.
+   */
+  mockImplementation(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Accepts a function that will be used as an implementation of the mock for
+   * one call to the mocked function. Can be chained so that multiple function
+   * calls produce different results.
+   */
+  mockImplementationOnce(
+    fn: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Just a simple sugar function for returning `this`
+   */
+  mockReturnThis(): void,
+  /**
+   * Deprecated: use jest.fn(() => value) instead
+   */
+  mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,
+  /**
+   * Sugar for only returning a value once inside your mock
+   */
+  mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>
+};
+
+type JestAsymmetricEqualityType = {
+  /**
+   * A custom Jasmine equality tester
+   */
+  asymmetricMatch(value: mixed): boolean
+};
+
+type JestCallsType = {
+  allArgs(): mixed,
+  all(): mixed,
+  any(): boolean,
+  count(): number,
+  first(): mixed,
+  mostRecent(): mixed,
+  reset(): void
+};
+
+type JestClockType = {
+  install(): void,
+  mockDate(date: Date): void,
+  tick(milliseconds?: number): void,
+  uninstall(): void
+};
+
+type JestMatcherResult = {
+  message?: string | (() => string),
+  pass: boolean
+};
+
+type JestMatcher = (actual: any, expected: any) => JestMatcherResult;
+
+type JestPromiseType = {
+  /**
+   * Use rejects to unwrap the reason of a rejected promise so any other
+   * matcher can be chained. If the promise is fulfilled the assertion fails.
+   */
+  rejects: JestExpectType,
+  /**
+   * Use resolves to unwrap the value of a fulfilled promise so any other
+   * matcher can be chained. If the promise is rejected the assertion fails.
+   */
+  resolves: JestExpectType
+};
+
+/**
+ *  Plugin: jest-enzyme
+ */
+type EnzymeMatchersType = {
+  toBeChecked(): void,
+  toBeDisabled(): void,
+  toBeEmpty(): void,
+  toBePresent(): void,
+  toContainReact(element: React$Element<any>): void,
+  toHaveClassName(className: string): void,
+  toHaveHTML(html: string): void,
+  toHaveProp(propKey: string, propValue?: any): void,
+  toHaveRef(refName: string): void,
+  toHaveState(stateKey: string, stateValue?: any): void,
+  toHaveStyle(styleKey: string, styleValue?: any): void,
+  toHaveTagName(tagName: string): void,
+  toHaveText(text: string): void,
+  toIncludeText(text: string): void,
+  toHaveValue(value: any): void,
+  toMatchElement(element: React$Element<any>): void,
+  toMatchSelector(selector: string): void
+};
+
+type JestExpectType = {
+  not: JestExpectType & EnzymeMatchersType,
+  /**
+   * If you have a mock function, you can use .lastCalledWith to test what
+   * arguments it was last called with.
+   */
+  lastCalledWith(...args: Array<any>): void,
+  /**
+   * toBe just checks that a value is what you expect. It uses === to check
+   * strict equality.
+   */
+  toBe(value: any): void,
+  /**
+   * Use .toHaveBeenCalled to ensure that a mock function got called.
+   */
+  toBeCalled(): void,
+  /**
+   * Use .toBeCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toBeCalledWith(...args: Array<any>): void,
+  /**
+   * Using exact equality with floating point numbers is a bad idea. Rounding
+   * means that intuitive things fail.
+   */
+  toBeCloseTo(num: number, delta: any): void,
+  /**
+   * Use .toBeDefined to check that a variable is not undefined.
+   */
+  toBeDefined(): void,
+  /**
+   * Use .toBeFalsy when you don't care what a value is, you just want to
+   * ensure a value is false in a boolean context.
+   */
+  toBeFalsy(): void,
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThan.
+   */
+  toBeGreaterThan(number: number): void,
+  /**
+   * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
+   */
+  toBeGreaterThanOrEqual(number: number): void,
+  /**
+   * To compare floating point numbers, you can use toBeLessThan.
+   */
+  toBeLessThan(number: number): void,
+  /**
+   * To compare floating point numbers, you can use toBeLessThanOrEqual.
+   */
+  toBeLessThanOrEqual(number: number): void,
+  /**
+   * Use .toBeInstanceOf(Class) to check that an object is an instance of a
+   * class.
+   */
+  toBeInstanceOf(cls: Class<*>): void,
+  /**
+   * .toBeNull() is the same as .toBe(null) but the error messages are a bit
+   * nicer.
+   */
+  toBeNull(): void,
+  /**
+   * Use .toBeTruthy when you don't care what a value is, you just want to
+   * ensure a value is true in a boolean context.
+   */
+  toBeTruthy(): void,
+  /**
+   * Use .toBeUndefined to check that a variable is undefined.
+   */
+  toBeUndefined(): void,
+  /**
+   * Use .toContain when you want to check that an item is in a list. For
+   * testing the items in the list, this uses ===, a strict equality check.
+   */
+  toContain(item: any): void,
+  /**
+   * Use .toContainEqual when you want to check that an item is in a list. For
+   * testing the items in the list, this matcher recursively checks the
+   * equality of all fields, rather than checking for object identity.
+   */
+  toContainEqual(item: any): void,
+  /**
+   * Use .toEqual when you want to check that two objects have the same value.
+   * This matcher recursively checks the equality of all fields, rather than
+   * checking for object identity.
+   */
+  toEqual(value: any): void,
+  /**
+   * Use .toHaveBeenCalled to ensure that a mock function got called.
+   */
+  toHaveBeenCalled(): void,
+  /**
+   * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
+   * number of times.
+   */
+  toHaveBeenCalledTimes(number: number): void,
+  /**
+   * Use .toHaveBeenCalledWith to ensure that a mock function was called with
+   * specific arguments.
+   */
+  toHaveBeenCalledWith(...args: Array<any>): void,
+  /**
+   * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
+   * with specific arguments.
+   */
+  toHaveBeenLastCalledWith(...args: Array<any>): void,
+  /**
+   * Check that an object has a .length property and it is set to a certain
+   * numeric value.
+   */
+  toHaveLength(number: number): void,
+  /**
+   *
+   */
+  toHaveProperty(propPath: string, value?: any): void,
+  /**
+   * Use .toMatch to check that a string matches a regular expression or string.
+   */
+  toMatch(regexpOrString: RegExp | string): void,
+  /**
+   * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
+   */
+  toMatchObject(object: Object | Array<Object>): void,
+  /**
+   * This ensures that a React component matches the most recent snapshot.
+   */
+  toMatchSnapshot(name?: string): void,
+  /**
+   * Use .toThrow to test that a function throws when it is called.
+   * If you want to test that a specific error gets thrown, you can provide an
+   * argument to toThrow. The argument can be a string for the error message,
+   * a class for the error, or a regex that should match the error.
+   *
+   * Alias: .toThrowError
+   */
+  toThrow(message?: string | Error | Class<Error> | RegExp): void,
+  toThrowError(message?: string | Error | Class<Error> | RegExp): void,
+  /**
+   * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
+   * matching the most recent snapshot when it is called.
+   */
+  toThrowErrorMatchingSnapshot(): void
+};
+
+type JestObjectType = {
+  /**
+   *  Disables automatic mocking in the module loader.
+   *
+   *  After this method is called, all `require()`s will return the real
+   *  versions of each module (rather than a mocked version).
+   */
+  disableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of disableAutomock
+   */
+  autoMockOff(): JestObjectType,
+  /**
+   * Enables automatic mocking in the module loader.
+   */
+  enableAutomock(): JestObjectType,
+  /**
+   * An un-hoisted version of enableAutomock
+   */
+  autoMockOn(): JestObjectType,
+  /**
+   * Clears the mock.calls and mock.instances properties of all mocks.
+   * Equivalent to calling .mockClear() on every mocked function.
+   */
+  clearAllMocks(): JestObjectType,
+  /**
+   * Resets the state of all mocks. Equivalent to calling .mockReset() on every
+   * mocked function.
+   */
+  resetAllMocks(): JestObjectType,
+  /**
+   * Removes any pending timers from the timer system.
+   */
+  clearAllTimers(): void,
+  /**
+   * The same as `mock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  doMock(moduleName: string, moduleFactory?: any): JestObjectType,
+  /**
+   * The same as `unmock` but not moved to the top of the expectation by
+   * babel-jest.
+   */
+  dontMock(moduleName: string): JestObjectType,
+  /**
+   * Returns a new, unused mock function. Optionally takes a mock
+   * implementation.
+   */
+  fn<TArguments: $ReadOnlyArray<*>, TReturn>(
+    implementation?: (...args: TArguments) => TReturn
+  ): JestMockFn<TArguments, TReturn>,
+  /**
+   * Determines if the given function is a mocked function.
+   */
+  isMockFunction(fn: Function): boolean,
+  /**
+   * Given the name of a module, use the automatic mocking system to generate a
+   * mocked version of the module for you.
+   */
+  genMockFromModule(moduleName: string): any,
+  /**
+   * Mocks a module with an auto-mocked version when it is being required.
+   *
+   * The second argument can be used to specify an explicit module factory that
+   * is being run instead of using Jest's automocking feature.
+   *
+   * The third argument can be used to create virtual mocks -- mocks of modules
+   * that don't exist anywhere in the system.
+   */
+  mock(
+    moduleName: string,
+    moduleFactory?: any,
+    options?: Object
+  ): JestObjectType,
+  /**
+   * Returns the actual module instead of a mock, bypassing all checks on
+   * whether the module should receive a mock implementation or not.
+   */
+  requireActual(moduleName: string): any,
+  /**
+   * Returns a mock module instead of the actual module, bypassing all checks
+   * on whether the module should be required normally or not.
+   */
+  requireMock(moduleName: string): any,
+  /**
+   * Resets the module registry - the cache of all required modules. This is
+   * useful to isolate modules where local state might conflict between tests.
+   */
+  resetModules(): JestObjectType,
+  /**
+   * Exhausts the micro-task queue (usually interfaced in node via
+   * process.nextTick).
+   */
+  runAllTicks(): void,
+  /**
+   * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
+   * setInterval(), and setImmediate()).
+   */
+  runAllTimers(): void,
+  /**
+   * Exhausts all tasks queued by setImmediate().
+   */
+  runAllImmediates(): void,
+  /**
+   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+   * or setInterval() and setImmediate()).
+   */
+  runTimersToTime(msToRun: number): void,
+  /**
+   * Executes only the macro-tasks that are currently pending (i.e., only the
+   * tasks that have been queued by setTimeout() or setInterval() up to this
+   * point)
+   */
+  runOnlyPendingTimers(): void,
+  /**
+   * Explicitly supplies the mock object that the module system should return
+   * for the specified module. Note: It is recommended to use jest.mock()
+   * instead.
+   */
+  setMock(moduleName: string, moduleExports: any): JestObjectType,
+  /**
+   * Indicates that the module system should never return a mocked version of
+   * the specified module from require() (e.g. that it should always return the
+   * real module).
+   */
+  unmock(moduleName: string): JestObjectType,
+  /**
+   * Instructs Jest to use fake versions of the standard timer functions
+   * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
+   * setImmediate and clearImmediate).
+   */
+  useFakeTimers(): JestObjectType,
+  /**
+   * Instructs Jest to use the real versions of the standard timer functions.
+   */
+  useRealTimers(): JestObjectType,
+  /**
+   * Creates a mock function similar to jest.fn but also tracks calls to
+   * object[methodName].
+   */
+  spyOn(object: Object, methodName: string): JestMockFn<any, any>,
+  /**
+   * Set the default timeout interval for tests and before/after hooks in milliseconds.
+   * Note: The default timeout interval is 5 seconds if this method is not called.
+   */
+  setTimeout(timeout: number): JestObjectType
+};
+
+type JestSpyType = {
+  calls: JestCallsType
+};
+
+/** Runs this function after every test inside this context */
+declare function afterEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before every test inside this context */
+declare function beforeEach(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function after all tests have finished inside this context */
+declare function afterAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** Runs this function before any tests have started inside this context */
+declare function beforeAll(
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+
+/** A context for grouping tests together */
+declare var describe: {
+  /**
+   * Creates a block that groups together several related tests in one "test suite"
+   */
+  (name: string, fn: () => void): void,
+
+  /**
+   * Only run this describe block
+   */
+  only(name: string, fn: () => void): void,
+
+  /**
+   * Skip running this describe block
+   */
+  skip(name: string, fn: () => void): void
+};
+
+/** An individual test unit */
+declare var it: {
+  /**
+   * An individual test unit
+   *
+   * @param {string} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  (
+    name: string,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+  /**
+   * Only run this test
+   *
+   * @param {string} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  only(
+    name: string,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+  /**
+   * Skip running this test
+   *
+   * @param {string} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  skip(
+    name: string,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void,
+  /**
+   * Run the test concurrently
+   *
+   * @param {string} Name of Test
+   * @param {Function} Test
+   * @param {number} Timeout for the test, in milliseconds.
+   */
+  concurrent(
+    name: string,
+    fn?: (done: () => void) => ?Promise<mixed>,
+    timeout?: number
+  ): void
+};
+declare function fit(
+  name: string,
+  fn: (done: () => void) => ?Promise<mixed>,
+  timeout?: number
+): void;
+/** An individual test unit */
+declare var test: typeof it;
+/** A disabled group of tests */
+declare var xdescribe: typeof describe;
+/** A focused group of tests */
+declare var fdescribe: typeof describe;
+/** A disabled individual test */
+declare var xit: typeof it;
+/** A disabled individual test */
+declare var xtest: typeof it;
+
+/** The expect function is used every time you want to test a value */
+declare var expect: {
+  /** The object that you want to make assertions against */
+  (value: any): JestExpectType & JestPromiseType & EnzymeMatchersType,
+  /** Add additional Jasmine matchers to Jest's roster */
+  extend(matchers: { [name: string]: JestMatcher }): void,
+  /** Add a module that formats application-specific data structures. */
+  addSnapshotSerializer(serializer: (input: Object) => string): void,
+  assertions(expectedAssertions: number): void,
+  hasAssertions(): void,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): void,
+  arrayContaining(value: Array<mixed>): void,
+  objectContaining(value: Object): void,
+  /** Matches any received string that contains the exact expected string. */
+  stringContaining(value: string): void,
+  stringMatching(value: string | RegExp): void
+};
+
+// TODO handle return type
+// http://jasmine.github.io/2.4/introduction.html#section-Spies
+declare function spyOn(value: mixed, method: string): Object;
+
+/** Holds all functions related to manipulating test runner */
+declare var jest: JestObjectType;
+
+/**
+ * The global Jasmine object, this is generally not exposed as the public API,
+ * using features inside here could break in later versions of Jest.
+ */
+declare var jasmine: {
+  DEFAULT_TIMEOUT_INTERVAL: number,
+  any(value: mixed): JestAsymmetricEqualityType,
+  anything(): void,
+  arrayContaining(value: Array<mixed>): void,
+  clock(): JestClockType,
+  createSpy(name: string): JestSpyType,
+  createSpyObj(
+    baseName: string,
+    methodNames: Array<string>
+  ): { [methodName: string]: JestSpyType },
+  objectContaining(value: Object): void,
+  stringMatching(value: string): void
+};
--- a/packages/tabs/flow-typed/npm/prettier_v1.x.x.js
+++ b/packages/tabs/flow-typed/npm/prettier_v1.x.x.js
@@ -0,0 +1,178 @@
+// flow-typed signature: 4eed8da2dc730dc33e7710b465eaa44b
+// flow-typed version: cc7a557b34/prettier_v1.x.x/flow_>=v0.56.x
+
+declare module "prettier" {
+  declare type AST = Object;
+  declare type Doc = Object;
+  declare type FastPath = Object;
+
+  declare type PrettierParserName =
+    | "babylon"
+    | "flow"
+    | "typescript"
+    | "postcss"
+    | "css"
+    | "less"
+    | "scss"
+    | "json"
+    | "graphql"
+    | "markdown"
+    | "vue";
+
+  declare type PrettierParser = {
+    [name: PrettierParserName]: (text: string, options?: Object) => AST
+  };
+
+  declare type CustomParser = (
+    text: string,
+    parsers: PrettierParser,
+    options: Options
+  ) => AST;
+
+  declare type Options = {|
+    printWidth?: number,
+    tabWidth?: number,
+    useTabs?: boolean,
+    semi?: boolean,
+    singleQuote?: boolean,
+    trailingComma?: "none" | "es5" | "all",
+    bracketSpacing?: boolean,
+    jsxBracketSameLine?: boolean,
+    arrowParens?: "avoid" | "always",
+    rangeStart?: number,
+    rangeEnd?: number,
+    parser?: PrettierParserName | CustomParser,
+    filepath?: string,
+    requirePragma?: boolean,
+    insertPragma?: boolean,
+    proseWrap?: "always" | "never" | "preserve",
+    plugins?: Array<string | Plugin>
+  |};
+
+  declare type Plugin = {
+    languages: SupportLanguage,
+    parsers: { [parserName: string]: Parser },
+    printers: { [astFormat: string]: Printer }
+  };
+
+  declare type Parser = {
+    parse: (
+      text: string,
+      parsers: { [parserName: string]: Parser },
+      options: Object
+    ) => AST,
+    astFormat: string
+  };
+
+  declare type Printer = {
+    print: (
+      path: FastPath,
+      options: Object,
+      print: (path: FastPath) => Doc
+    ) => Doc,
+    embed: (
+      path: FastPath,
+      print: (path: FastPath) => Doc,
+      textToDoc: (text: string, options: Object) => Doc,
+      options: Object
+    ) => ?Doc
+  };
+
+  declare type CursorOptions = {|
+    cursorOffset: number,
+    printWidth?: $PropertyType<Options, "printWidth">,
+    tabWidth?: $PropertyType<Options, "tabWidth">,
+    useTabs?: $PropertyType<Options, "useTabs">,
+    semi?: $PropertyType<Options, "semi">,
+    singleQuote?: $PropertyType<Options, "singleQuote">,
+    trailingComma?: $PropertyType<Options, "trailingComma">,
+    bracketSpacing?: $PropertyType<Options, "bracketSpacing">,
+    jsxBracketSameLine?: $PropertyType<Options, "jsxBracketSameLine">,
+    arrowParens?: $PropertyType<Options, "arrowParens">,
+    parser?: $PropertyType<Options, "parser">,
+    filepath?: $PropertyType<Options, "filepath">,
+    requirePragma?: $PropertyType<Options, "requirePragma">,
+    insertPragma?: $PropertyType<Options, "insertPragma">,
+    proseWrap?: $PropertyType<Options, "proseWrap">,
+    plugins?: $PropertyType<Options, "plugins">
+  |};
+
+  declare type CursorResult = {|
+    formatted: string,
+    cursorOffset: number
+  |};
+
+  declare type ResolveConfigOptions = {|
+    useCache?: boolean,
+    config?: string,
+    editorconfig?: boolean
+  |};
+
+  declare type SupportLanguage = {
+    name: string,
+    since: string,
+    parsers: Array<string>,
+    group?: string,
+    tmScope: string,
+    aceMode: string,
+    codemirrorMode: string,
+    codemirrorMimeType: string,
+    aliases?: Array<string>,
+    extensions: Array<string>,
+    filenames?: Array<string>,
+    linguistLanguageId: number,
+    vscodeLanguageIds: Array<string>
+  };
+
+  declare type SupportOption = {|
+    since: string,
+    type: "int" | "boolean" | "choice" | "path",
+    deprecated?: string,
+    redirect?: SupportOptionRedirect,
+    description: string,
+    oppositeDescription?: string,
+    default: SupportOptionValue,
+    range?: SupportOptionRange,
+    choices?: SupportOptionChoice
+  |};
+
+  declare type SupportOptionRedirect = {|
+    options: string,
+    value: SupportOptionValue
+  |};
+
+  declare type SupportOptionRange = {|
+    start: number,
+    end: number,
+    step: number
+  |};
+
+  declare type SupportOptionChoice = {|
+    value: boolean | string,
+    description?: string,
+    since?: string,
+    deprecated?: string,
+    redirect?: SupportOptionValue
+  |};
+
+  declare type SupportOptionValue = number | boolean | string;
+
+  declare type SupportInfo = {|
+    languages: Array<SupportLanguage>,
+    options: Array<SupportOption>
+  |};
+
+  declare type Prettier = {|
+    format: (source: string, options?: Options) => string,
+    check: (source: string, options?: Options) => boolean,
+    formatWithCursor: (source: string, options: CursorOptions) => CursorResult,
+    resolveConfig: {
+      (filePath: string, options?: ResolveConfigOptions): Promise<?Options>,
+      sync(filePath: string, options?: ResolveConfigOptions): Promise<?Options>
+    },
+    clearConfigCache: () => void,
+    getSupportInfo: (version?: string) => SupportInfo
+  |};
+
+  declare export default Prettier;
+}
--- a/packages/tabs/flow-typed/npm/prop-types_v15.x.x.js
+++ b/packages/tabs/flow-typed/npm/prop-types_v15.x.x.js
@@ -0,0 +1,35 @@
+// flow-typed signature: d9a983bb1ac458a256c31c139047bdbb
+// flow-typed version: 927687984d/prop-types_v15.x.x/flow_>=v0.41.x
+
+type $npm$propTypes$ReactPropsCheckType = (
+  props: any,
+  propName: string,
+  componentName: string,
+  href?: string) => ?Error;
+
+declare module 'prop-types' {
+  declare var array: React$PropType$Primitive<Array<any>>;
+  declare var bool: React$PropType$Primitive<boolean>;
+  declare var func: React$PropType$Primitive<Function>;
+  declare var number: React$PropType$Primitive<number>;
+  declare var object: React$PropType$Primitive<Object>;
+  declare var string: React$PropType$Primitive<string>;
+  declare var symbol: React$PropType$Primitive<Symbol>;
+  declare var any: React$PropType$Primitive<any>;
+  declare var arrayOf: React$PropType$ArrayOf;
+  declare var element: React$PropType$Primitive<any>; /* TODO */
+  declare var instanceOf: React$PropType$InstanceOf;
+  declare var node: React$PropType$Primitive<any>; /* TODO */
+  declare var objectOf: React$PropType$ObjectOf;
+  declare var oneOf: React$PropType$OneOf;
+  declare var oneOfType: React$PropType$OneOfType;
+  declare var shape: React$PropType$Shape;
+
+  declare function checkPropTypes<V>(
+    propTypes: $Subtype<{[_: $Keys<V>]: $npm$propTypes$ReactPropsCheckType}>,
+    values: V,
+    location: string,
+    componentName: string,
+    getStack: ?(() => ?string)
+  ) : void;
+}
--- a/packages/tabs/flow-typed/npm/react-lifecycles-compat_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-lifecycles-compat_vx.x.x.js
@@ -0,0 +1,45 @@
+// flow-typed signature: 325e9512817177ae9b36a263c768921e
+// flow-typed version: <<STUB>>/react-lifecycles-compat_v^1.0.2/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-lifecycles-compat'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-lifecycles-compat' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-lifecycles-compat/react-lifecycles-compat' {
+  declare module.exports: any;
+}
+
+declare module 'react-lifecycles-compat/react-lifecycles-compat.min' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-lifecycles-compat/index' {
+  declare module.exports: $Exports<'react-lifecycles-compat'>;
+}
+declare module 'react-lifecycles-compat/index.js' {
+  declare module.exports: $Exports<'react-lifecycles-compat'>;
+}
+declare module 'react-lifecycles-compat/react-lifecycles-compat.js' {
+  declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat'>;
+}
+declare module 'react-lifecycles-compat/react-lifecycles-compat.min.js' {
+  declare module.exports: $Exports<'react-lifecycles-compat/react-lifecycles-compat.min'>;
+}
--- a/packages/tabs/flow-typed/npm/react-native-paper_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-native-paper_vx.x.x.js
@@ -0,0 +1,417 @@
+// flow-typed signature: 386bdcd615d6c491751128e33bc326ed
+// flow-typed version: <<STUB>>/react-native-paper_v^1.2.3/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-native-paper'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-native-paper' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-native-paper/src/components/__tests__/BottomNavigation.test' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/__tests__/Portal.test' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/BottomNavigation' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Button' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Card/Card' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Card/CardActions' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Card/CardContent' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Card/CardCover' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Checkbox.ios' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Checkbox' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Dialog/Dialog' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Dialog/DialogActions' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Dialog/DialogContent' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Dialog/DialogScrollArea' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Dialog/DialogTitle' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Divider' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/DrawerItem' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/DrawerSection' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/FAB' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Icon' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Modal' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Paper' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Portal/Portal' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Portal/PortalConsumer' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Portal/PortalHost' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Portal/PortalManager' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Portal/ThemedPortal' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/ProgressBar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/RadioButton.ios' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/RadioButton' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/SearchBar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Switch' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/TextInput' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Toolbar/Toolbar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Toolbar/ToolbarAction' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Toolbar/ToolbarBackAction' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Toolbar/ToolbarContent' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/TouchableIcon' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/TouchableRipple' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Caption' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Headline' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Paragraph' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/StyledText' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Subheading' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Text' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/components/Typography/Title' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/core/Provider' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/core/ThemeProvider' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/core/withTheme' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/styles/colors' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/styles/DarkTheme' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/styles/DefaultTheme' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/styles/fonts' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/styles/shadow' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-paper/src/types' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-native-paper/src/components/__tests__/BottomNavigation.test.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/__tests__/BottomNavigation.test'>;
+}
+declare module 'react-native-paper/src/components/__tests__/Portal.test.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/__tests__/Portal.test'>;
+}
+declare module 'react-native-paper/src/components/BottomNavigation.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/BottomNavigation'>;
+}
+declare module 'react-native-paper/src/components/Button.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Button'>;
+}
+declare module 'react-native-paper/src/components/Card/Card.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Card/Card'>;
+}
+declare module 'react-native-paper/src/components/Card/CardActions.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Card/CardActions'>;
+}
+declare module 'react-native-paper/src/components/Card/CardContent.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Card/CardContent'>;
+}
+declare module 'react-native-paper/src/components/Card/CardCover.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Card/CardCover'>;
+}
+declare module 'react-native-paper/src/components/Checkbox.ios.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Checkbox.ios'>;
+}
+declare module 'react-native-paper/src/components/Checkbox.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Checkbox'>;
+}
+declare module 'react-native-paper/src/components/Dialog/Dialog.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Dialog/Dialog'>;
+}
+declare module 'react-native-paper/src/components/Dialog/DialogActions.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogActions'>;
+}
+declare module 'react-native-paper/src/components/Dialog/DialogContent.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogContent'>;
+}
+declare module 'react-native-paper/src/components/Dialog/DialogScrollArea.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogScrollArea'>;
+}
+declare module 'react-native-paper/src/components/Dialog/DialogTitle.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Dialog/DialogTitle'>;
+}
+declare module 'react-native-paper/src/components/Divider.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Divider'>;
+}
+declare module 'react-native-paper/src/components/DrawerItem.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/DrawerItem'>;
+}
+declare module 'react-native-paper/src/components/DrawerSection.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/DrawerSection'>;
+}
+declare module 'react-native-paper/src/components/FAB.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/FAB'>;
+}
+declare module 'react-native-paper/src/components/Icon.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Icon'>;
+}
+declare module 'react-native-paper/src/components/Modal.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Modal'>;
+}
+declare module 'react-native-paper/src/components/Paper.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Paper'>;
+}
+declare module 'react-native-paper/src/components/Portal/Portal.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Portal/Portal'>;
+}
+declare module 'react-native-paper/src/components/Portal/PortalConsumer.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalConsumer'>;
+}
+declare module 'react-native-paper/src/components/Portal/PortalHost.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalHost'>;
+}
+declare module 'react-native-paper/src/components/Portal/PortalManager.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Portal/PortalManager'>;
+}
+declare module 'react-native-paper/src/components/Portal/ThemedPortal.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Portal/ThemedPortal'>;
+}
+declare module 'react-native-paper/src/components/ProgressBar.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/ProgressBar'>;
+}
+declare module 'react-native-paper/src/components/RadioButton.ios.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/RadioButton.ios'>;
+}
+declare module 'react-native-paper/src/components/RadioButton.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/RadioButton'>;
+}
+declare module 'react-native-paper/src/components/SearchBar.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/SearchBar'>;
+}
+declare module 'react-native-paper/src/components/Switch.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Switch'>;
+}
+declare module 'react-native-paper/src/components/TextInput.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/TextInput'>;
+}
+declare module 'react-native-paper/src/components/Toolbar/Toolbar.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/Toolbar'>;
+}
+declare module 'react-native-paper/src/components/Toolbar/ToolbarAction.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarAction'>;
+}
+declare module 'react-native-paper/src/components/Toolbar/ToolbarBackAction.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarBackAction'>;
+}
+declare module 'react-native-paper/src/components/Toolbar/ToolbarContent.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Toolbar/ToolbarContent'>;
+}
+declare module 'react-native-paper/src/components/TouchableIcon.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/TouchableIcon'>;
+}
+declare module 'react-native-paper/src/components/TouchableRipple.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/TouchableRipple'>;
+}
+declare module 'react-native-paper/src/components/Typography/Caption.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Caption'>;
+}
+declare module 'react-native-paper/src/components/Typography/Headline.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Headline'>;
+}
+declare module 'react-native-paper/src/components/Typography/Paragraph.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Paragraph'>;
+}
+declare module 'react-native-paper/src/components/Typography/StyledText.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/StyledText'>;
+}
+declare module 'react-native-paper/src/components/Typography/Subheading.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Subheading'>;
+}
+declare module 'react-native-paper/src/components/Typography/Text.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Text'>;
+}
+declare module 'react-native-paper/src/components/Typography/Title.js' {
+  declare module.exports: $Exports<'react-native-paper/src/components/Typography/Title'>;
+}
+declare module 'react-native-paper/src/core/Provider.js' {
+  declare module.exports: $Exports<'react-native-paper/src/core/Provider'>;
+}
+declare module 'react-native-paper/src/core/ThemeProvider.js' {
+  declare module.exports: $Exports<'react-native-paper/src/core/ThemeProvider'>;
+}
+declare module 'react-native-paper/src/core/withTheme.js' {
+  declare module.exports: $Exports<'react-native-paper/src/core/withTheme'>;
+}
+declare module 'react-native-paper/src/index.js' {
+  declare module.exports: $Exports<'react-native-paper/src/index'>;
+}
+declare module 'react-native-paper/src/styles/colors.js' {
+  declare module.exports: $Exports<'react-native-paper/src/styles/colors'>;
+}
+declare module 'react-native-paper/src/styles/DarkTheme.js' {
+  declare module.exports: $Exports<'react-native-paper/src/styles/DarkTheme'>;
+}
+declare module 'react-native-paper/src/styles/DefaultTheme.js' {
+  declare module.exports: $Exports<'react-native-paper/src/styles/DefaultTheme'>;
+}
+declare module 'react-native-paper/src/styles/fonts.js' {
+  declare module.exports: $Exports<'react-native-paper/src/styles/fonts'>;
+}
+declare module 'react-native-paper/src/styles/shadow.js' {
+  declare module.exports: $Exports<'react-native-paper/src/styles/shadow'>;
+}
+declare module 'react-native-paper/src/types.js' {
+  declare module.exports: $Exports<'react-native-paper/src/types'>;
+}
--- a/packages/tabs/flow-typed/npm/react-native-safe-area-view_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-native-safe-area-view_vx.x.x.js
@@ -0,0 +1,45 @@
+// flow-typed signature: 7381ec0e475ad6658e39dd49d7a46956
+// flow-typed version: <<STUB>>/react-native-safe-area-view_v^0.7.0/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-native-safe-area-view'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-native-safe-area-view' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-native-safe-area-view/index.web' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-safe-area-view/withOrientation' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-native-safe-area-view/index' {
+  declare module.exports: $Exports<'react-native-safe-area-view'>;
+}
+declare module 'react-native-safe-area-view/index.js' {
+  declare module.exports: $Exports<'react-native-safe-area-view'>;
+}
+declare module 'react-native-safe-area-view/index.web.js' {
+  declare module.exports: $Exports<'react-native-safe-area-view/index.web'>;
+}
+declare module 'react-native-safe-area-view/withOrientation.js' {
+  declare module.exports: $Exports<'react-native-safe-area-view/withOrientation'>;
+}
--- a/packages/tabs/flow-typed/npm/react-native-tab-view_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-native-tab-view_vx.x.x.js
@@ -0,0 +1,109 @@
+// flow-typed signature: c4b56df82846bab57f905af0ed4505df
+// flow-typed version: <<STUB>>/react-native-tab-view_v^0.0.74/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-native-tab-view'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-native-tab-view' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-native-tab-view/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/SceneMap' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabBar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewAnimated' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerAndroid' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerExperimental' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerPan' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerScroll' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TouchableItem' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/types' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-native-tab-view/src/index.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/index'>;
+}
+declare module 'react-native-tab-view/src/SceneMap.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/SceneMap'>;
+}
+declare module 'react-native-tab-view/src/TabBar.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabBar'>;
+}
+declare module 'react-native-tab-view/src/TabViewAnimated.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewAnimated'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerExperimental.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerExperimental'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerPan.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerPan'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerScroll.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerScroll'>;
+}
+declare module 'react-native-tab-view/src/TabViewPropTypes.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPropTypes'>;
+}
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewTypeDefinitions'>;
+}
+declare module 'react-native-tab-view/src/TouchableItem.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TouchableItem'>;
+}
+declare module 'react-native-tab-view/types.js' {
+  declare module.exports: $Exports<'react-native-tab-view/types'>;
+}
--- a/packages/tabs/flow-typed/npm/react-navigation_vx.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-navigation_vx.x.x.js
@@ -0,0 +1,564 @@
+// flow-typed signature: 34e35e1c3ec93a558c7ad918514fdc72
+// flow-typed version: <<STUB>>/react-navigation_v^2.0.0-alpha.5/flow_v0.56.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-navigation'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-navigation' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-navigation/src/__tests__/addNavigationHelpers-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/__tests__/getChildEventSubscriber-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/__tests__/NavigationActions-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/__tests__/NavigationContainer-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/__tests__/NavigationStateUtils-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/addNavigationHelpers' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/createNavigationContainer' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/getChildEventSubscriber' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/NavigationActions' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/__tests__/DrawerNavigator-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/__tests__/StackNavigator-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/__tests__/SwitchNavigator-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/__tests__/TabNavigator-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/createDrawerNavigator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/createNavigator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/createStackNavigator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/createSwitchNavigator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/navigators/createTabNavigator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/PlatformHelpers.native' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/PlatformHelpers.web' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/react-navigation' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/react-navigation.web' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/createConfigGetter-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/DrawerRouter-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/Routers-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/StackRouter-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/SwitchRouter-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/TabRouter-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/__tests__/validateRouteConfigMap-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/createConfigGetter' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/DrawerRouter' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/getScreenForRouteName' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/KeyGenerator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/StackRouter' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/SwitchRouter' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/TabRouter' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/validateRouteConfigMap' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/routers/validateScreenOptions' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/StateUtils' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/utils/invariant' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/utils/ReactNativeFeatures' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/utils/shallowEqual' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/utils/withDefaultValue' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/__tests__/NavigationScenesReducer-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/__tests__/TabView-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/__tests__/withOrientation-test' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/AnimatedValueSubscription' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Drawer/DrawerNavigatorItems' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Drawer/DrawerScreen' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Drawer/DrawerSidebar' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Drawer/DrawerView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Header/Header' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Header/HeaderBackButton' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Header/HeaderStyleInterpolator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Header/HeaderTitle' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Header/ModularHeaderBackButton' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/NavigationContext' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/ResourceSavingSceneView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/ScenesReducer' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/SceneView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/createPointerEventsContainer' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/StackView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/StackViewCard' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/StackViewLayout' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/StackViewStyleInterpolator' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/StackView/StackViewTransitionConfigs' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/SwitchView/SwitchView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/TabView/TabBarBottom' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/TabView/TabBarIcon' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/TabView/TabBarTop' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/TabView/TabView' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/TouchableItem' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/Transitioner' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/withNavigation' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/withNavigationFocus' {
+  declare module.exports: any;
+}
+
+declare module 'react-navigation/src/views/withOrientation' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-navigation/src/__tests__/addNavigationHelpers-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/__tests__/addNavigationHelpers-test'>;
+}
+declare module 'react-navigation/src/__tests__/getChildEventSubscriber-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/__tests__/getChildEventSubscriber-test'>;
+}
+declare module 'react-navigation/src/__tests__/NavigationActions-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationActions-test'>;
+}
+declare module 'react-navigation/src/__tests__/NavigationContainer-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationContainer-test'>;
+}
+declare module 'react-navigation/src/__tests__/NavigationStateUtils-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/__tests__/NavigationStateUtils-test'>;
+}
+declare module 'react-navigation/src/addNavigationHelpers.js' {
+  declare module.exports: $Exports<'react-navigation/src/addNavigationHelpers'>;
+}
+declare module 'react-navigation/src/createNavigationContainer.js' {
+  declare module.exports: $Exports<'react-navigation/src/createNavigationContainer'>;
+}
+declare module 'react-navigation/src/getChildEventSubscriber.js' {
+  declare module.exports: $Exports<'react-navigation/src/getChildEventSubscriber'>;
+}
+declare module 'react-navigation/src/NavigationActions.js' {
+  declare module.exports: $Exports<'react-navigation/src/NavigationActions'>;
+}
+declare module 'react-navigation/src/navigators/__tests__/DrawerNavigator-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/DrawerNavigator-test'>;
+}
+declare module 'react-navigation/src/navigators/__tests__/StackNavigator-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/StackNavigator-test'>;
+}
+declare module 'react-navigation/src/navigators/__tests__/SwitchNavigator-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/SwitchNavigator-test'>;
+}
+declare module 'react-navigation/src/navigators/__tests__/TabNavigator-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/__tests__/TabNavigator-test'>;
+}
+declare module 'react-navigation/src/navigators/createDrawerNavigator.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/createDrawerNavigator'>;
+}
+declare module 'react-navigation/src/navigators/createNavigator.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/createNavigator'>;
+}
+declare module 'react-navigation/src/navigators/createStackNavigator.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/createStackNavigator'>;
+}
+declare module 'react-navigation/src/navigators/createSwitchNavigator.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/createSwitchNavigator'>;
+}
+declare module 'react-navigation/src/navigators/createTabNavigator.js' {
+  declare module.exports: $Exports<'react-navigation/src/navigators/createTabNavigator'>;
+}
+declare module 'react-navigation/src/PlatformHelpers.native.js' {
+  declare module.exports: $Exports<'react-navigation/src/PlatformHelpers.native'>;
+}
+declare module 'react-navigation/src/PlatformHelpers.web.js' {
+  declare module.exports: $Exports<'react-navigation/src/PlatformHelpers.web'>;
+}
+declare module 'react-navigation/src/react-navigation.js' {
+  declare module.exports: $Exports<'react-navigation/src/react-navigation'>;
+}
+declare module 'react-navigation/src/react-navigation.web.js' {
+  declare module.exports: $Exports<'react-navigation/src/react-navigation.web'>;
+}
+declare module 'react-navigation/src/routers/__tests__/createConfigGetter-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/createConfigGetter-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/DrawerRouter-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/DrawerRouter-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/Routers-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/Routers-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/StackRouter-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/StackRouter-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/SwitchRouter-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/SwitchRouter-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/TabRouter-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/TabRouter-test'>;
+}
+declare module 'react-navigation/src/routers/__tests__/validateRouteConfigMap-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/__tests__/validateRouteConfigMap-test'>;
+}
+declare module 'react-navigation/src/routers/createConfigGetter.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/createConfigGetter'>;
+}
+declare module 'react-navigation/src/routers/DrawerRouter.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/DrawerRouter'>;
+}
+declare module 'react-navigation/src/routers/getScreenForRouteName.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/getScreenForRouteName'>;
+}
+declare module 'react-navigation/src/routers/KeyGenerator.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/KeyGenerator'>;
+}
+declare module 'react-navigation/src/routers/StackRouter.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/StackRouter'>;
+}
+declare module 'react-navigation/src/routers/SwitchRouter.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/SwitchRouter'>;
+}
+declare module 'react-navigation/src/routers/TabRouter.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/TabRouter'>;
+}
+declare module 'react-navigation/src/routers/validateRouteConfigMap.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/validateRouteConfigMap'>;
+}
+declare module 'react-navigation/src/routers/validateScreenOptions.js' {
+  declare module.exports: $Exports<'react-navigation/src/routers/validateScreenOptions'>;
+}
+declare module 'react-navigation/src/StateUtils.js' {
+  declare module.exports: $Exports<'react-navigation/src/StateUtils'>;
+}
+declare module 'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange.js' {
+  declare module.exports: $Exports<'react-navigation/src/utils/getSceneIndicesForInterpolationInputRange'>;
+}
+declare module 'react-navigation/src/utils/invariant.js' {
+  declare module.exports: $Exports<'react-navigation/src/utils/invariant'>;
+}
+declare module 'react-navigation/src/utils/ReactNativeFeatures.js' {
+  declare module.exports: $Exports<'react-navigation/src/utils/ReactNativeFeatures'>;
+}
+declare module 'react-navigation/src/utils/shallowEqual.js' {
+  declare module.exports: $Exports<'react-navigation/src/utils/shallowEqual'>;
+}
+declare module 'react-navigation/src/utils/withDefaultValue.js' {
+  declare module.exports: $Exports<'react-navigation/src/utils/withDefaultValue'>;
+}
+declare module 'react-navigation/src/views/__tests__/NavigationScenesReducer-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/__tests__/NavigationScenesReducer-test'>;
+}
+declare module 'react-navigation/src/views/__tests__/TabView-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/__tests__/TabView-test'>;
+}
+declare module 'react-navigation/src/views/__tests__/withOrientation-test.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/__tests__/withOrientation-test'>;
+}
+declare module 'react-navigation/src/views/AnimatedValueSubscription.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/AnimatedValueSubscription'>;
+}
+declare module 'react-navigation/src/views/Drawer/DrawerNavigatorItems.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerNavigatorItems'>;
+}
+declare module 'react-navigation/src/views/Drawer/DrawerScreen.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerScreen'>;
+}
+declare module 'react-navigation/src/views/Drawer/DrawerSidebar.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerSidebar'>;
+}
+declare module 'react-navigation/src/views/Drawer/DrawerView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Drawer/DrawerView'>;
+}
+declare module 'react-navigation/src/views/Header/Header.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Header/Header'>;
+}
+declare module 'react-navigation/src/views/Header/HeaderBackButton.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderBackButton'>;
+}
+declare module 'react-navigation/src/views/Header/HeaderStyleInterpolator.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderStyleInterpolator'>;
+}
+declare module 'react-navigation/src/views/Header/HeaderTitle.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Header/HeaderTitle'>;
+}
+declare module 'react-navigation/src/views/Header/ModularHeaderBackButton.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Header/ModularHeaderBackButton'>;
+}
+declare module 'react-navigation/src/views/NavigationContext.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/NavigationContext'>;
+}
+declare module 'react-navigation/src/views/ResourceSavingSceneView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/ResourceSavingSceneView'>;
+}
+declare module 'react-navigation/src/views/ScenesReducer.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/ScenesReducer'>;
+}
+declare module 'react-navigation/src/views/SceneView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/SceneView'>;
+}
+declare module 'react-navigation/src/views/StackView/createPointerEventsContainer.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/createPointerEventsContainer'>;
+}
+declare module 'react-navigation/src/views/StackView/StackView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/StackView'>;
+}
+declare module 'react-navigation/src/views/StackView/StackViewCard.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewCard'>;
+}
+declare module 'react-navigation/src/views/StackView/StackViewLayout.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewLayout'>;
+}
+declare module 'react-navigation/src/views/StackView/StackViewStyleInterpolator.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewStyleInterpolator'>;
+}
+declare module 'react-navigation/src/views/StackView/StackViewTransitionConfigs.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/StackView/StackViewTransitionConfigs'>;
+}
+declare module 'react-navigation/src/views/SwitchView/SwitchView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/SwitchView/SwitchView'>;
+}
+declare module 'react-navigation/src/views/TabView/TabBarBottom.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/TabView/TabBarBottom'>;
+}
+declare module 'react-navigation/src/views/TabView/TabBarIcon.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/TabView/TabBarIcon'>;
+}
+declare module 'react-navigation/src/views/TabView/TabBarTop.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/TabView/TabBarTop'>;
+}
+declare module 'react-navigation/src/views/TabView/TabView.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/TabView/TabView'>;
+}
+declare module 'react-navigation/src/views/TouchableItem.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/TouchableItem'>;
+}
+declare module 'react-navigation/src/views/Transitioner.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/Transitioner'>;
+}
+declare module 'react-navigation/src/views/withNavigation.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/withNavigation'>;
+}
+declare module 'react-navigation/src/views/withNavigationFocus.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/withNavigationFocus'>;
+}
+declare module 'react-navigation/src/views/withOrientation.js' {
+  declare module.exports: $Exports<'react-navigation/src/views/withOrientation'>;
+}
--- a/packages/tabs/flow-typed/npm/react-test-renderer_v16.x.x.js
+++ b/packages/tabs/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -0,0 +1,62 @@
+// flow-typed signature: 2d946f2ec4aba5210b19d053c411a59d
+// flow-typed version: 95b3e05165/react-test-renderer_v16.x.x/flow_>=v0.47.x
+
+// Type definitions for react-test-renderer 16.x.x
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
+
+type ReactTestRendererJSON = {
+  type: string,
+  props: { [propName: string]: any },
+  children: null | ReactTestRendererJSON[]
+};
+
+type ReactTestRendererTree = ReactTestRendererJSON & {
+  nodeType: "component" | "host",
+  instance: any,
+  rendered: null | ReactTestRendererTree
+};
+
+type ReactTestInstance = {
+  instance: any,
+  type: string,
+  props: { [propName: string]: any },
+  parent: null | ReactTestInstance,
+  children: Array<ReactTestInstance | string>,
+
+  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
+  findByType(type: React$ElementType): ReactTestInstance,
+  findByProps(props: { [propName: string]: any }): ReactTestInstance,
+
+  findAll(
+    predicate: (node: ReactTestInstance) => boolean,
+    options?: { deep: boolean }
+  ): ReactTestInstance[],
+  findAllByType(
+    type: React$ElementType,
+    options?: { deep: boolean }
+  ): ReactTestInstance[],
+  findAllByProps(
+    props: { [propName: string]: any },
+    options?: { deep: boolean }
+  ): ReactTestInstance[]
+};
+
+type ReactTestRenderer = {
+  toJSON(): null | ReactTestRendererJSON,
+  toTree(): null | ReactTestRendererTree,
+  unmount(nextElement?: React$Element<any>): void,
+  update(nextElement: React$Element<any>): void,
+  getInstance(): null | ReactTestInstance,
+  root: ReactTestInstance
+};
+
+type TestRendererOptions = {
+  createNodeMock(element: React$Element<any>): any
+};
+
+declare module "react-test-renderer" {
+  declare function create(
+    nextElement: React$Element<any>,
+    options?: TestRendererOptions
+  ): ReactTestRenderer;
+}
--- a/packages/tabs/package.json
+++ b/packages/tabs/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "react-navigation-tabs",
+  "version": "0.1.0-alpha.0",
+  "description": "Tab Navigation components for React Navigation",
+  "main": "dist/index.js",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "test": "jest",
+    "flow": "flow",
+    "lint": "eslint .",
+    "build": "babel --no-babelrc --plugins=syntax-jsx,syntax-class-properties,syntax-object-rest-spread,transform-flow-strip-types src --out-dir dist --ignore '**/__tests__/**'",
+    "prepublish": "yarn build"
+  },
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "ios",
+    "android",
+    "tab",
+    "swipe",
+    "scrollable",
+    "coverflow"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-navigation/react-navigation-tabs.git"
+  },
+  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation-tabs/issues"
+  },
+  "homepage": "https://github.com/react-navigation/react-navigation-tabs#readme",
+  "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"
+  },
+  "devDependencies": {
+    "@expo/vector-icons": "^6.2.0",
+    "babel-jest": "^21.2.0",
+    "babel-plugin-syntax-class-properties": "^6.13.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-preset-react-native": "^4.0.0",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-to-json": "^3.2.2",
+    "eslint": "^4.12.1",
+    "eslint-config-satya164": "^1.0.1",
+    "eslint-plugin-react-native-globals": "^0.1.0",
+    "flow-bin": "~0.56.0",
+    "jest": "^21.2.1",
+    "prettier": "^1.8.2",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "react-native": "~0.50.4",
+    "react-navigation": "^2.0.0-alpha.5",
+    "react-test-renderer": "16.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-navigation": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": [
+      "<rootDir>/__setup__/enzyme.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
+}
--- a/packages/tabs/src/index.js
+++ b/packages/tabs/src/index.js
@@ -0,0 +1,14 @@
+/* @flow */
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  get createBottomTabNavigator() {
+    return require('./navigators/createBottomTabNavigator').default;
+  },
+  get createMaterialTopTabNavigator() {
+    return require('./navigators/createMaterialTopTabNavigator').default;
+  },
+  get createMaterialBottomTabNavigator() {
+    return require('./navigators/createMaterialBottomTabNavigator').default;
+  },
+};
--- a/packages/tabs/src/navigators/createBottomTabNavigator.js
+++ b/packages/tabs/src/navigators/createBottomTabNavigator.js
@@ -0,0 +1,129 @@
+/* @flow */
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+import TabBarBottom, { type TabBarOptions } from '../views/TabBarBottom';
+
+type Props = InjectedProps & {
+  tabBarComponent?: React.ComponentType<*>,
+  tabBarOptions?: TabBarOptions,
+};
+
+type State = {
+  loaded: number[],
+};
+
+class TabNavigationView extends React.PureComponent<Props, State> {
+  state = {
+    loaded: [this.props.navigation.state.index],
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.navigation.state.index !== this.props.navigation.state.index
+    ) {
+      const { index } = nextProps.navigation.state;
+
+      this.setState(state => ({
+        loaded: state.loaded.includes(index)
+          ? state.loaded
+          : [...state.loaded, index],
+      }));
+    }
+  }
+
+  _getLabel = ({ route, focused, tintColor }) => {
+    const label = this.props.getLabelText({ route });
+
+    if (typeof label === 'function') {
+      return label({ focused, tintColor });
+    }
+
+    return label;
+  };
+
+  _renderTabBar = () => {
+    const {
+      tabBarComponent: TabBarComponent = TabBarBottom,
+      tabBarOptions,
+      navigation,
+      onIndexChange,
+      screenProps,
+      getLabelText,
+      renderIcon,
+      onTabPress,
+    } = this.props;
+
+    const { descriptors } = this.props;
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarVisible === false) {
+      return null;
+    }
+
+    return (
+      <TabBarComponent
+        {...tabBarOptions}
+        navigation={navigation}
+        jumpToIndex={onIndexChange}
+        screenProps={screenProps}
+        onTabPress={onTabPress}
+        getLabelText={getLabelText}
+        renderIcon={renderIcon}
+      />
+    );
+  };
+
+  render() {
+    const { navigation, renderScene } = this.props;
+    const { routes } = navigation.state;
+    const { loaded } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.pages}>
+          {routes.map((route, index) => {
+            if (!loaded.includes(index)) {
+              // Don't render a screen if we've never navigated to it
+              return null;
+            }
+
+            const isFocused = navigation.state.index === index;
+
+            return (
+              <View
+                key={route.key}
+                pointerEvents={isFocused ? 'auto' : 'none'}
+                style={[
+                  StyleSheet.absoluteFill,
+                  { opacity: isFocused ? 1 : 0 },
+                ]}
+              >
+                {renderScene({ route })}
+              </View>
+            );
+          })}
+        </View>
+        {this._renderTabBar()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  pages: {
+    flex: 1,
+  },
+});
+
+export default createTabNavigator(TabNavigationView);
--- a/packages/tabs/src/navigators/createMaterialBottomTabNavigator.js
+++ b/packages/tabs/src/navigators/createMaterialBottomTabNavigator.js
@@ -0,0 +1,40 @@
+/* @flow */
+
+import * as React from 'react';
+import { BottomNavigation } from 'react-native-paper';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+
+type Props = InjectedProps & {
+  activeTintColor?: string,
+};
+
+class BottomNavigationView extends React.Component<Props> {
+  _getColor = ({ route }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return options.tabBarColor;
+  };
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const { activeTintColor, navigation, descriptors, ...rest } = this.props;
+
+    return (
+      <BottomNavigation
+        {...rest}
+        navigationState={navigation.state}
+        getColor={this._getColor}
+        theme={
+          /* $FlowFixMe */
+          activeTintColor ? { colors: { primary: activeTintColor } } : null
+        }
+      />
+    );
+  }
+}
+
+export default createTabNavigator(BottomNavigationView);
--- a/packages/tabs/src/navigators/createMaterialTopTabNavigator.js
+++ b/packages/tabs/src/navigators/createMaterialTopTabNavigator.js
@@ -0,0 +1,169 @@
+/* @flow */
+
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import createTabNavigator, {
+  type InjectedProps,
+} from '../utils/createTabNavigator';
+import TabBarTop, { type TabBarOptions } from '../views/TabBarTop';
+
+type Props = InjectedProps & {
+  animationEnabled?: boolean,
+  swipeEnabled?: boolean,
+  tabBarPosition?: 'top' | 'bottom',
+  tabBarComponent?: React.ComponentType<*>,
+  tabBarOptions?: TabBarOptions,
+};
+
+class TabView extends React.PureComponent<Props> {
+  static defaultProps = {
+    // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
+    initialLayout: Platform.select({
+      android: { width: 1, height: 0 },
+    }),
+  };
+
+  _getLabel = ({ route, tintColor, focused }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarLabel) {
+      return typeof options.tabBarLabel === 'function'
+        ? options.tabBarLabel({ tintColor, focused })
+        : options.tabBarLabel;
+    }
+
+    if (typeof options.title === 'string') {
+      return options.title;
+    }
+
+    return route.routeName;
+  };
+
+  _getOnPress = (previousScene, { route }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return options.tabBarOnPress;
+  };
+
+  _getTestIDProps = ({ route, focused }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    return typeof options.tabBarTestIDProps === 'function'
+      ? options.tabBarTestIDProps({ focused })
+      : options.tabBarTestIDProps;
+  };
+
+  _renderIcon = ({ focused, route, tintColor }) => {
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarIcon) {
+      return typeof options.tabBarIcon === 'function'
+        ? options.tabBarIcon({ tintColor, focused })
+        : options.tabBarIcon;
+    }
+
+    return null;
+  };
+
+  _renderTabBar = props => {
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    const tabBarVisible =
+      options.tabBarVisible == null ? true : options.tabBarVisible;
+
+    const {
+      tabBarComponent: TabBarComponent = TabBarTop,
+      tabBarPosition,
+      tabBarOptions,
+    } = this.props;
+
+    if (TabBarComponent === null || !tabBarVisible) {
+      return null;
+    }
+
+    return (
+      <TabBarComponent
+        {...tabBarOptions}
+        {...props}
+        tabBarPosition={tabBarPosition}
+        screenProps={this.props.screenProps}
+        navigation={this.props.navigation}
+        getLabelText={this.props.getLabelText}
+        getTestIDProps={this._getTestIDProps}
+        renderIcon={this._renderIcon}
+      />
+    );
+  };
+
+  _renderPanPager = props => <TabViewPagerPan {...props} />;
+
+  render() {
+    const {
+      navigation,
+      tabBarPosition,
+      animationEnabled,
+      renderScene,
+      ...rest
+    } = this.props;
+
+    let renderHeader;
+    let renderFooter;
+    let renderPager;
+
+    const { state } = this.props.navigation;
+    const route = state.routes[state.index];
+    const { descriptors } = this.props;
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    let swipeEnabled =
+      options.swipeEnabled == null
+        ? this.props.swipeEnabled
+        : options.swipeEnabled;
+
+    if (typeof swipeEnabled === 'function') {
+      swipeEnabled = swipeEnabled(state);
+    }
+
+    if (tabBarPosition === 'bottom') {
+      renderFooter = this._renderTabBar;
+    } else {
+      renderHeader = this._renderTabBar;
+    }
+
+    if (animationEnabled === false && swipeEnabled === false) {
+      renderPager = this._renderPanPager;
+    }
+
+    return (
+      <TabViewAnimated
+        {...rest}
+        navigationState={navigation.state}
+        animationEnabled={animationEnabled}
+        swipeEnabled={swipeEnabled}
+        renderScene={
+          /* $FlowFixMe */
+          renderScene
+        }
+        renderPager={renderPager}
+        renderHeader={renderHeader}
+        renderFooter={renderFooter}
+      />
+    );
+  }
+}
+
+export default createTabNavigator(TabView);
--- a/packages/tabs/src/utils/createTabNavigator.js
+++ b/packages/tabs/src/utils/createTabNavigator.js
@@ -0,0 +1,133 @@
+/* @flow */
+
+import * as React from 'react';
+import {
+  TabRouter,
+  NavigationActions,
+  createNavigator,
+  createNavigationContainer,
+} from 'react-navigation';
+import SceneView from 'react-navigation/src/views/SceneView';
+
+export type InjectedProps = {
+  getLabelText: (props: { route: any }) => any,
+  renderIcon: (props: {
+    route: any,
+    focused: boolean,
+    tintColor: string,
+  }) => React.Node,
+  renderScene: (props: { route: any }) => ?React.Node,
+  onIndexChange: (index: number) => any,
+  onTabPress: (props: { route: any }) => mixed,
+  navigation: any,
+  descriptors: any,
+  screenProps?: any,
+};
+
+export default function createTabNavigator(TabView: React.ComponentType<*>) {
+  class NavigationView extends React.Component<*> {
+    _renderScene = ({ route }) => {
+      const { screenProps, descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const TabComponent = descriptor.getComponent();
+      return (
+        <SceneView
+          screenProps={screenProps}
+          navigation={descriptor.navigation}
+          component={TabComponent}
+        />
+      );
+    };
+
+    _renderIcon = ({ route, focused = true, tintColor }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      if (options.tabBarIcon) {
+        return typeof options.tabBarIcon === 'function'
+          ? options.tabBarIcon({ focused, tintColor })
+          : options.tabBarIcon;
+      }
+
+      return null;
+    };
+
+    _getLabelText = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      if (options.tabBarLabel) {
+        return options.tabBarLabel;
+      }
+
+      if (typeof options.title === 'string') {
+        return options.title;
+      }
+
+      return route.routeName;
+    };
+
+    _handleOnTabPress = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const { navigation, options } = descriptor;
+
+      if (options.tabBarOnPress) {
+        options.tabBarOnPress({
+          navigation,
+        });
+      } else {
+        const isFocused =
+          this.props.navigation.state.index ===
+          this.props.navigation.state.routes.indexOf(route);
+
+        if (isFocused) {
+          if (route.hasOwnProperty('index') && route.index > 0) {
+            navigation.dispatch(NavigationActions.popToTop({ key: route.key }));
+          } else {
+            // TODO: do something to scroll to top
+          }
+        }
+      }
+    };
+
+    _handleIndexChange = index => {
+      const { navigation } = this.props;
+      navigation.navigate(navigation.state.routes[index].routeName);
+    };
+
+    render() {
+      const { descriptors, navigation, screenProps } = this.props;
+      const { state } = navigation;
+      const route = state.routes[state.index];
+      const descriptor = descriptors[route.key];
+      const options = {
+        ...this.props.navigationConfig,
+        ...descriptor.options,
+      };
+
+      return (
+        <TabView
+          {...options}
+          getLabelText={this._getLabelText}
+          renderIcon={this._renderIcon}
+          renderScene={this._renderScene}
+          onIndexChange={this._handleIndexChange}
+          onTabPress={this._handleOnTabPress}
+          navigation={navigation}
+          descriptors={descriptors}
+          screenProps={screenProps}
+        />
+      );
+    }
+  }
+
+  return (routes, config = {}) => {
+    const router = TabRouter(routes, config);
+    const navigator = createNavigator(NavigationView, router, config);
+
+    return createNavigationContainer(navigator);
+  };
+}
--- a/packages/tabs/src/utils/withDimensions.js
+++ b/packages/tabs/src/utils/withDimensions.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+import hoistNonReactStatic from 'hoist-non-react-statics';
+
+export const isOrientationLandscape = ({ width, height }) => width > height;
+
+export default function withDimensions(WrappedComponent) {
+  const { width, height } = Dimensions.get('window');
+
+  class EnhancedComponent extends React.Component {
+    static displayName = `withDimensions(${WrappedComponent.displayName})`;
+
+    state = {
+      dimensions: { width, height },
+      isLandscape: isOrientationLandscape({ width, height }),
+    };
+
+    componentDidMount() {
+      Dimensions.addEventListener('change', this.handleOrientationChange);
+    }
+
+    componentWillUnmount() {
+      Dimensions.removeEventListener('change', this.handleOrientationChange);
+    }
+
+    handleOrientationChange = ({ window }) => {
+      const isLandscape = isOrientationLandscape(window);
+      this.setState({ isLandscape });
+    };
+
+    render() {
+      return <WrappedComponent {...this.props} {...this.state} />;
+    }
+  }
+
+  return hoistNonReactStatic(EnhancedComponent, WrappedComponent);
+}
--- a/packages/tabs/src/views/TabBarBottom.js
+++ b/packages/tabs/src/views/TabBarBottom.js
@@ -0,0 +1,286 @@
+/* @flow */
+
+import React from 'react';
+import {
+  Animated,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  View,
+  Platform,
+} from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
+
+import TabBarIcon from './TabBarIcon';
+import withDimensions from '../utils/withDimensions';
+
+export type TabBarOptions = {
+  activeTintColor?: string,
+  inactiveTintColor?: string,
+  activeBackgroundColor?: string,
+  inactiveBackgroundColor?: string,
+  allowFontScaling: boolean,
+  showLabel: boolean,
+  showIcon: boolean,
+  labelStyle: any,
+  tabStyle: any,
+  adaptive?: boolean,
+  style: any,
+};
+
+type Props = TabBarOptions & {
+  navigation: any,
+  descriptors: any,
+  jumpToIndex: any,
+  onTabPress: any,
+  getLabelText: ({ route: any }) => any,
+  renderIcon: any,
+  dimensions: { width: number, height: number },
+  isLandscape: boolean,
+};
+
+const majorVersion = parseInt(Platform.Version, 10);
+const isIos = Platform.OS === 'ios';
+const isIOS11 = majorVersion >= 11 && isIos;
+
+const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
+
+class TabBarBottom extends React.Component<Props> {
+  static defaultProps = {
+    activeTintColor: '#3478f6', // Default active tint color in iOS 10
+    activeBackgroundColor: 'transparent',
+    inactiveTintColor: '#929292', // Default inactive tint color in iOS 10
+    inactiveBackgroundColor: 'transparent',
+    showLabel: true,
+    showIcon: true,
+    allowFontScaling: true,
+    adaptive: isIOS11,
+  };
+
+  _renderLabel = ({ route, focused }) => {
+    const {
+      activeTintColor,
+      inactiveTintColor,
+      labelStyle,
+      showLabel,
+      showIcon,
+      allowFontScaling,
+    } = this.props;
+
+    if (showLabel === false) {
+      return null;
+    }
+
+    const label = this.props.getLabelText({ route });
+    const tintColor = focused ? activeTintColor : inactiveTintColor;
+
+    if (typeof label === 'string') {
+      return (
+        <Animated.Text
+          numberOfLines={1}
+          style={[
+            styles.label,
+            { color: tintColor },
+            showIcon && this._shouldUseHorizontalLabels()
+              ? styles.labelBeside
+              : styles.labelBeneath,
+            styles.labelBeneath,
+            labelStyle,
+          ]}
+          allowFontScaling={allowFontScaling}
+        >
+          {label}
+        </Animated.Text>
+      );
+    }
+
+    if (typeof label === 'function') {
+      return label({ route, focused, tintColor });
+    }
+
+    return label;
+  };
+
+  _renderIcon = ({ route, focused }) => {
+    const {
+      navigation,
+      activeTintColor,
+      inactiveTintColor,
+      renderIcon,
+      showIcon,
+      showLabel,
+    } = this.props;
+    if (showIcon === false) {
+      return null;
+    }
+
+    const horizontal = this._shouldUseHorizontalLabels();
+
+    const activeOpacity = focused ? 1 : 0;
+    const inactiveOpacity = focused ? 0 : 1;
+
+    return (
+      <TabBarIcon
+        route={route}
+        navigation={navigation}
+        activeOpacity={activeOpacity}
+        inactiveOpacity={inactiveOpacity}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        renderIcon={renderIcon}
+        style={[
+          styles.iconWithExplicitHeight,
+          styles.iconWithLabel,
+          showLabel === false && !horizontal && styles.iconWithoutLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel,
+        ]}
+      />
+    );
+  };
+
+  _shouldUseHorizontalLabels = () => {
+    const { routes } = this.props.navigation.state;
+    const { isLandscape, dimensions, adaptive, tabStyle } = this.props;
+
+    if (!adaptive) {
+      return false;
+    }
+
+    if (Platform.isPad) {
+      let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
+
+      const flattenedStyle = StyleSheet.flatten(tabStyle);
+
+      if (flattenedStyle) {
+        if (typeof flattenedStyle.width === 'number') {
+          maxTabItemWidth = flattenedStyle.width;
+        } else if (typeof flattenedStyle.maxWidth === 'number') {
+          maxTabItemWidth = flattenedStyle.maxWidth;
+        }
+      }
+
+      return routes.length * maxTabItemWidth <= dimensions.width;
+    } else {
+      return isLandscape;
+    }
+  };
+
+  render() {
+    const {
+      navigation,
+      activeBackgroundColor,
+      inactiveBackgroundColor,
+      onTabPress,
+      jumpToIndex,
+      style,
+      tabStyle,
+    } = this.props;
+
+    const { routes } = navigation.state;
+
+    const tabBarStyle = [
+      styles.tabBar,
+      !Platform.isPad ? styles.tabBarCompact : styles.tabBarRegular,
+      styles.tabBarRegular,
+      style,
+    ];
+
+    return (
+      <Animated.View style={tabBarStyle}>
+        <SafeAreaView
+          style={styles.container}
+          forceInset={{ bottom: 'always', top: 'never' }}
+        >
+          {routes.map((route, index) => {
+            const focused = index === navigation.state.index;
+            const scene = { route, focused };
+
+            const backgroundColor = focused
+              ? activeBackgroundColor
+              : inactiveBackgroundColor;
+
+            return (
+              <TouchableWithoutFeedback
+                key={route.key}
+                onPress={() => {
+                  jumpToIndex(index);
+                  onTabPress({ route });
+                }}
+              >
+                <View
+                  style={[
+                    styles.tab,
+                    { backgroundColor },
+                    this._shouldUseHorizontalLabels()
+                      ? styles.tabLandscape
+                      : styles.tabPortrait,
+                    styles.tabPortrait,
+                    tabStyle,
+                  ]}
+                >
+                  {this._renderIcon(scene)}
+                  {this._renderLabel(scene)}
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          })}
+        </SafeAreaView>
+      </Animated.View>
+    );
+  }
+}
+
+const DEFAULT_HEIGHT = 49;
+const COMPACT_HEIGHT = 29;
+
+const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: '#F7F7F7', // Default background color in iOS 10
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(0, 0, 0, .3)',
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tabBarCompact: {
+    height: COMPACT_HEIGHT,
+  },
+  tabBarRegular: {
+    height: DEFAULT_HEIGHT,
+  },
+  tab: {
+    flex: 1,
+    alignItems: isIos ? 'center' : 'stretch',
+  },
+  tabPortrait: {
+    justifyContent: 'flex-end',
+    flexDirection: 'column',
+  },
+  tabLandscape: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  iconWithoutLabel: {
+    flex: 1,
+  },
+  iconWithLabel: {
+    flex: 1,
+  },
+  iconWithExplicitHeight: {
+    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
+  },
+  label: {
+    textAlign: 'center',
+    backgroundColor: 'transparent',
+  },
+  labelBeneath: {
+    fontSize: 10,
+    marginBottom: 1.5,
+  },
+  labelBeside: {
+    fontSize: 13,
+    marginLeft: 20,
+  },
+});
+
+export default withDimensions(TabBarBottom);
--- a/packages/tabs/src/views/TabBarIcon.js
+++ b/packages/tabs/src/views/TabBarIcon.js
@@ -0,0 +1,63 @@
+/* @flow */
+
+import React from 'react';
+import { Animated, View, StyleSheet } from 'react-native';
+
+type Props = {
+  route: any,
+  activeOpacity: any,
+  inactiveOpacity: any,
+  activeTintColor: any,
+  inactiveTintColor: any,
+  renderIcon: any,
+  style: any,
+};
+
+export default class TabBarIcon extends React.Component<Props> {
+  render() {
+    const {
+      route,
+      activeOpacity,
+      inactiveOpacity,
+      activeTintColor,
+      inactiveTintColor,
+      renderIcon,
+      style,
+    } = this.props;
+
+    // We render the icon twice at the same position on top of each other:
+    // active and inactive one, so we can fade between them.
+    return (
+      <View style={style}>
+        <Animated.View style={[styles.icon, { opacity: activeOpacity }]}>
+          {renderIcon({
+            route,
+            focused: true,
+            tintColor: activeTintColor,
+          })}
+        </Animated.View>
+        <Animated.View style={[styles.icon, { opacity: inactiveOpacity }]}>
+          {renderIcon({
+            route,
+            focused: false,
+            tintColor: inactiveTintColor,
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    // We render the icon twice at the same position on top of each other:
+    // active and inactive one, so we can fade between them:
+    // Cover the whole iconContainer:
+    position: 'absolute',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+  },
+});
--- a/packages/tabs/src/views/TabBarTop.js
+++ b/packages/tabs/src/views/TabBarTop.js
@@ -0,0 +1,159 @@
+/* @flow */
+
+import * as React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { TabBar } from 'react-native-tab-view';
+import TabBarIcon from './TabBarIcon';
+
+export type TabBarOptions = {
+  activeTintColor?: string,
+  inactiveTintColor?: string,
+  showLabel?: boolean,
+  showIcon?: boolean,
+  upperCaseLabel?: boolean,
+  labelStyle?: any,
+  iconStyle?: any,
+  allowFontScaling?: boolean,
+};
+
+type Props = TabBarOptions & {
+  position: Animated.Value,
+  offsetX: Animated.Value,
+  panX: Animated.Value,
+  layout: any,
+  navigation: any,
+  renderIcon: (props: {
+    route: any,
+    focused: boolean,
+    tintColor: string,
+  }) => React.Node,
+  getLabelText: (props: { route: any }) => any,
+  useNativeDriver?: boolean,
+  jumpToIndex: (index: number) => any,
+};
+
+export default class TabBarTop extends React.PureComponent<Props> {
+  static defaultProps = {
+    activeTintColor: '#fff',
+    inactiveTintColor: '#fff',
+    showIcon: false,
+    showLabel: true,
+    upperCaseLabel: true,
+    allowFontScaling: true,
+  };
+
+  _renderLabel = ({ route, index, focused }) => {
+    const {
+      position,
+      navigation,
+      activeTintColor,
+      inactiveTintColor,
+      showLabel,
+      upperCaseLabel,
+      labelStyle,
+      allowFontScaling,
+    } = this.props;
+
+    if (showLabel === false) {
+      return null;
+    }
+
+    const { routes } = navigation.state;
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...routes.map((x, i) => i)];
+    const outputRange = inputRange.map(
+      inputIndex => (inputIndex === index ? activeTintColor : inactiveTintColor)
+    );
+    const color = position.interpolate({
+      inputRange,
+      outputRange: outputRange,
+    });
+
+    const tintColor = focused ? activeTintColor : inactiveTintColor;
+    const label = this.props.getLabelText({ route });
+
+    if (typeof label === 'string') {
+      return (
+        <Animated.Text
+          style={[styles.label, { color }, labelStyle]}
+          allowFontScaling={allowFontScaling}
+        >
+          {upperCaseLabel ? label.toUpperCase() : label}
+        </Animated.Text>
+      );
+    }
+    if (typeof label === 'function') {
+      return label({ focused, tintColor });
+    }
+
+    return label;
+  };
+
+  _renderIcon = ({ route, index }) => {
+    const {
+      position,
+      navigation,
+      activeTintColor,
+      inactiveTintColor,
+      renderIcon,
+      showIcon,
+      iconStyle,
+    } = this.props;
+
+    if (showIcon === false) {
+      return null;
+    }
+
+    // Prepend '-1', so there are always at least 2 items in inputRange
+    const inputRange = [-1, ...navigation.state.routes.map((x, i) => i)];
+    const activeOpacity = position.interpolate({
+      inputRange,
+      outputRange: inputRange.map(i => (i === index ? 1 : 0)),
+    });
+    const inactiveOpacity = position.interpolate({
+      inputRange,
+      outputRange: inputRange.map(i => (i === index ? 0 : 1)),
+    });
+
+    return (
+      <TabBarIcon
+        route={route}
+        navigation={navigation}
+        activeOpacity={activeOpacity}
+        inactiveOpacity={inactiveOpacity}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        renderIcon={renderIcon}
+        style={[styles.icon, iconStyle]}
+      />
+    );
+  };
+
+  render() {
+    /* eslint-disable no-unused-vars */
+    const { navigation, renderIcon, getLabelText, ...rest } = this.props;
+
+    return (
+      /* $FlowFixMe */
+      <TabBar
+        {...rest}
+        navigationState={navigation.state}
+        renderIcon={this._renderIcon}
+        renderLabel={this._renderLabel}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    height: 24,
+    width: 24,
+  },
+  label: {
+    textAlign: 'center',
+    fontSize: 13,
+    margin: 8,
+    backgroundColor: 'transparent',
+  },
+});
--- a/packages/tabs/yarn.lock
+++ b/packages/tabs/yarn.lock