chore: release 3.13.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;
```

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

examples/NavigationPlayground/.expo-shared/assets.json

@@ -0,0 +1,7 @@
+{
+  "2597acb02c2c2a7cf6627e6e3570f99612cb9e87847e685e6a60b5668e2799a0": true,
+  "5e5a970a20c69dd6ecd2e5c3db621effc6e7eba78c972a63dacd69e9e6734616": true,
+  "69ef6f9ec53cb7b1657de525c6c77f03fcecbe3607d4b6086995c73024a013fe": true,
+  "33e0eb31a7feec0d570d18432ac02c90520557ee17f021652be26b0a51fb9dcc": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

examples/NavigationPlayground/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 { 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: {
@@ -377,11 +436,16 @@ const styles = StyleSheet.create({
     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 +455,6 @@ const styles = StyleSheet.create({
     top: 0,
   },
   title: {
-    color: '#444',
     fontSize: 16,
     fontWeight: 'bold',
   },

examples/NavigationPlayground/app.json

@@ -1,9 +1,10 @@
 {
   "expo": {
-    "name": "NavigationPlayground",
+    "name": "React Navigation Playground",
+    "description": "Explore various patterns for navigation",
     "slug": "NavigationPlayground",
     "privacy": "public",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "33.0.0",
     "platforms": [
       "ios",
       "android"
@@ -23,7 +24,8 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "org.reactnavigation.playground"
     }
   }
 }

examples/NavigationPlayground/package.json

@@ -4,7 +4,7 @@
   "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",
+    "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 && rm -rf node_modules/react-navigation/examples",
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
@@ -14,12 +14,12 @@
     "release": "release-it"
   },
   "dependencies": {
-    "expo": "^32.0.0",
+    "expo": "^33.0.7",
+    "expo-blur": "~5.0.1",
     "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": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-gesture-handler": "^1.1.0",
     "react-native-iphone-x-helper": "^1.2.0",
     "react-native-vector-icons": "^6.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/src/CustomTabUI.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import {
+  Alert,
+  TouchableOpacity,
   LayoutAnimation,
   StatusBar,
   StyleSheet,
@@ -8,7 +10,10 @@ import {
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import {
+  MaterialTopTabBar,
+  Themed,
   createMaterialTopTabNavigator,
+  ThemeContext,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
@@ -42,7 +47,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 +58,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 +81,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,6 +92,21 @@ 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,
@@ -114,7 +134,7 @@ class FeaturedScreen extends React.Component<Props> {
     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 +145,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 +175,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>
     );

examples/NavigationPlayground/src/CustomTabs.tsx

@@ -6,9 +6,12 @@ import {
   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} />;
+};

examples/NavigationPlayground/src/Drawer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { ScrollView, StatusBar, StyleProp, TextStyle } from 'react-native';
+import { ScrollView, StyleProp, TextStyle } from 'react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {
   createDrawerNavigator,
   createStackNavigator,
+  Themed,
   SafeAreaView,
 } from 'react-navigation';
 import { NavigationScreenProp, NavigationState } from 'react-navigation';
@@ -27,7 +28,7 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.navigate('Index')} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 

examples/NavigationPlayground/src/ModalStack.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { ScrollView, StatusBar, Text } from 'react-native';
+import { ScrollView } from 'react-native';
 import {
   createStackNavigator,
   NavigationScreenProp,
+  Themed,
   SafeAreaView,
 } from 'react-navigation';
 import { NavigationState } from 'react-navigation';
@@ -45,7 +46,7 @@ const MyNavScreen = ({
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 

examples/NavigationPlayground/src/SampleText.tsx

@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react';
 import { StyleSheet, Text } 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;

examples/NavigationPlayground/src/SimpleStack.tsx

@@ -1,7 +1,6 @@
 // tslint:disable no-unused-expression
 
 import * as React from 'react';
-import { StatusBar } from 'react-native';
 import {
   createStackNavigator,
   NavigationActions,
@@ -12,6 +11,7 @@ import {
   NavigationStateRoute,
   SafeAreaView,
   StackActions,
+  Themed,
   withNavigation,
 } from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
@@ -93,7 +93,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Go back"
         />
         <Button onPress={() => dismiss()} title="Dismiss" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }

examples/NavigationPlayground/src/SimpleTabs.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Animated, Platform, StatusBar, Text, View } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import {
   createBottomTabNavigator,
@@ -7,6 +6,7 @@ import {
   NavigationEventSubscription,
   NavigationScreenProp,
   SafeAreaView,
+  Themed,
   ScrollView,
 } from 'react-navigation';
 import { NavigationEventPayload, NavigationState } from 'react-navigation';
@@ -37,11 +37,11 @@ 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>
 );
@@ -56,9 +56,9 @@ const MyListScreen = ({
     style={{ paddingTop: 10 }}
     keyExtractor={(item, 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>
     )}
   />
 );

examples/NavigationPlayground/src/StackWithCustomHeaderBackImage.tsx

@@ -1,9 +1,11 @@
 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 SampleText from './SampleText';
@@ -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: {},
 });

examples/NavigationPlayground/src/StackWithTranslucentHeader.tsx

@@ -1,21 +1,18 @@
 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,
+  NavigationScreenConfigProps,
   NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
+  Themed,
+  SupportedThemes,
   TransitionConfig,
 } from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
@@ -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,19 +226,22 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
       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

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<{}>;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "3.11.1",
+  "version": "3.13.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -36,11 +36,11 @@
     "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.1",
+    "@react-navigation/native": "~3.6.2",
+    "react-navigation-drawer": "~1.4.0",
+    "react-navigation-stack": "1.5.3",
+    "react-navigation-tabs": "~1.2.0"
   },
   "devDependencies": {
     "@types/react-native": "~0.57.38",

src/react-navigation.js

@@ -1,6 +1,20 @@
 /* eslint global-require: 0 */
 
 module.exports = {
+  // Themes
+  get useTheme() {
+    return require('@react-navigation/core').useTheme;
+  },
+  get ThemeContext() {
+    return require('@react-navigation/core').ThemeContext;
+  },
+  get ThemeColors() {
+    return require('@react-navigation/core').ThemeColors;
+  },
+  get Themed() {
+    return require('@react-navigation/native').Themed;
+  },
+
   // Native
   get createAppContainer() {
     return require('@react-navigation/native').createAppContainer;

typescript/react-navigation.d.ts

@@ -37,6 +37,9 @@ declare module 'react-navigation' {
 
   import {
     Animated,
+    Text,
+    TextInput,
+    StatusBar,
     TextStyle,
     ViewProps,
     ViewStyle,
@@ -73,7 +76,8 @@ 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,
@@ -124,7 +128,7 @@ declare module 'react-navigation' {
     routes: NavigationRoute[];
     isTransitioning: boolean;
     key: string;
-    params: NavigationParams;
+    params: NavigationParams | undefined;
   }
 
   export interface DrawerNavigationState extends NavigationState {
@@ -176,7 +180,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 +243,7 @@ declare module 'react-navigation' {
   export interface NavigationScreenConfigProps {
     navigation: NavigationScreenProp<NavigationRoute>;
     screenProps: ScreenProps;
+    theme: SupportedThemes;
   }
 
   export type NavigationScreenConfig<Options> =
@@ -531,11 +537,14 @@ declare module 'react-navigation' {
     | NavigationCloseDrawerAction
     | NavigationToggleDrawerAction;
 
+  export type NavigationSwitchAction = NavigationJumpToAction;
+
   export type NavigationAction =
     | NavigationInitAction
     | NavigationStackAction
     | NavigationTabAction
-    | NavigationDrawerAction;
+    | NavigationDrawerAction
+    | NavigationSwitchAction;
 
   export type NavigationRouteConfig =
     | NavigationComponent
@@ -760,6 +769,7 @@ declare module 'react-navigation' {
   }
 
   export interface NavigationNavigatorProps<O = {}, S = {}> {
+    theme?: SupportedThemes | 'no-preference';
     detached?: boolean;
     navigation?: NavigationProp<S>;
     screenProps?: ScreenProps;
@@ -1253,7 +1263,9 @@ declare module 'react-navigation' {
   export namespace SwitchActions {
     const JUMP_TO: 'Navigation/JUMP_TO';
 
-    function jumpTo(options: NavigationJumpToActionPayload): NavigationJumpToAction;
+    function jumpTo(
+      options: NavigationJumpToActionPayload
+    ): NavigationJumpToAction;
   }
 
   /**
@@ -1518,4 +1530,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>;
+  }
 }

yarn.lock

@@ -827,20 +827,20 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@react-navigation/core@~3.4.1":
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.4.1.tgz#8c7e0e53cfb8ccaf87afb76a2733f5e5fde20cd8"
-  integrity sha512-slslu4FmjKQMO/EKGGqqGsfC6evQLdbJM2ROACcC2Xxf0+nPeZV5ND8HHukUZZucJRE6Bg/NI+zC1XSBYRjhnw==
+"@react-navigation/core@~3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.1.tgz#7a2339fca3496979305fb3a8ab88c2ca8d8c214d"
+  integrity sha512-q7NyhWVYOhVIWqL2GZKa6G78YarXaVTTtOlSDkvy4ZIggo40wZzamlnrJRvsaQX46gsgw45FAWb5SriHh8o7eA==
   dependencies:
     hoist-non-react-statics "^3.3.0"
     path-to-regexp "^1.7.0"
     query-string "^6.4.2"
     react-is "^16.8.6"
 
-"@react-navigation/native@~3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.5.0.tgz#f5d16e0845ac26d1147d1caa481f18a00740e7ae"
-  integrity sha512-TmGOis++ejEXG3sqNJhCSKqB0/qLu3FQgDtO959qpqif36R/diR8SQwJqeSdofoEiK3CepdhFlTCeHdS1/+MsQ==
+"@react-navigation/native@~3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.6.2.tgz#3634697b6350cc5189657ae4551f2d52b57fbbf0"
+  integrity sha512-Cybeou6N82ZeRmgnGlu+wzlV3z5BZQR2dmYaNFV1TNLUGHqtvv8E7oNw9uYcz9Ox5LFbiX+FdNTn2d6ZPlK0kg==
   dependencies:
     hoist-non-react-statics "^3.0.1"
     react-native-safe-area-view "^0.14.1"
@@ -7927,7 +7927,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8049,11 +8049,6 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-native-safe-area-view@^0.14.1:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.3.tgz#3cc34d2fcc8886bc8a8bd1ab226d4345d02c23b0"
@@ -8147,26 +8142,27 @@ react-native@~0.57.7:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
-react-navigation-drawer@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-1.2.1.tgz#7bd5efeee7d2f611d3ebb0933e0c8e8eb7cafe52"
-  integrity sha512-T2kaBjY2c4/3I6noWFnaf/c18ntNH5DsST38i+pdc2NPxn5Yi5lkK+ZZTeKuHSFD4a7G0jWY9OGf1iRkHWLMAQ==
+react-navigation-drawer@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-1.4.0.tgz#70f3dd83e3da9cd4ea6e2739526502c823d466b9"
+  integrity sha512-ZyWBozcjB2aZ7vwCALv90cYA2NpDjM+WALaiYRshvPvue8l7cqynePbHK8GhlMGyJDwZqp4MxQmu8u1XAKp3Bw==
   dependencies:
     react-native-tab-view "^1.2.0"
 
-react-navigation-stack@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.4.0.tgz#69cdb029ea4ee5877d7e933b3117dc90bc841eb2"
-  integrity sha512-zEe9wCA0Ot8agarYb//0nSWYW1GM+1R0tY/nydUV0EizeJ27At0EklYVWvYEuYU6C48va6cu8OPL7QD/CcJACw==
+react-navigation-stack@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.5.3.tgz#cdc9f5a6dbdc55509a15f60d765722573dec1997"
+  integrity sha512-MQcwDVbZUYsTtDJb5cFOSm+K+e7KpUCoROaGoUOR+JHWE3uuaJ3pd/Nu+32a57J98TNBf4qq0+2TPJWl6z6IBg==
+  dependencies:
+    prop-types "^15.7.2"
 
-react-navigation-tabs@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.1.4.tgz#00a312250df3c519c60b7815a523ace5ee11163a"
-  integrity sha512-py2hLCRxPwXOzmY1W9XcY1rWXxdK6RGW/aXh56G9gIf8cpHNDhy/bJV4e46/JrVcse3ybFaN0liT09/DM/NdwQ==
+react-navigation-tabs@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-1.2.0.tgz#602c147029bb4f1c569b26479ddba534fe3ebb19"
+  integrity sha512-I6vq3XX4ub9KhWQzcrggznls+2Z2C6w2ro46vokDGGvJ02CBpQRar7J0ETV29Ot5AJY67HucNUmZdH3yDFckmQ==
   dependencies:
     hoist-non-react-statics "^2.5.0"
     prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
     react-native-tab-view "^1.4.1"
 
 react-proxy@^1.1.7: