chore: release 4.0.0

These two types are missing entirely from the flow definition, while they're incomplete they at least prevent flow from complaining that they're not defined at all.

I decided against copying the `ScrollView` types from `react-native` as they're really quite complex and likely to fall out-of-sync with the implementation in `react-native`. So instead I'd recommend overriding the types when  consuming using something like:

```js

import {ScrollView as NativeScrollView} from 'react-native';
import {ScrollView as NavigationScrollView} from 'react-navigation';

const ScrollView: React.ComponentType<typeof NativeScrollView>) = NavigationScrollView;
```

.circleci/config.yml

@@ -1,11 +1,65 @@
-version: 3
+version: 2
+
+defaults: &defaults
+  docker:
+    - image: circleci/node:10.9.0
+  working_directory: ~/project
+
 jobs:
-  build:
-    docker:
-      - image: circleci/node:10
-    parallelism: 2
-    working_directory: ~/react-navigation
+  install-dependencies:
+    <<: *defaults
     steps:
       - checkout
-      - run: yarn install --frozen-lockfile
-      - run: ./scripts/test.sh
+      - 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 --frozen-lockfile
+          yarn install --frozen-lockfile --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-typecheck:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn lint
+            yarn typescript
+  unit-tests:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn test --coverage
+            yarn codecov
+        - store_artifacts:
+            path: coverage
+            destination: coverage
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - install-dependencies
+      - lint-and-typecheck:
+          requires:
+            - install-dependencies
+      - unit-tests:
+          requires:
+            - install-dependencies

.eslintignore

@@ -1,8 +1,6 @@
-coverage
-flow
-node_modules
-lib*
-build
-
-## Temporary
-examples
+coverage/
+flow/
+node_modules/
+lib/
+build/
+typescript/

.eslintrc

@@ -1,52 +1,21 @@
 {
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "prettier",
-    "prettier/react"
-  ],
-  "parser": "babel-eslint",
-  "plugins": ["react", "prettier"],
+  "extends": "eslint-config-satya164",
+
+  "plugins": ["react-native-globals"],
+
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+  },
+
   "env": {
-    "jasmine": true
+    "es6": true,
+    "react-native-globals/all": true,
   },
+
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "trailingComma": "es5",
-        "singleQuote": true
-      }
-    ],
-
-    "no-underscore-dangle": "off",
-    "no-use-before-define": "off",
-    "no-unused-expressions": "off",
-    "new-cap": "off",
-    "no-plusplus": "off",
-    "no-class-assign": "off",
-    "no-duplicate-imports": "off",
-    "import/extensions": "off",
-    "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
-
-    "react/jsx-filename-extension": ["off", { "extensions": [".js", ".jsx"] }],
-
-    "react/sort-comp": "off",
-    "react/prefer-stateless-function": "off",
-    "react/no-deprecated": "off",
-
-    "react/forbid-prop-types": "warn",
-    "react/prop-types": "off",
-    "react/require-default-props": "off",
-    "react/no-unused-prop-types": "off"
-  },
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "modules": true
-    }
+    "react/sort-comp": "off"
   }
 }

.release-it.json

@@ -1,8 +1,5 @@
 {
-  "increment": "conventional:angular",
-  "changelogCommand": "conventional-changelog -p angular | tail -n +3",
-  "safeBump": false,
-  "src": {
+  "git": {
     "commitMessage": "chore: release %s",
     "tagName": "v%s"
   },
@@ -11,5 +8,10 @@
   },
   "github": {
     "release": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular"
+    }
   }
 }

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## Unreleased
 
+- Add missing Flow type exports for `ScrollView` and `NavigationContext`
+
 ## [3.11.1]
 
 ## Fixes
@@ -245,7 +247,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Fix drawer accessibility label when drawer label is not a string
 
-
 ## [3.0.5] - [2018-12-03](https://github.com/react-navigation/react-navigation/releases/tag/3.0.5)
 
 ## Fixes
@@ -268,7 +269,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Accessibility labels on drawer items (https://github.com/react-navigation/react-navigation-drawer/pull/30)
 
-
 ## [3.0.3] - [2018-11-30](https://github.com/react-navigation/react-navigation/releases/tag/3.0.3)
 
 ## Fixes

LICENSE

@@ -1,26 +1,21 @@
-BSD License
+MIT License
 
-For React Navigation software
+Copyright (c) 2017 React Native Community
 
-Copyright (c) 2016-present, React Navigation Contributors. All rights reserved.
+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:
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
- * Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
- * Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+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.

assetsTransformer.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-commonjs */
 /**
  * This file is needed to hijack asset imports so that test files don't attempt
  * to import them as JavaScript modules.
@@ -6,7 +7,7 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename, config, options) {
+  process(src, filename) {
     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
   },
 };

babel.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
 };

commitlint.config.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["expo"]
+}

example/.eslintrc

@@ -0,0 +1,18 @@
+{
+  'extends': '../.eslintrc',
+
+  'settings':
+    {
+      'import/core-modules':
+        [
+          'expo-asset',
+          'react-navigation-stack',
+          'react-native-gesture-handler',
+          'react-native-reanimated',
+        ],
+    },
+
+  "rules": {
+    "react-native/no-inline-styles": "off"
+  }
+}

example/App.tsx

@@ -5,6 +5,7 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
+  TouchableOpacity,
   Text,
   View,
 } from 'react-native';
@@ -13,10 +14,15 @@ import {
   RectButton,
 } from 'react-native-gesture-handler';
 import {
+  SupportedThemes,
+  ThemeColors,
+  ThemeContext,
+  Themed,
   createAppContainer,
-  createStackNavigator,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import CustomTabs from './src/CustomTabs';
 import CustomTabUI from './src/CustomTabUI';
 import Drawer from './src/Drawer';
@@ -173,6 +179,9 @@ interface State {
 }
 
 class MainScreen extends React.Component<any, State> {
+  static contextType = ThemeContext;
+  context!: React.ContextType<typeof ThemeContext>;
+
   state = {
     scrollY: new Animated.Value(0),
   };
@@ -218,7 +227,7 @@ class MainScreen extends React.Component<any, State> {
       <View style={{ flex: 1 }}>
         <NativeViewGestureHandler>
           <Animated.ScrollView
-            style={{ flex: 1, backgroundColor: '#eee' }}
+            style={{ flex: 1, backgroundColor: ThemeColors[this.context].body }}
             scrollEventThrottle={1}
             onScroll={Animated.event(
               [
@@ -263,7 +272,11 @@ class MainScreen extends React.Component<any, State> {
               forceInset={{ top: 'never', bottom: 'always' }}
               style={{ backgroundColor: '#eee' }}
             >
-              <View style={{ backgroundColor: '#fff' }}>
+              <View
+                style={{
+                  backgroundColor: ThemeColors[this.context].bodyContent,
+                }}
+              >
                 {Object.keys(ExampleRoutes).map((routeName: string) => (
                   <RectButton
                     key={routeName}
@@ -283,10 +296,17 @@ class MainScreen extends React.Component<any, State> {
                       }
                     }}
                   >
-                    <View style={styles.item}>
-                      <Text style={styles.title}>
+                    <View
+                      style={[
+                        styles.item,
+                        this.context === 'dark'
+                          ? styles.itemDark
+                          : styles.itemLight,
+                      ]}
+                    >
+                      <Themed.Text style={styles.title}>
                         {ExampleInfo[routeName].name}
-                      </Text>
+                      </Themed.Text>
                       <Text style={styles.description}>
                         {ExampleInfo[routeName].description}
                       </Text>
@@ -306,7 +326,7 @@ class MainScreen extends React.Component<any, State> {
   }
 }
 
-const AppNavigator = createAppContainer(
+const Navigation = createAppContainer(
   createStackNavigator(
     {
       ...ExampleRoutes,
@@ -327,11 +347,50 @@ const AppNavigator = createAppContainer(
   )
 );
 
-export default class App extends React.Component {
-  render() {
-    return <AppNavigator /* persistenceKey="if-you-want-it" */ />;
-  }
-}
+export default () => {
+  let [theme, setTheme] = React.useState<SupportedThemes>('light');
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Navigation theme={theme} />
+      <View style={{ position: 'absolute', bottom: 60, right: 20 }}>
+        <TouchableOpacity
+          onPress={() => {
+            setTheme(theme === 'light' ? 'dark' : 'light');
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: ThemeColors[theme].bodyContent,
+              borderRadius: 25,
+              width: 50,
+              height: 50,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderColor: ThemeColors[theme].bodyBorder,
+              borderWidth: 1,
+              shadowColor: ThemeColors[theme].label,
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.4,
+              shadowRadius: 2,
+
+              elevation: 5,
+            }}
+          >
+            <MaterialCommunityIcons
+              name="theme-light-dark"
+              size={30}
+              color={ThemeColors[theme].label}
+            />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   backgroundUnderlay: {
@@ -369,19 +428,17 @@ const styles = StyleSheet.create({
     color: '#999',
     fontSize: 13,
   },
-  image: {
-    alignSelf: 'center',
-    height: 120,
-    marginBottom: 20,
-    resizeMode: 'contain',
-    width: 120,
-  },
   item: {
-    borderBottomColor: '#ddd',
     borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
+  itemLight: {
+    borderBottomColor: ThemeColors.light.bodyBorder,
+  },
+  itemDark: {
+    borderBottomColor: ThemeColors.dark.bodyBorder,
+  },
   statusBarUnderlay: {
     backgroundColor: '#673ab7',
     height: 20,
@@ -391,7 +448,6 @@ const styles = StyleSheet.create({
     top: 0,
   },
   title: {
-    color: '#444',
     fontSize: 16,
     fontWeight: 'bold',
   },

example/app.json

@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "React Navigation Stack Example",
+    "description": "Demonstrates the various capabilities of react-navigation-stack",
+    "slug": "react-navigation-stack-demo",
+    "sdkVersion": "33.0.0",
+    "version": "1.0.0",
+    "primaryColor": "#2196f3",
+    "packagerOpts": {
+      "config": "./metro.config.js",
+      "projectRoots": ""
+    }
+  }
+}

example/metro.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const project = require('../package.json');
+const escape = require('escape-string-regexp');
+
+const projectDependencies = Object.keys({
+  ...project.dependencies,
+  ...project.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(
+        `^${escape(
+          path.resolve(__dirname, 'node_modules', project.name)
+        )}\\/.*$`
+      ),
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
+      ),
+    ]),
+
+    providesModuleNodeModules: [
+      '@expo/vector-icons',
+      '@babel/runtime',
+      ...projectDependencies,
+    ],
+  },
+};

example/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "playground",
+  "version": "0.0.1",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^10.0.0",
+    "@react-native-community/masked-view": "^0.1.1",
+    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/native": "^3.6.2",
+    "expo": "^33.0.7",
+    "expo-asset": "^5.0.1",
+    "expo-blur": "~5.0.1",
+    "expo-constants": "~5.0.1",
+    "hoist-non-react-statics": "^3.3.0",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-iphone-x-helper": "^1.2.1",
+    "react-native-paper": "^2.15.2",
+    "react-navigation-drawer": "^2.0.1",
+    "react-navigation-header-buttons": "^3.0.2",
+    "react-navigation-stack": "^1.5.1",
+    "react-navigation-tabs": "^1.2.0"
+  },
+  "devDependencies": {
+    "babel-plugin-module-resolver": "^3.2.0"
+  },
+  "resolutions": {
+    "react-native-safe-area-view": "0.14.6",
+    "react-native-screens": "1.0.0-alpha.23"
+  }
+}

example/src/CustomTabUI.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
 import {
+  Alert,
+  TouchableOpacity,
   LayoutAnimation,
   StatusBar,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createMaterialTopTabNavigator,
+  Themed,
+  ThemeContext,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {
@@ -42,7 +49,7 @@ class MyHomeScreen extends React.Component<Props> {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Home Screen</Text>
+        <Themed.Text>Home Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -53,9 +60,9 @@ class MyHomeScreen extends React.Component<Props> {
   }
 }
 
-class RecommendedScreen extends React.Component<Props> {
+class StarredScreen extends React.Component<Props> {
   static navigationOptions = {
-    tabBarLabel: 'Recommended',
+    tabBarLabel: 'Starred',
     tabBarIcon: ({
       tintColor,
       focused,
@@ -76,7 +83,7 @@ class RecommendedScreen extends React.Component<Props> {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Recommended Screen</Text>
+        <Themed.Text>Starred Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -87,12 +94,23 @@ class RecommendedScreen extends React.Component<Props> {
   }
 }
 
+type MaterialTopTabBarProps = React.ComponentProps<typeof MaterialTopTabBar>;
+
+class MaterialTopTabBarWrapper extends React.Component<MaterialTopTabBarProps> {
+  render() {
+    return (
+      <SafeAreaView
+        style={{ backgroundColor: '#000' }}
+        forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}
+      >
+        <MaterialTopTabBar {...this.props} />
+      </SafeAreaView>
+    );
+  }
+}
+
 class FeaturedScreen extends React.Component<Props> {
-  static navigationOptions = ({
-    navigation,
-  }: {
-    navigation: NavigationScreenProp<NavigationState>;
-  }) => ({
+  static navigationOptions = {
     tabBarLabel: 'Featured',
     tabBarIcon: ({
       tintColor,
@@ -109,12 +127,13 @@ class FeaturedScreen extends React.Component<Props> {
         style={{ color: tintColor }}
       />
     ),
-  });
+  };
+
   render() {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Featured Screen</Text>
+        <Themed.Text>Featured Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -125,13 +144,25 @@ class FeaturedScreen extends React.Component<Props> {
   }
 }
 
-const SimpleTabs = createMaterialTopTabNavigator({
-  Home: MyHomeScreen,
-  Recommended: RecommendedScreen,
-  Featured: FeaturedScreen,
-});
+const SimpleTabs = createMaterialTopTabNavigator(
+  {
+    Home: MyHomeScreen,
+    Starred: StarredScreen,
+    Featured: FeaturedScreen,
+  },
+  {
+    tabBarComponent: MaterialTopTabBarWrapper,
+    tabBarOptions: {
+      style: {
+        backgroundColor: '#000',
+      },
+    },
+  }
+);
 
 class TabNavigator extends React.Component<Props> {
+  static contextType = ThemeContext;
+
   static router = SimpleTabs.router;
   componentWillUpdate() {
     LayoutAnimation.easeInEaseOut();
@@ -143,25 +174,38 @@ class TabNavigator extends React.Component<Props> {
     let bottom = null;
     if (activeRoute.routeName !== 'Home') {
       bottom = (
-        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
-          <Button
-            title="Check out"
+        <View
+          style={{
+            height: 50,
+            borderTopWidth: StyleSheet.hairlineWidth,
+            backgroundColor: this.context === 'light' ? '#000' : '#fff',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <TouchableOpacity
             onPress={() => {
+              Alert.alert('hello!');
               //
             }}
-          />
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                color: this.context === 'light' ? '#fff' : '#000',
+                fontWeight: 'bold',
+              }}
+            >
+              Check out
+            </Text>
+          </TouchableOpacity>
         </View>
       );
     }
     return (
       <View style={{ flex: 1 }}>
-        <StatusBar barStyle="default" />
-        <SafeAreaView
-          style={{ flex: 1 }}
-          forceInset={{ horizontal: 'always', top: 'always' }}
-        >
-          <SimpleTabs navigation={navigation} />
-        </SafeAreaView>
+        <StatusBar barStyle="light-content" />
+        <SimpleTabs navigation={navigation} />
         {bottom}
       </View>
     );

example/src/CustomTabs.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { ScrollView, StatusBar, StyleSheet, Text } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import {
   createNavigator,
   NavigationState,
   SafeAreaView,
   TabRouter,
+  Themed,
+  useTheme,
+  createAppContainer,
+  NavigationScreenProp,
 } from 'react-navigation';
-import { createAppContainer } from 'react-navigation';
-import { NavigationScreenProp } from 'react-navigation';
+
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -29,7 +32,7 @@ const MyNavScreen = ({
         title="Go back"
       />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -65,13 +68,12 @@ const CustomTabBar = ({
           style={styles.tab}
           key={route.routeName}
         >
-          <Text>{route.routeName}</Text>
+          <Themed.Text>{route.routeName}</Themed.Text>
         </BorderlessButton>
       ))}
     </SafeAreaView>
   );
 };
-
 // @todo - how does the type definition for a custom navigator work?
 class CustomTabView extends React.Component<any> {
   render() {
@@ -129,4 +131,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CustomTabs;
+export default () => {
+  // Need to thread the theme through to detached nested navigator
+  let theme = useTheme();
+
+  return <CustomTabs detached theme={theme} />;
+};

example/src/Drawer.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { ScrollView, StatusBar, StyleProp, TextStyle } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { ScrollView, StyleProp, TextStyle } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 import {
-  createDrawerNavigator,
-  createStackNavigator,
+  Themed,
   SafeAreaView,
+  NavigationScreenProp,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationScreenProp, NavigationState } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -27,7 +29,7 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.navigate('Index')} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -35,7 +37,7 @@ const InboxScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
@@ -44,13 +46,13 @@ const EmailScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Email Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
 
 const DraftsScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
@@ -62,7 +64,7 @@ const InboxStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="move-to-inbox"
           size={24}
@@ -81,7 +83,7 @@ const DraftsStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="drafts"
           size={24}

example/src/ModalStack.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { ScrollView, StatusBar, Text } from 'react-native';
+import { ScrollView } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
+  Themed,
   SafeAreaView,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationState } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -45,7 +46,7 @@ const MyNavScreen = ({
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -98,7 +99,7 @@ const MyHeaderTestScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={`Full screen view`} navigation={navigation} />;
+}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
 MyHeaderTestScreen.navigationOptions = ({
   navigation,
 }: {

example/src/SampleText.tsx

@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Themed } from 'react-navigation';
 
 /**
  * Used across examples as a screen placeholder.
  */
 
 const SampleText = ({ children }: { children?: ReactNode }) => (
-  <Text style={styles.sampleText}>{children}</Text>
+  <Themed.Text style={styles.sampleText}>{children}</Themed.Text>
 );
 
 export default SampleText;

example/src/SimpleStack.tsx

@@ -1,9 +1,7 @@
 // tslint:disable no-unused-expression
 
 import * as React from 'react';
-import { StatusBar } from 'react-native';
 import {
-  createStackNavigator,
   NavigationActions,
   NavigationEventPayload,
   NavigationEventSubscription,
@@ -12,8 +10,10 @@ import {
   NavigationStateRoute,
   SafeAreaView,
   StackActions,
+  Themed,
   withNavigation,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -93,7 +93,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Go back"
         />
         <Button onPress={() => dismiss()} title="Dismiss" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -148,7 +148,7 @@ interface MyPhotosScreenProps {
 }
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
-    headerLeft: <MyBackButtonWithNavigation />,
+    headerLeft: () => <MyBackButtonWithNavigation />,
     title: 'Photos',
   };
   s0: NavigationEventSubscription | null = null;

example/src/SimpleTabs.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Animated, Platform, StatusBar, Text, View } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createBottomTabNavigator,
   FlatList,
   NavigationEventSubscription,
   NavigationScreenProp,
   SafeAreaView,
+  Themed,
   ScrollView,
+  NavigationEventPayload,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationEventPayload, NavigationState } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -37,28 +38,29 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
       {TEXT.split('\n').map((p, n) => (
-        <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+        <Themed.Text
+          key={n}
+          style={{ marginVertical: 10, marginHorizontal: 8 }}
+        >
           {p}
-        </Text>
+        </Themed.Text>
       ))}
-      <StatusBar barStyle="default" />
+      <Themed.StatusBar />
     </SafeAreaView>
   </ScrollView>
 );
 
-const MyListScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyListScreen = () => (
   <FlatList
     data={TEXT.split('\n')}
     style={{ paddingTop: 10 }}
-    keyExtractor={(item, index) => index.toString()}
+    keyExtractor={(_, index) => index.toString()}
     renderItem={({ item }) => (
-      <Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
+      <Themed.Text
+        style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}
+      >
         {item}
-      </Text>
+      </Themed.Text>
     )}
   />
 );
@@ -72,7 +74,6 @@ const MyHomeScreen = ({
 MyHomeScreen.navigationOptions = {
   tabBarIcon: ({
     tintColor,
-    focused,
     horizontal,
   }: {
     tintColor: string;
@@ -80,7 +81,7 @@ MyHomeScreen.navigationOptions = {
     horizontal: boolean;
   }) => (
     <Ionicons
-      name={'ios-home'}
+      name="ios-home"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
@@ -100,7 +101,6 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
   static navigationOptions = {
     tabBarIcon: ({
       tintColor,
-      focused,
       horizontal,
     }: {
       tintColor: string;
@@ -108,7 +108,7 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
       horizontal: boolean;
     }) => (
       <Ionicons
-        name={'ios-people'}
+        name="ios-people"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
@@ -147,7 +147,6 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
   static navigationOptions = {
     tabBarIcon: ({
       tintColor,
-      focused,
       horizontal,
     }: {
       tintColor: string;
@@ -155,7 +154,7 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
       horizontal: boolean;
     }) => (
       <Ionicons
-        name={'ios-chatboxes'}
+        name="ios-chatboxes"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
@@ -196,7 +195,6 @@ const MySettingsScreen = ({
 MySettingsScreen.navigationOptions = {
   tabBarIcon: ({
     tintColor,
-    focused,
     horizontal,
   }: {
     tintColor: string;
@@ -204,7 +202,7 @@ MySettingsScreen.navigationOptions = {
     horizontal: boolean;
   }) => (
     <Ionicons
-      name={'ios-settings'}
+      name="ios-settings"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />

example/src/StackWithCustomHeaderBackImage.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { Button, Image, StatusBar, StyleSheet } from 'react-native';
+import { Button, Image, StyleSheet } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
+  NavigationScreenConfigProps,
+  Themed,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {
@@ -36,7 +38,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Navigate to a photos screen"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -81,7 +83,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
           title="Navigate to a profile screen"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -91,12 +93,9 @@ interface MyProfileScreenProps {
   navigation: NavigationScreenProp<NavigationState>;
 }
 class MyProfileScreen extends React.Component<MyProfileScreenProps> {
-  static navigationOptions = () => ({
-    headerBackImage: (
-      <MyCustomHeaderBackImage style={styles.myCustomHeaderBackImageAlt} />
-    ),
+  static navigationOptions = {
     title: 'Profile',
-  });
+  };
 
   render() {
     const { navigation } = this.props;
@@ -104,7 +103,7 @@ class MyProfileScreen extends React.Component<MyProfileScreenProps> {
       <SafeAreaView>
         <SampleText>{`${navigation.state.params!.name}'s Profile`}</SampleText>
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -125,9 +124,18 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
-      headerBackImage: MyCustomHeaderBackImage as any,
-    },
+    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
+      headerBackImage: (
+        <MyCustomHeaderBackImage
+          style={[
+            styles.myCustomHeaderBackImageAlt,
+            {
+              tintColor: theme === 'light' ? '#000' : '#fff',
+            },
+          ]}
+        />
+      ),
+    }),
   }
 );
 
@@ -142,7 +150,5 @@ const styles = StyleSheet.create({
     resizeMode: 'contain',
     width: 24,
   },
-  myCustomHeaderBackImageAlt: {
-    tintColor: '#f00',
-  },
+  myCustomHeaderBackImageAlt: {},
 });

example/src/StackWithHeaderPreset.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { StatusBar } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 

example/src/StackWithTranslucentHeader.tsx

@@ -1,23 +1,20 @@
 import * as React from 'react';
-import {
-  Platform,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  View,
-} from 'react-native';
-import { BlurView } from 'react-native-blur';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
 import { isIphoneX } from 'react-native-iphone-x-helper';
 import {
-  createStackNavigator,
-  Header,
-  HeaderStyleInterpolator,
   NavigationEventPayload,
   NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
-  TransitionConfig,
+  Themed,
+  SupportedThemes,
 } from 'react-navigation';
+import {
+  createStackNavigator,
+  Header,
+  HeaderStyleInterpolator,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -49,7 +46,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
         <Button onPress={() => popToTop()} title="Pop to top" />
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </ScrollView>
     );
   }
@@ -190,8 +187,9 @@ const MyProfileScreen = ({
 
 MyProfileScreen.navigationOptions = (props: {
   navigation: NavigationScreenProp<NavigationState>;
+  theme: SupportedThemes;
 }) => {
-  const { navigation } = props;
+  const { navigation, theme } = props;
   const { state, setParams } = navigation;
   const { params } = state;
   return {
@@ -201,6 +199,7 @@ MyProfileScreen.navigationOptions = (props: {
     headerRight: (
       <HeaderButtons>
         <HeaderButtons.Item
+          color={theme === 'light' ? '#000' : '#fff'}
           title={params!.mode === 'edit' ? 'Done' : 'Edit'}
           onPress={() =>
             setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
@@ -227,27 +226,29 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    defaultNavigationOptions: ({ theme }) => ({
       headerBackground:
-      Platform.OS === 'ios' ? (
-        <BlurView style={{ flex: 1 }} blurType="light" />
-      ) : (
-        <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
-      ),
+        Platform.OS === 'ios' ? (
+          <BlurView
+            style={{ flex: 1 }}
+            blurType={theme === 'light' ? 'light' : 'dark'}
+          />
+        ) : (
+          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
+        ),
       headerStyle: {
-        borderBottomColor: '#A7A7AA',
+        borderBottomColor: theme === 'light' ? '#A7A7AA' : 'transparent',
         borderBottomWidth: StyleSheet.hairlineWidth,
       },
       headerTransparent: true,
-    },
+    }),
     headerTransitionPreset: 'uikit',
     // You can leave this out if you don't want the card shadow to
     // be visible through the header
-    transitionConfig: () =>
-      ({
-        headerBackgroundInterpolator:
-          HeaderStyleInterpolator.forBackgroundWithTranslation,
-      } as TransitionConfig),
+    transitionConfig: () => ({
+      headerBackgroundInterpolator:
+        HeaderStyleInterpolator.forBackgroundWithTranslation,
+    }),
   }
 );
 

example/src/StacksAndKeys.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StatusBar, Text, View } from 'react-native';
-import { createStackNavigator, NavigationScreenProp } from 'react-navigation';
-import { NavigationState } from 'react-navigation';
+import { NavigationScreenProp, NavigationState } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {

example/src/StacksInTabs.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { StatusBar, Text } from 'react-native';
 import {
-  createBottomTabNavigator,
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
   ScrollView,
 } from 'react-navigation';
-
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { Ionicons } from '@expo/vector-icons';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 

example/src/StacksOverTabs.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createBottomTabNavigator,
-  createStackNavigator,
   getActiveChildNavigationOptions,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 

example/src/StacksOverTopTabs.tsx

@@ -7,13 +7,15 @@ import {
   View,
 } from 'react-native';
 import {
-  createMaterialTopTabNavigator,
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { MaterialTopTabBar } from 'react-navigation-tabs';
+import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';

example/src/SwitchWithStacks.tsx

@@ -7,7 +7,8 @@ import {
   View,
   Platform,
 } from 'react-native';
-import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
+import { createSwitchNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 class SignInScreen extends React.Component<any, any> {
@@ -54,7 +55,12 @@ class HomeScreen extends React.Component<any, any> {
   };
 
   signOutAsync = async () => {
-    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }
@@ -74,7 +80,12 @@ class OtherScreen extends React.Component<any, any> {
   }
 
   signOutAsync = async () => {
-    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }

example/src/TabsInDrawer.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Platform, ScrollView } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { createDrawerNavigator } from 'react-navigation';
+import { MaterialIcons } from '@expo/vector-icons';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';
 

example/src/commonComponents/Button.tsx

@@ -1,42 +1,49 @@
 import React from 'react';
-import { AccessibilityState, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  AccessibilityStates,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 export interface ButtonProps {
   /**
    * Text to display inside the button
    */
-  title: string,
+  title: string;
 
   /**
    * Handler to be called when the user taps the button
    */
-  onPress: (event?: any) => void,
+  onPress: (event?: any) => void;
 
   /**
    * Color of the text (iOS), or background color of the button (Android)
    */
-  color?: string,
+  color?: string;
 
   /**
    * TV preferred focus (see documentation for the View component).
    */
-  hasTVPreferredFocus?: boolean,
+  hasTVPreferredFocus?: boolean;
 
   /**
    * Text to display for blindness accessibility features
    */
-  accessibilityLabel?: string,
+  accessibilityLabel?: string;
 
   /**
    * If true, disable all interactions for this component.
    */
-  disabled?: boolean,
+  disabled?: boolean;
 
   /**
    * Used to locate this view in end-to-end tests.
    */
-  testID?: string,
-};
+  testID?: string;
+}
 
 /**
  * A basic button component that should render nicely on any platform. Supports
@@ -81,7 +88,7 @@ export default class Button extends React.Component<ButtonProps> {
         buttonStyles.push({ backgroundColor: color });
       }
     }
-    const accessibilityStates: AccessibilityState[] = [];
+    const accessibilityStates: AccessibilityStates[] = [];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
@@ -99,9 +106,7 @@ export default class Button extends React.Component<ButtonProps> {
         onPress={onPress}
       >
         <View style={buttonStyles}>
-          <Text style={textStyles}>
-            {formattedTitle}
-          </Text>
+          <Text style={textStyles}>{formattedTitle}</Text>
         </View>
       </TouchableOpacity>
     );

example/src/commonComponents/ButtonWithMargin.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import BaseButton, { ButtonProps } from './Button';
 
 export const Button = (props: ButtonProps) => (

example/src/commonComponents/HeaderButtons.tsx

@@ -1,9 +1,11 @@
-import DefaultHeaderButtons from 'react-navigation-header-buttons';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import {
+  HeaderButtons as DefaultHeaderButtons,
+  Item,
+} from 'react-navigation-header-buttons';
 
 export class HeaderButtons extends React.PureComponent {
-  static Item = DefaultHeaderButtons.Item;
+  static Item = Item;
 
   render() {
     return (

examples/NavigationPlayground/.gitattributes

@@ -1 +0,0 @@
-*.pbxproj -text

examples/NavigationPlayground/.gitignore

@@ -1,63 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# 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/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# Visual Studio Code
-#
-.vscode/
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
-
-# Exponent
-.expo/*

examples/NavigationPlayground/README.md

@@ -1,14 +0,0 @@
-# Navigation Playground Example
-
-The NavigationPlayground example app includes a variety of patterns and is used as a simple way for contributors to manually integration test changes.
-
-## Usage
-
-```bash
-yarn # in the react-navigation root directory
-cd examples/NavigationPlayground
-yarn
-yarn start
-```
-
-You can view this example application directly on Android phones by visiting scanning the QR code on [this site](https://exp.host/@react-navigation/NavigationPlayground) with the [Expo app](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en).

examples/NavigationPlayground/app.json

@@ -1,29 +0,0 @@
-{
-  "expo": {
-    "name": "NavigationPlayground",
-    "slug": "NavigationPlayground",
-    "privacy": "public",
-    "sdkVersion": "32.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./src/assets/icon.png",
-    "splash": {
-      "image": "./src/assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    }
-  }
-}

examples/NavigationPlayground/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};

examples/NavigationPlayground/package.json

@@ -1,74 +0,0 @@
-{
-  "name": "NavigationPlayground",
-  "version": "0.1.0",
-  "private": true,
-  "main": "./node_modules/expo/AppEntry.js",
-  "scripts": {
-    "postinstall": "patch-package && rm -rf node_modules/react-navigation/node_modules/react-native && rm -rf node_modules/react-navigation/node_modules/@types && rm -rf node_modules/react-navigation/node_modules/examples && rm -rf node_modules/react-navigation/node_modules/react-native-gesture-handler && rm -rf node_modules/react-navigation/node_modules/react",
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "eject": "expo eject",
-    "test": "jest && tsc",
-    "tsc": "tsc",
-    "release": "release-it"
-  },
-  "dependencies": {
-    "expo": "^32.0.0",
-    "patch-package": "^6.0.5",
-    "postinstall-postinstall": "^2.0.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-blur": "^3.2.2",
-    "react-native-gesture-handler": "^1.1.0",
-    "react-native-iphone-x-helper": "^1.2.0",
-    "react-native-vector-icons": "^6.1.0",
-    "react-navigation": "file:../..",
-    "react-navigation-header-buttons": "^2.1.1"
-  },
-  "devDependencies": {
-    "@types/jest": "23.3.10",
-    "@types/react-native": "~0.57.38",
-    "@types/react-native-vector-icons": "^4.6.4",
-    "@types/react-test-renderer": "16.0.3",
-    "babel-jest": "23.6.0",
-    "jest": "23.6.0",
-    "metro-react-native-babel-preset": "0.50.0",
-    "react-test-renderer": "16.6.1",
-    "ts-jest": "^23.10.4",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.16.0",
-    "tslint-react": "^3.6.0",
-    "typescript": "3.2.1"
-  },
-  "jest": {
-    "preset": "react-native",
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "tsconfig.jest.json"
-      }
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "setupFiles": [
-      "./tests/setup.js"
-    ]
-  },
-  "resolutions": {
-    "react-native-gesture-handler": "^1.1.0"
-  }
-}

examples/NavigationPlayground/patches/react-native-gesture-handler+1.1.0.patch

@@ -1,59 +0,0 @@
-diff --git a/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts b/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-index 7a1332b..6328045 100644
---- a/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-+++ b/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-@@ -7,11 +7,9 @@ declare module 'react-native-gesture-handler' {
-     Animated,
-     FlatListProperties,
-     ScrollViewProperties,
--    SliderProperties,
-     SwitchProperties,
-     TextInputProperties,
-     ToolbarAndroidProperties,
--    ViewPagerAndroidProperties,
-     DrawerLayoutAndroidProperties,
-     TouchableHighlightProperties,
-     TouchableOpacityProperties,
-@@ -409,10 +407,6 @@ declare module 'react-native-gesture-handler' {
-     NativeViewGestureHandlerProperties & ScrollViewProperties
-   > {}
- 
--  export class Slider extends React.Component<
--    NativeViewGestureHandlerProperties & SliderProperties
--  > {}
--
-   export class Switch extends React.Component<
-     NativeViewGestureHandlerProperties & SwitchProperties
-   > {}
-@@ -425,10 +419,6 @@ declare module 'react-native-gesture-handler' {
-     NativeViewGestureHandlerProperties & ToolbarAndroidProperties
-   > {}
- 
--  export class ViewPagerAndroid extends React.Component<
--    NativeViewGestureHandlerProperties & ViewPagerAndroidProperties
--  > {}
--
-   export class DrawerLayoutAndroid extends React.Component<
-     NativeViewGestureHandlerProperties & DrawerLayoutAndroidProperties
-   > {}
-@@ -443,6 +433,11 @@ declare module 'react-native-gesture-handler' {
-     Component: React.ComponentType<any>,
-     containerStyles?: StyleProp<ViewStyle>
-   ): React.ComponentType<any>;
-+
-+  export function createNativeWrapper(
-+    Component: React.ComponentType<any>,
-+    config: NativeViewGestureHandlerProperties
-+  ): React.ComponentType<any>;
- }
- 
- declare module 'react-native-gesture-handler/Swipeable' {
-@@ -482,7 +477,7 @@ declare module 'react-native-gesture-handler/Swipeable' {
- }
- 
- declare module 'react-native-gesture-handler/DrawerLayout' {
--  import { Animated, StatusBarAnimation } from 'react-native';
-+  import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
- 
-   interface DrawerLayoutProperties {
-     renderNavigationView: (

examples/NavigationPlayground/prettier.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  trailingComma: 'es5',
-  singleQuote: true,
-};

examples/NavigationPlayground/tests/setup.js

@@ -1,46 +0,0 @@
-import { NativeModules } from 'react-native';
-
-NativeModules.ReactLocalization = {
-  language: 'en',
-};
-
-// TODO: remove these mocks!
-jest.mock('react-native-gesture-handler', () => {
-  const View = require('react-native/Libraries/Components/View/View');
-  return {
-    Swipeable: View,
-    DrawerLayout: View,
-    State: {},
-    ScrollView: View,
-    Slider: View,
-    Switch: View,
-    TextInput: View,
-    ToolbarAndroid: View,
-    ViewPagerAndroid: View,
-    DrawerLayoutAndroid: View,
-    WebView: View,
-    NativeViewGestureHandler: View,
-    TapGestureHandler: View,
-    FlingGestureHandler: View,
-    ForceTouchGestureHandler: View,
-    LongPressGestureHandler: View,
-    PanGestureHandler: View,
-    PinchGestureHandler: View,
-    RotationGestureHandler: View,
-    /* Buttons */
-    RawButton: View,
-    BaseButton: View,
-    RectButton: View,
-    BorderlessButton: View,
-    /* Other */
-    FlatList: View,
-    gestureHandlerRootHOC: jest.fn(),
-    Directions: {},
-  };
-});
-
-jest.mock('react-native-gesture-handler/DrawerLayout', () => {
-  return {
-    Directions: null,
-  };
-});

examples/NavigationPlayground/tsconfig.jest.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "jsx": "react",
-    "module": "commonjs"
-  }
-}

examples/NavigationPlayground/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "jsx": "react-native",
-    "lib": ["es6"],
-    "moduleResolution": "node",
-    "noEmit": true,
-    "strict": true,
-    "target": "esnext"
-  },
-  "exclude": ["node_modules"]
-}

examples/NavigationPlayground/tslint.json

@@ -1,11 +0,0 @@
-{
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
-  "rules": {
-    "jsx-no-lambda": false,
-    "member-access": false,
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "no-console": false,
-    "object-literal-sort-keys": false
-  }
-}

examples/NavigationPlayground/types/react-navigation-tabs.d.ts

@@ -1,9 +0,0 @@
-declare module 'react-navigation-tabs' {
-  import * as React from 'react';
-
-  interface MaterialTopbarProperties {
-    // it actually has some properties but yolo
-  }
-  export class MaterialTopTabBar extends React.Component<MaterialTopbarProperties> {}
-
-}

flow/react-navigation.js

@@ -775,7 +775,7 @@ declare module 'react-navigation' {
     // How to animate position and opacity of the screen
     // based on the value generated by the transitionSpec
     screenInterpolator?: (props: NavigationSceneRendererProps) => {},
-    // How to animate position and opacity of the header componetns
+    // How to animate position and opacity of the header components
     // based on the value generated by the transitionSpec
     headerLeftInterpolator?: (props: NavigationSceneRendererProps) => {},
     headerTitleInterpolator?: (props: NavigationSceneRendererProps) => {},
@@ -1303,4 +1303,8 @@ declare module 'react-navigation' {
     navigation: NavigationScreenProp<State>,
     screenProps?: {}
   ): Options;
+
+  declare export var NavigationContext: React$Context<{}>;
+
+  declare export var ScrollView: React$ComponentType<{}>;
 }

jest-setup.js

@@ -1,7 +1,4 @@
-/**
- * @flow
- * eslint-env jest
- */
+/* eslint-env jest */
 
 import React from 'react';
 
@@ -11,9 +8,7 @@ jest.mock('Linking', () => ({
   removeEventListener: jest.fn(),
   openURL: jest.fn(),
   canOpenURL: jest.fn(),
-  getInitialURL: jest
-    .fn()
-    .mockImplementation((value: string) => Promise.resolve(value)),
+  getInitialURL: jest.fn().mockImplementation(value => Promise.resolve(value)),
 }));
 
 // See https://github.com/facebook/react-native/issues/11659

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "3.11.1",
+  "version": "4.0.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -8,19 +8,14 @@
     "url": "git@github.com:react-navigation/react-navigation.git",
     "type": "git"
   },
-  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>, Brent Vatne <brent@expo.io>",
-  "license": "BSD-2-Clause",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>, Brent Vatne <brent@expo.io>, Satyajit Sahoo <satyajit.happy@gmail.com>",
+  "license": "MIT",
   "scripts": {
-    "start": "npm run ios",
-    "ios": "cd examples/NavigationPlayground && yarn && yarn ios",
-    "android": "cd examples/NavigationPlayground && yarn && yarn android",
-    "test": "npm run lint && npm run jest",
-    "codecov": "codecov",
-    "jest": "jest",
-    "test-update-snapshot": "jest --updateSnapshot",
-    "lint": "eslint .",
-    "format": "eslint --fix .",
-    "precommit": "lint-staged",
+    "bootstrap": "yarn example && yarn",
+    "example": "yarn --cwd example",
+    "test": "jest",
+    "lint": "eslint . --ext '.js,.ts,.tsx'",
+    "typescript": "tsc --noEmit",
     "release": "release-it"
   },
   "publishConfig": {
@@ -36,37 +31,28 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "~3.4.1",
-    "@react-navigation/native": "~3.5.0",
-    "react-navigation-drawer": "~1.2.1",
-    "react-navigation-stack": "~1.4.0",
-    "react-navigation-tabs": "~1.1.4"
+    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/native": "^3.6.2"
   },
   "devDependencies": {
-    "@types/react-native": "~0.57.38",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^22.4.1",
-    "babel-preset-react-native": "^2.1.0",
-    "codecov": "^2.2.0",
-    "eslint": "^4.2.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^7.1.0",
-    "husky": "^0.14.3",
-    "jest": "^24.5.0",
-    "jest-expo": "^25.1.0",
-    "lint-staged": "^4.2.1",
-    "prettier": "^1.12.1",
-    "prettier-eslint": "^8.8.1",
-    "react": "16.6.1",
-    "react-native": "~0.57.7",
-    "react-native-vector-icons": "^4.2.0",
-    "react-test-renderer": "^16.0.0",
-    "release-it": "^7.6.1"
+    "@commitlint/config-conventional": "^8.0.0",
+    "@release-it/conventional-changelog": "^1.1.0",
+    "@types/jest": "^24.0.18",
+    "@types/react": "^16.9.2",
+    "@types/react-native": "^0.60.9",
+    "codecov": "^3.5.0",
+    "commitlint": "^8.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-satya164": "^2.4.1",
+    "eslint-plugin-react-native-globals": "^0.1.0",
+    "husky": "^3.0.0",
+    "jest": "^24.9.0",
+    "prettier": "^1.18.2",
+    "react": "16.8.3",
+    "react-native": "~0.59.8",
+    "react-test-renderer": "16.8.3",
+    "release-it": "^12.3.6",
+    "typescript": "^3.6.2"
   },
   "jest": {
     "notify": true,
@@ -90,17 +76,20 @@
       "\\.png$": "<rootDir>/assetsTransformer.js"
     },
     "modulePathIgnorePatterns": [
-      "<rootDir>/examples/"
+      "<rootDir>/example/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
     ]
   },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write flow/react-navigation.js",
-      "git add"
-    ]
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn typescript && yarn lint && yarn test",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
   }
 }

prettier.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 module.exports = {
   trailingComma: 'es5',
   singleQuote: true,

scripts/build-push-docker.sh

@@ -1,6 +0,0 @@
-#!/bin/bash
-
-set -eo pipefail
-
-docker build -t reactcommunity/node-ci:8.4.0-0 -f ./ci.Dockerfile .
-docker push reactcommunity/node-ci:8.4.0-0

scripts/ci.Dockerfile

@@ -1,19 +0,0 @@
-FROM node:8.4.0
-
-RUN apt-get update -y && \
-    apt-get install -y ocaml libelf1 && \
-    rm -rf /var/lib/apt/lists/* && \
-    curl -o- -L https://yarnpkg.com/install.sh | bash && \
-    yarn global add exp
-    
-RUN git clone https://github.com/facebook/watchman.git \
-    && cd watchman \
-    && git checkout v4.7.0 \
-    && apt-get update -y \
-    && apt-get install -y autoconf automake build-essential python-dev \
-    && ./autogen.sh \
-    && ./configure \
-    && make \
-    && make install \
-    && apt-get remove --purge -y autoconf automake build-essential python-dev \
-    && rm -rf /var/lib/apt/lists/*

scripts/test.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-set -eo pipefail
-
-case $CIRCLE_NODE_INDEX in
-  0) yarn test && yarn codecov ;;
-esac

src/deprecations.js

@@ -0,0 +1,158 @@
+/* eslint-disable getter-return, import/no-commonjs */
+
+const throwError = (message, page) => {
+  throw new Error(
+    `${message}. See https://reactnavigation.org/docs/4.x/${page}.html for more details.`
+  );
+};
+
+module.exports = {
+  get createNavigationContainer() {
+    throw new Error(
+      '`createNavigationContainer()` has been removed. Use `createAppContainer()` instead. You can also import createAppContainer directly from `@react-navigation/native`.'
+    );
+  },
+
+  get createStackNavigator() {
+    throwError(
+      '`createStackNavigator()` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get createBottomTabNavigator() {
+    throwError(
+      '`createBottomTabNavigator()` has been moved to `react-navigation-tabs`',
+      'bottom-tab-navigator'
+    );
+  },
+
+  get createMaterialTopTabNavigator() {
+    throwError(
+      '`createMaterialTopTabNavigator()` has been moved to `react-navigation-tabs`',
+      'material-top-tab-navigator'
+    );
+  },
+
+  get createDrawerNavigator() {
+    throwError(
+      '`createDrawerNavigator()` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  // Gesture contexts
+
+  get StackGestureContext() {
+    throwError(
+      '`StackGestureContext` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get DrawerGestureContext() {
+    throwError(
+      '`DrawerGestureContext` has been moved to `react-navigation-drawe`',
+      'stack-navigator'
+    );
+  },
+
+  // Routers and Actions
+
+  get DrawerRouter() {
+    throwError(
+      '`DrawerRouter` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  get DrawerActions() {
+    throwError(
+      '`DrawerActions` has been moved to `react-navigation-drawe`',
+      'drawer-navigator'
+    );
+  },
+
+  // Views
+  get Transitioner() {
+    throwError('`Transitioner` has been removed.', 'stack-navigator');
+  },
+
+  get StackView() {
+    throwError('`StackView` has been removed', 'stack-navigator');
+  },
+
+  get StackViewCard() {
+    throwError('`StackViewCard` has been removed', 'stack-navigator');
+  },
+
+  get StackViewTransitionConfigs() {
+    throwError(
+      '`StackViewTransitionConfigs` has been removed',
+      'stack-navigator'
+    );
+  },
+
+  // Header
+  get Header() {
+    throwError(
+      '`Header` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderTitle() {
+    throwError(
+      '`HeaderTitle` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderBackButton() {
+    throwError(
+      '`HeaderBackButton` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderStyleInterpolator() {
+    throwError('`HeaderStyleInterpolator` has been removed', 'stack-navigator');
+  },
+
+  // DrawerView
+  get DrawerView() {
+    throwError(
+      '`createStackNavigator()` has been moved to `react-navigation-drawer`',
+      'stack-navigator'
+    );
+  },
+
+  get DrawerItems() {
+    throwError(
+      '`DrawerItems` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  get DrawerSidebar() {
+    throwError(
+      '`DrawerSidebar` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  // Tabs
+  get BottomTabBar() {
+    throwError(
+      '`BottomTabBar` has been moved to `react-navigation-tabs`',
+      'bottom-tab-navigator'
+    );
+  },
+
+  get MaterialTopTabBar() {
+    throwError(
+      '`MaterialTopTabBar` has been moved to `react-navigation-tabs`',
+      'material-top-tab-navigator'
+    );
+  },
+};

src/react-navigation.js

@@ -1,194 +1,4 @@
-/* eslint global-require: 0 */
+export * from '@react-navigation/core';
+export * from '@react-navigation/native';
 
-module.exports = {
-  // Native
-  get createAppContainer() {
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createNavigationContainer() {
-    console.warn(
-      '`createNavigationContainer()` has been deprecated, please use `createAppContainer()` instead. You can also import createAppContainer directly from @react-navigation/native'
-    );
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createKeyboardAwareNavigator() {
-    return require('@react-navigation/native').createKeyboardAwareNavigator;
-  },
-  get createNavigationAwareScrollable() {
-    return require('@react-navigation/native').createNavigationAwareScrollable;
-  },
-  get ScrollView() {
-    return require('@react-navigation/native').ScrollView;
-  },
-  get FlatList() {
-    return require('@react-navigation/native').FlatList;
-  },
-  get SectionList() {
-    return require('@react-navigation/native').SectionList;
-  },
-  get ResourceSavingSceneView() {
-    return require('@react-navigation/native').ResourceSavingSceneView;
-  },
-  get SafeAreaView() {
-    return require('@react-navigation/native').SafeAreaView;
-  },
-  get withOrientation() {
-    return require('@react-navigation/native').withOrientation;
-  },
-
-  // Core
-  get createNavigator() {
-    return require('@react-navigation/core').createNavigator;
-  },
-  get StateUtils() {
-    return require('@react-navigation/core').StateUtils;
-  },
-  get getNavigation() {
-    return require('@react-navigation/core').getNavigation;
-  },
-  get NavigationContext() {
-    return require('@react-navigation/core').NavigationContext;
-  },
-  get NavigationProvider() {
-    return require('@react-navigation/core').NavigationProvider;
-  },
-  get NavigationConsumer() {
-    return require('@react-navigation/core').NavigationConsumer;
-  },
-  get NavigationActions() {
-    return require('@react-navigation/core').NavigationActions;
-  },
-  get StackActions() {
-    return require('@react-navigation/core').StackActions;
-  },
-  get StackRouter() {
-    return require('@react-navigation/core').StackRouter;
-  },
-  get TabRouter() {
-    return require('@react-navigation/core').TabRouter;
-  },
-  get SwitchRouter() {
-    return require('@react-navigation/core').SwitchRouter;
-  },
-  get SwitchActions() {
-    return require('@react-navigation/core').SwitchActions;
-  },
-  get createConfigGetter() {
-    return require('@react-navigation/core').StackAcreateConfigGetterctions;
-  },
-  get getScreenForRouteName() {
-    return require('@react-navigation/core').getScreenForRouteName;
-  },
-  get validateRouteConfigMap() {
-    return require('@react-navigation/core').validateRouteConfigMap;
-  },
-  get getActiveChildNavigationOptions() {
-    return require('@react-navigation/core').getActiveChildNavigationOptions;
-  },
-  get pathUtils() {
-    return require('@react-navigation/core').pathUtils;
-  },
-  get SceneView() {
-    return require('@react-navigation/core').SceneView;
-  },
-  get SwitchView() {
-    return require('@react-navigation/core').SwitchView;
-  },
-  get NavigationEvents() {
-    return require('@react-navigation/core').NavigationEvents;
-  },
-  get withNavigation() {
-    return require('@react-navigation/core').withNavigation;
-  },
-  get withNavigationFocus() {
-    return require('@react-navigation/core').withNavigationFocus;
-  },
-
-  // Navigators
-
-  get createStackNavigator() {
-    return require('react-navigation-stack').createStackNavigator;
-  },
-  get createSwitchNavigator() {
-    return require('@react-navigation/core').createSwitchNavigator;
-  },
-
-  get createBottomTabNavigator() {
-    return require('react-navigation-tabs').createBottomTabNavigator;
-  },
-  get createMaterialTopTabNavigator() {
-    return require('react-navigation-tabs').createMaterialTopTabNavigator;
-  },
-
-  get createDrawerNavigator() {
-    return require('react-navigation-drawer').createDrawerNavigator;
-  },
-
-  // Gesture contexts
-
-  get StackGestureContext() {
-    return require('react-navigation-stack').StackGestureContext;
-  },
-  get DrawerGestureContext() {
-    return require('react-navigation-drawer').DrawerGestureContext;
-  },
-
-  // Routers and Actions
-
-  get DrawerRouter() {
-    return require('react-navigation-drawer').DrawerRouter;
-  },
-  get DrawerActions() {
-    return require('react-navigation-drawer').DrawerActions;
-  },
-
-  // Views
-  get Transitioner() {
-    console.warn(
-      'Importing the stack Transitioner directly from react-navigation is now deprecated. Instead, import { Transitioner } from "react-navigation-stack";'
-    );
-    return require('react-navigation-stack').Transitioner;
-  },
-  get StackView() {
-    return require('react-navigation-stack').StackView;
-  },
-  get StackViewCard() {
-    return require('react-navigation-stack').StackViewCard;
-  },
-  get StackViewTransitionConfigs() {
-    return require('react-navigation-stack').StackViewTransitionConfigs;
-  },
-
-  // Header
-  get Header() {
-    return require('react-navigation-stack').Header;
-  },
-  get HeaderTitle() {
-    return require('react-navigation-stack').HeaderTitle;
-  },
-  get HeaderBackButton() {
-    return require('react-navigation-stack').HeaderBackButton;
-  },
-  get HeaderStyleInterpolator() {
-    return require('react-navigation-stack').HeaderStyleInterpolator;
-  },
-
-  // DrawerView
-  get DrawerView() {
-    return require('react-navigation-drawer').DrawerView;
-  },
-  get DrawerItems() {
-    return require('react-navigation-drawer').DrawerNavigatorItems;
-  },
-  get DrawerSidebar() {
-    return require('react-navigation-drawer').DrawerSidebar;
-  },
-
-  // Tabs
-  get BottomTabBar() {
-    return require('react-navigation-tabs').BottomTabBar;
-  },
-  get MaterialTopTabBar() {
-    return require('react-navigation-tabs').MaterialTopTabBar;
-  },
-};
+export * from './deprecations';

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "react-navigation": ["../src/index"]
+    },
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  }
+}

typescript/react-navigation.d.ts

@@ -37,6 +37,9 @@ declare module 'react-navigation' {
 
   import {
     Animated,
+    Text,
+    TextInput,
+    StatusBar,
     TextStyle,
     ViewProps,
     ViewStyle,
@@ -47,25 +50,6 @@ declare module 'react-navigation' {
   // @todo: should we re-export from RNGH? not currently exposed through it
   export { FlatList, SectionList, ScrollView } from 'react-native';
 
-  // @todo: improve this type! not super important as it's not commonly used
-  type HeaderStyleInterpolatorFunction = (props: any) => any;
-
-  type HeaderStyleInterpolatorStatic = {
-    forLayout: HeaderStyleInterpolatorFunction;
-    forLeft: HeaderStyleInterpolatorFunction;
-    forLeftButton: HeaderStyleInterpolatorFunction;
-    forLeftLabel: HeaderStyleInterpolatorFunction;
-    forCenterFromLeft: HeaderStyleInterpolatorFunction;
-    forCenter: HeaderStyleInterpolatorFunction;
-    forRight: HeaderStyleInterpolatorFunction;
-    forBackground: HeaderStyleInterpolatorFunction;
-    forBackgroundWithInactiveHidden: HeaderStyleInterpolatorFunction;
-    forBackgroundWithFade: HeaderStyleInterpolatorFunction;
-    forBackgroundWithTranslation: HeaderStyleInterpolatorFunction;
-  };
-
-  export const HeaderStyleInterpolator: HeaderStyleInterpolatorStatic;
-
   export type ScreenProps = {
     [key: string]: any;
   };
@@ -73,36 +57,14 @@ declare module 'react-navigation' {
   // @todo - any..
   export function getActiveChildNavigationOptions<S>(
     navigation: NavigationProp<S>,
-    screenProps?: ScreenProps
+    screenProps?: ScreenProps,
+    theme?: SupportedThemes
   ): NavigationParams;
 
   // @todo when we split types into common, native and web,
   // we can properly change Animated.Value to its real value
   export type AnimatedValue = any;
 
-  export type HeaderMode = 'float' | 'screen' | 'none';
-
-  export interface HeaderForceInset {
-    horizontal?: string;
-    vertical?: string;
-    left?: string;
-    right?: string;
-    top?: string;
-    bottom?: string;
-  }
-
-  export interface HeaderProps extends NavigationSceneRendererProps {
-    mode: HeaderMode;
-    router: NavigationRouter<NavigationState, NavigationStackScreenOptions>;
-    getScreenDetails: (
-      navigationScene: NavigationScene
-    ) => NavigationScreenDetails<NavigationStackScreenOptions>;
-    leftInterpolator: (props: NavigationSceneRendererProps) => {};
-    titleInterpolator: (props: NavigationSceneRendererProps) => {};
-    rightInterpolator: (props: NavigationSceneRendererProps) => {};
-    style: StyleProp<ViewStyle>;
-  }
-
   /**
    * NavigationState is a tree of routes for a single navigator, where each child
    * route may either be a NavigationScreenRoute or a NavigationRouterRoute.
@@ -124,7 +86,7 @@ declare module 'react-navigation' {
     routes: NavigationRoute[];
     isTransitioning: boolean;
     key: string;
-    params: NavigationParams;
+    params: NavigationParams | undefined;
   }
 
   export interface DrawerNavigationState extends NavigationState {
@@ -176,7 +138,8 @@ declare module 'react-navigation' {
 
   export type NavigationScreenOptionsGetter<Options> = (
     navigation: NavigationScreenProp<NavigationRoute<any>>,
-    screenProps?: ScreenProps
+    screenProps: ScreenProps | null,
+    theme: SupportedThemes
   ) => Options;
 
   export interface NavigationRouter<State = NavigationState, Options = {}> {
@@ -238,6 +201,7 @@ declare module 'react-navigation' {
   export interface NavigationScreenConfigProps {
     navigation: NavigationScreenProp<NavigationRoute>;
     screenProps: ScreenProps;
+    theme: SupportedThemes;
   }
 
   export type NavigationScreenConfig<Options> =
@@ -425,31 +389,6 @@ declare module 'react-navigation' {
     type: 'Navigation/TOGGLE_DRAWER';
   }
 
-  export interface NavigationStackViewConfig {
-    mode?: 'card' | 'modal';
-    headerMode?: HeaderMode;
-    headerBackTitleVisible?: boolean;
-    headerTransitionPreset?: 'fade-in-place' | 'uikit';
-    headerLayoutPreset?: 'left' | 'center';
-    cardShadowEnabled?: boolean;
-    cardOverlayEnabled?: boolean;
-    cardStyle?: StyleProp<ViewStyle>;
-    transparentCard?: boolean;
-    transitionConfig?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps: NavigationTransitionProps,
-      isModal: boolean
-    ) => TransitionConfig;
-    onTransitionStart?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => Promise<void> | void;
-    onTransitionEnd?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => void;
-  }
-
   /**
    * Switch Navigator
    */
@@ -466,48 +405,6 @@ declare module 'react-navigation' {
     resetOnBlur?: boolean; // defaults to `true`
   }
 
-  export interface NavigationStackScreenOptions {
-    title?: string;
-    header?:
-      | React.ReactElement<any>
-      | ((headerProps: HeaderProps) => React.ReactElement<any>)
-      | null;
-    headerTransparent?: boolean;
-    headerTitle?: string | React.ReactElement<any>;
-    headerTitleStyle?: StyleProp<TextStyle>;
-    headerTitleAllowFontScaling?: boolean;
-    headerTitleContainerStyle?: StyleProp<TextStyle>;
-    headerTintColor?: string;
-    headerLeft?:
-      | React.ReactElement<any>
-      | ((backButtonProps: HeaderBackButtonProps) => React.ReactElement<any>)
-      | null;
-    headerBackTitle?: string | null;
-    headerBackImage?: React.ReactElement<any>;
-    headerTruncatedBackTitle?: string;
-    headerBackTitleStyle?: StyleProp<TextStyle>;
-    headerPressColorAndroid?: string;
-    headerRight?: React.ReactElement<any> | null;
-    headerStyle?: StyleProp<ViewStyle>;
-    headerLeftContainerStyle?: StyleProp<ViewStyle>;
-    headerRightContainerStyle?: StyleProp<ViewStyle>;
-    headerForceInset?: HeaderForceInset;
-    headerBackground?: React.ReactNode | React.ReactType;
-    headerBackgroundTransitionPreset?: 'toggle' | 'fade' | 'translate';
-    gesturesEnabled?: boolean;
-    gestureResponseDistance?: { vertical?: number; horizontal?: number };
-    gestureDirection?: 'default' | 'inverted';
-  }
-
-  export interface NavigationStackRouterConfig {
-    headerTransitionPreset?: 'fade-in-place' | 'uikit';
-    initialRouteName?: string;
-    initialRouteParams?: NavigationParams;
-    paths?: NavigationPathsConfig;
-    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    initialRouteKey?: string;
-  }
 
   export type NavigationStackAction =
     | NavigationInitAction
@@ -531,11 +428,14 @@ declare module 'react-navigation' {
     | NavigationCloseDrawerAction
     | NavigationToggleDrawerAction;
 
+  export type NavigationSwitchAction = NavigationJumpToAction;
+
   export type NavigationAction =
     | NavigationInitAction
     | NavigationStackAction
     | NavigationTabAction
-    | NavigationDrawerAction;
+    | NavigationDrawerAction
+    | NavigationSwitchAction;
 
   export type NavigationRouteConfig =
     | NavigationComponent
@@ -578,88 +478,6 @@ declare module 'react-navigation' {
     >;
     navigationOptions?: NavigationScreenConfig<any>;
   }
-  export interface TabScene {
-    route: NavigationRoute;
-    focused: boolean;
-    index: number;
-    tintColor?: string;
-  }
-
-  export interface TabBarIconProps {
-    tintColor: string | null;
-    focused: boolean;
-    horizontal: boolean;
-  }
-
-  export interface TabBarLabelProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  // tslint:disable-next-line:strict-export-declare-modifiers
-  interface NavigationTabScreenOptionsBase {
-    title?: string;
-    tabBarIcon?:
-      | React.ReactElement<any>
-      | ((options: TabBarIconProps) => React.ReactElement<any> | null);
-    tabBarLabel?:
-      | string
-      | React.ReactElement<any>
-      | ((
-          options: TabBarLabelProps
-        ) => React.ReactElement<any> | string | null);
-    tabBarVisible?: boolean;
-    tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string };
-  }
-  export interface NavigationTabScreenOptions
-    extends NavigationTabScreenOptionsBase {
-    swipeEnabled?: boolean;
-    tabBarOnPress?: (options: {
-      previousScene: TabScene;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    tabBarOnLongPress?: (options: {
-      previousScene: TabScene;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-  }
-  export interface NavigationBottomTabScreenOptions
-    extends NavigationTabScreenOptionsBase {
-    tabBarOnPress?: (options: {
-      navigation: NavigationScreenProp<NavigationRoute>;
-      defaultHandler: () => void;
-    }) => void;
-    tabBarOnLongPress?: (options: {
-      navigation: NavigationScreenProp<NavigationRoute>;
-      defaultHandler: () => void;
-    }) => void;
-  }
-
-  export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
-
-  export interface DrawerIconProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  export interface DrawerLabelProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  export interface NavigationDrawerScreenOptions {
-    title?: string;
-    drawerIcon?:
-      | React.ReactElement<any>
-      | ((options: DrawerIconProps) => React.ReactElement<any> | null);
-    drawerLabel?:
-      | string
-      | React.ReactElement<any>
-      | ((options: DrawerLabelProps) => React.ReactElement<any> | null);
-    drawerLockMode?: DrawerLockMode;
-  }
 
   export interface NavigationRouteConfigMap {
     [routeName: string]: NavigationRouteConfig;
@@ -760,147 +578,13 @@ declare module 'react-navigation' {
   }
 
   export interface NavigationNavigatorProps<O = {}, S = {}> {
+    theme?: SupportedThemes | 'no-preference';
     detached?: boolean;
     navigation?: NavigationProp<S>;
     screenProps?: ScreenProps;
     navigationOptions?: O;
   }
 
-  /**
-   * Gestures, Animations, and Interpolators
-   */
-
-  export type NavigationGestureDirection = 'horizontal' | 'vertical';
-
-  export interface NavigationLayout {
-    height: AnimatedValue;
-    initHeight: number;
-    initWidth: number;
-    isMeasured: boolean;
-    width: AnimatedValue;
-  }
-
-  export interface NavigationScene {
-    index: number;
-    isActive: boolean;
-    isStale: boolean;
-    key: string;
-    route: NavigationRoute;
-    descriptor: NavigationDescriptor;
-  }
-
-  export interface NavigationTransitionProps {
-    // The layout of the screen container
-    layout: NavigationLayout;
-
-    // The destination navigation state of the transition
-    navigation: NavigationScreenProp<NavigationState>;
-
-    // The progressive index of the transitioner's navigation state.
-    position: AnimatedValue;
-
-    // The value that represents the progress of the transition when navigation
-    // state changes from one to another. Its numberic value will range from 0
-    // to 1.
-    //  progress.__getAnimatedValue() < 1 : transtion is happening.
-    //  progress.__getAnimatedValue() == 1 : transtion completes.
-    progress: AnimatedValue;
-
-    // All the scenes of the transitioner.
-    scenes: NavigationScene[];
-
-    // The active scene, corresponding to the route at
-    // `navigation.state.routes[navigation.state.index]`. When rendering
-    // NavigationSceneRendererPropsIndex, the scene does not refer to the active
-    // scene, but instead the scene that is being rendered. The index always
-    // is the index of the scene
-    scene: NavigationScene;
-    index: number;
-
-    screenProps?: ScreenProps;
-  }
-
-  // The scene renderer props are nearly identical to the props used for rendering
-  // a transition. The exception is that the passed scene is not the active scene
-  // but is instead the scene that the renderer should render content for.
-  export type NavigationSceneRendererProps = NavigationTransitionProps;
-
-  export interface NavigationTransitionSpec {
-    duration?: number;
-    // An easing function from `Easing`.
-    easing?: (t: number) => number;
-    // A timing function such as `Animated.timing`.
-    timing?: (value: AnimatedValue, config: any) => any;
-    friction?: number;
-    tension?: number;
-    useNativeDriver?: boolean;
-  }
-
-  /**
-   * Describes a visual transition from one screen to another.
-   */
-  export interface TransitionConfig {
-    // The basics properties of the animation, such as duration and easing
-    transitionSpec?: NavigationTransitionSpec;
-    // How to animate position and opacity of the screen
-    // based on the value generated by the transitionSpec
-    screenInterpolator?: (props: NavigationSceneRendererProps) => any;
-    // How to animate position and opacity of the header componetns
-    // based on the value generated by the transitionSpec
-    headerLeftInterpolator?: (props: NavigationSceneRendererProps) => any;
-    headerTitleInterpolator?: (props: NavigationSceneRendererProps) => any;
-    headerRightInterpolator?: (props: NavigationSceneRendererProps) => any;
-    // The style of the container. Useful when a scene doesn't have
-    // 100% opacity and the underlying container is visible.
-    containerStyle?: StyleProp<ViewStyle>;
-  }
-
-  export type TransitionConfigurer = (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps: NavigationTransitionProps,
-    isModal: boolean
-  ) => TransitionConfig;
-
-  export interface StackViewTransitionConfigsType {
-    defaultTransitionConfig: TransitionConfigurer;
-    getTransitionConfig: (
-      transitionConfigurer: TransitionConfigurer,
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps: NavigationTransitionProps,
-      isModal: boolean
-    ) => TransitionConfig;
-    SlideFromRightIOS: TransitionConfig;
-    ModalSlideFromBottomIOS: TransitionConfig;
-    FadeInFromBottomAndroid: TransitionConfig;
-    FadeOutToBottomAndroid: TransitionConfig;
-    NoAnimation: TransitionConfig;
-  }
-
-  export const StackViewTransitionConfigs: StackViewTransitionConfigsType;
-
-  export type NavigationAnimationSetter = (
-    position: AnimatedValue,
-    newState: NavigationState,
-    lastState: NavigationState
-  ) => void;
-
-  export type NavigationSceneRenderer = () => React.ReactElement<any> | null;
-
-  export type NavigationStyleInterpolator = (
-    props: NavigationSceneRendererProps
-  ) => ViewStyle;
-
-  export interface LayoutEvent {
-    nativeEvent: {
-      layout: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      };
-    };
-  }
-
   export type NavigatorType =
     | 'react-navigation/STACK'
     | 'react-navigation/TABS'
@@ -957,17 +641,6 @@ declare module 'react-navigation' {
     state: { nav: NavigationState | null };
   }
 
-  export interface StackNavigatorConfig
-    extends NavigationStackViewConfig,
-      NavigationStackRouterConfig {
-    containerOptions?: any;
-  }
-
-  export function createStackNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    stackConfig?: StackNavigatorConfig
-  ): NavigationContainer;
-
   export interface SwitchNavigatorConfig {
     initialRouteName: string;
     resetOnBlur?: boolean;
@@ -983,208 +656,6 @@ declare module 'react-navigation' {
     switchConfig?: SwitchNavigatorConfig
   ): NavigationContainer;
 
-  // DrawerItems
-  export const DrawerItems: React.ComponentType<DrawerItemsProps>;
-
-  export interface DrawerItemsProps {
-    navigation: NavigationScreenProp<DrawerNavigationState>;
-    items: NavigationRoute[];
-    activeItemKey?: string;
-    activeTintColor?: string;
-    activeBackgroundColor?: string;
-    inactiveTintColor?: string;
-    inactiveBackgroundColor?: string;
-    getLabel: (scene: DrawerScene) => React.ReactNode | string;
-    renderIcon: (scene: DrawerScene) => React.ReactNode;
-    onItemPress: (info: DrawerItem) => void;
-    itemsContainerStyle?: StyleProp<ViewStyle>;
-    itemStyle?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    activeLabelStyle?: StyleProp<TextStyle>;
-    inactiveLabelStyle?: StyleProp<TextStyle>;
-    iconContainerStyle?: StyleProp<ViewStyle>;
-    drawerPosition: 'left' | 'right';
-  }
-  export interface DrawerScene {
-    route: NavigationRoute;
-    focused: boolean;
-    index: number;
-    tintColor?: string;
-  }
-  export interface DrawerItem {
-    route: NavigationRoute;
-    focused: boolean;
-  }
-
-  /**
-   * Drawer Navigator
-   */
-  export interface DrawerViewConfig {
-    drawerBackgroundColor?: string;
-    drawerWidth?: number;
-    drawerPosition?: 'left' | 'right';
-    contentComponent?: React.ComponentType<DrawerItemsProps>;
-    contentOptions?: any;
-    style?: StyleProp<ViewStyle>;
-  }
-  export interface DrawerNavigatorConfig
-    extends NavigationTabRouterConfig,
-      DrawerViewConfig {
-    containerConfig?: any;
-    contentOptions?: {
-      activeTintColor?: string;
-      activeBackgroundColor?: string;
-      inactiveTintColor?: string;
-      inactiveBackgroundColor?: string;
-      style?: StyleProp<ViewStyle>;
-      labelStyle?: StyleProp<TextStyle>;
-    };
-    drawerType?: 'front' | 'back' | 'slide';
-    drawerLockMode?: DrawerLockMode;
-    edgeWidth?: number;
-    hideStatusBar?: boolean;
-    overlayColor?: string;
-    unmountInactiveRoutes?: boolean;
-  }
-
-  export function DrawerNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawerConfig?: DrawerNavigatorConfig
-  ): NavigationContainer;
-
-  export function createDrawerNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawerConfig?: DrawerNavigatorConfig
-  ): NavigationContainer;
-
-  /**
-   * Tab Navigator
-   */
-
-  // From views/TabView/TabView.js
-  export interface TabViewConfig {
-    tabBarComponent?: React.ReactType;
-    tabBarPosition?: 'top' | 'bottom';
-    tabBarOptions?: {
-      activeTintColor?: string;
-      allowFontScaling?: boolean;
-      activeBackgroundColor?: string;
-      inactiveTintColor?: string;
-      inactiveBackgroundColor?: string;
-      showLabel?: boolean;
-      style?: StyleProp<ViewStyle>;
-      labelStyle?: StyleProp<TextStyle>;
-      iconStyle?: StyleProp<ViewStyle>;
-      // Top
-      showIcon?: boolean;
-      upperCaseLabel?: boolean;
-      pressColor?: string;
-      pressOpacity?: number;
-      scrollEnabled?: boolean;
-      tabStyle?: StyleProp<ViewStyle>;
-      indicatorStyle?: StyleProp<ViewStyle>;
-      keyboardHidesTabBar?: boolean;
-    };
-    swipeEnabled?: boolean;
-    animationEnabled?: boolean;
-    lazy?: boolean;
-  }
-
-  export interface InitialLayout {
-    height: number;
-    width: number;
-  }
-
-  // From navigators/TabNavigator.js
-  export interface TabNavigatorConfig
-    extends NavigationTabRouterConfig,
-      TabViewConfig {
-    lazy?: boolean;
-    removeClippedSubviews?: boolean;
-    initialLayout?: InitialLayout;
-  }
-  export interface BottomTabNavigatorConfig
-    extends NavigationBottomTabRouterConfig,
-      TabViewConfig {
-    lazy?: boolean;
-    removeClippedSubviews?: boolean;
-    initialLayout?: InitialLayout;
-  }
-
-  export function createBottomTabNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawConfig?: BottomTabNavigatorConfig
-  ): NavigationContainer;
-
-  export function createMaterialTopTabNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawConfig?: TabNavigatorConfig
-  ): NavigationContainer;
-
-  export interface MaterialTopTabBarProps {
-    activeTintColor: string;
-    inactiveTintColor: string;
-    indicatorStyle: StyleProp<ViewStyle>;
-    showIcon: boolean;
-    showLabel: boolean;
-    upperCaseLabel: boolean;
-    allowFontScaling: boolean;
-    position: AnimatedValue;
-    tabBarPosition: string;
-    navigation: NavigationScreenProp<NavigationState>;
-    jumpToIndex: (index: number) => void;
-    getLabelText: (scene: TabScene) => React.ReactNode | string;
-    getOnPress: (
-      previousScene: NavigationRoute,
-      scene: TabScene
-    ) => (args: {
-      previousScene: NavigationRoute;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    renderIcon: (scene: TabScene) => React.ReactElement<any>;
-    labelStyle?: TextStyle;
-    iconStyle?: ViewStyle;
-  }
-
-  export interface BottomTabBarProps {
-    activeTintColor: string;
-    activeBackgroundColor: string;
-    adaptive?: boolean;
-    inactiveTintColor: string;
-    inactiveBackgroundColor: string;
-    showLabel?: boolean;
-    allowFontScaling: boolean;
-    position: AnimatedValue;
-    navigation: NavigationScreenProp<NavigationState>;
-    jumpToIndex: (index: number) => void;
-    getLabelText: (scene: TabScene) => React.ReactNode | string;
-    getOnPress: (
-      previousScene: NavigationRoute,
-      scene: TabScene
-    ) => (args: {
-      previousScene: NavigationRoute;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    getTestIDProps: (scene: TabScene) => (scene: TabScene) => any;
-    renderIcon: (scene: TabScene) => React.ReactNode;
-    style?: ViewStyle;
-    animateStyle?: ViewStyle;
-    labelStyle?: TextStyle;
-    tabStyle?: ViewStyle;
-    showIcon?: boolean;
-    safeAreaInset?: {
-      top?: SafeAreaViewForceInsetValue;
-      bottom?: SafeAreaViewForceInsetValue;
-      left?: SafeAreaViewForceInsetValue;
-      right?: SafeAreaViewForceInsetValue;
-    };
-  }
-
-  export const MaterialTopTabBar: React.ComponentType<MaterialTopTabBarProps>;
-  export const BottomTabBar: React.ComponentType<BottomTabBarProps>;
-
   /**
    * NavigationActions
    */
@@ -1253,47 +724,11 @@ declare module 'react-navigation' {
   export namespace SwitchActions {
     const JUMP_TO: 'Navigation/JUMP_TO';
 
-    function jumpTo(options: NavigationJumpToActionPayload): NavigationJumpToAction;
+    function jumpTo(
+      options: NavigationJumpToActionPayload
+    ): NavigationJumpToAction;
   }
 
-  /**
-   * Transitioner
-   * @desc From react-navigation/src/views/Transitioner.js
-   */
-  export interface TransitionerProps {
-    configureTransition: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => NavigationTransitionSpec;
-    navigation: NavigationScreenProp<NavigationState>;
-    onTransitionStart?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => Promise<void> | void;
-    onTransitionEnd?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => void;
-    render: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => any;
-    descriptors?: { [key: string]: NavigationDescriptor };
-    style?: StyleProp<ViewStyle>;
-  }
-
-  export interface TransitionerState {
-    layout: NavigationLayout;
-    position: Animated.Value;
-    progress: Animated.Value;
-    scenes: NavigationScene[];
-  }
-
-  export class Transitioner extends React.Component<
-    TransitionerProps,
-    TransitionerState
-  > {}
-
   /**
    * Tab Router
    *
@@ -1314,6 +749,15 @@ declare module 'react-navigation' {
     config: NavigationTabRouterConfig
   ): NavigationRouter<any, any>;
 
+  export interface NavigationStackRouterConfig {
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+    navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+    initialRouteKey?: string;
+  }
+
   /**
    * Create Navigator
    *
@@ -1384,32 +828,6 @@ declare module 'react-navigation' {
    * END CUSTOM CONVENIENCE INTERFACES
    */
 
-  /*
-   * Header
-   */
-
-  // src/views/HeaderBackButton.js
-
-  export interface HeaderBackButtonProps {
-    onPress?: () => void;
-    pressColorAndroid?: string;
-    title?: string | null;
-    titleStyle?: StyleProp<TextStyle>;
-    tintColor?: string;
-    truncatedTitle?: string;
-    width?: number;
-    disabled?: boolean;
-    backTitleVisible?: boolean;
-  }
-
-  export const HeaderBackButton: React.ComponentClass<HeaderBackButtonProps>;
-  /**
-   * Header Component
-   */
-  export class Header extends React.Component<HeaderProps> {
-    static HEIGHT: number;
-  }
-
   export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
   export type InferProps<
@@ -1502,10 +920,6 @@ declare module 'react-navigation' {
   export const NavigationContext: React.Context<
     NavigationScreenProp<NavigationRoute>
   >;
-  export const StackGestureContext: React.Context<React.Ref<PanGestureHandler>>;
-  export const DrawerGestureContext: React.Context<
-    React.Ref<PanGestureHandler>
-  >;
 
   /**
    * SceneView
@@ -1518,4 +932,40 @@ declare module 'react-navigation' {
   }
 
   export class SceneView extends React.Component {}
+
+  /**
+   * Themes
+   */
+
+  // Context
+  export type SupportedThemes = 'light' | 'dark';
+  export const ThemeContext: React.Context<SupportedThemes>;
+
+  // Hooks
+  export function useTheme(): SupportedThemes;
+
+  // Colors
+  export interface Theme {
+    header: string;
+    headerBorder: string;
+    body: string;
+    bodyBorder: string;
+    bodyContent: string;
+    bodyContentBorder: string;
+    label: string;
+  }
+  export const ThemeColors: { [k in SupportedThemes]: Theme };
+
+  // Themed components
+  interface ThemedStatusBarProps
+    extends React.ComponentProps<typeof StatusBar> {}
+  interface ThemedTextProps extends React.ComponentProps<typeof Text> {}
+  interface ThemedTextInputProps
+    extends React.ComponentProps<typeof TextInput> {}
+
+  export namespace Themed {
+    export const StatusBar: React.ComponentType<ThemedStatusBarProps>;
+    export const Text: React.ComponentType<ThemedTextProps>;
+    export const TextInput: React.ComponentType<ThemedTextInputProps>;
+  }
 }

typings/react-navigation-tabs.d.ts

@@ -0,0 +1 @@
+declare module 'react-navigation-tabs';