Release 3.12.0

2026-04-26 13:35:32 +08:00 · 2019-08-26 09:52:28 -07:00
parent c636f5ab47
commit 3009429d72
18 changed files with 1854 additions and 2196 deletions
--- a/examples/NavigationPlayground/App.tsx
+++ b/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',
  },
--- a/examples/NavigationPlayground/app.json
+++ b/examples/NavigationPlayground/app.json
@@ -4,7 +4,7 @@
    "description": "Explore various patterns for navigation",
    "slug": "NavigationPlayground",
    "privacy": "public",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
@@ -24,7 +24,8 @@
      "**/*"
    ],
    "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "org.reactnavigation.playground"
    }
  }
 }
--- a/examples/NavigationPlayground/package.json
+++ b/examples/NavigationPlayground/package.json
@@ -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",
--- a/examples/NavigationPlayground/patches/react-native-gesture-handler+1.1.0.patch
+++ b/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: (
--- a/examples/NavigationPlayground/src/CustomTabUI.tsx
+++ b/examples/NavigationPlayground/src/CustomTabUI.tsx
@@ -11,7 +11,9 @@ import {
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import {
  MaterialTopTabBar,
+  Themed,
  createMaterialTopTabNavigator,
+  ThemeContext,
  NavigationScreenProp,
  NavigationState,
  SafeAreaView,
@@ -45,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"
@@ -79,7 +81,7 @@ class StarredScreen extends React.Component<Props> {
    const { navigation } = this.props;
    return (
      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Starred Screen</Text>
+        <Themed.Text>Starred Screen</Themed.Text>
        <Button
          onPress={() => navigation.navigate('Home')}
          title="Go to home tab"
@@ -132,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"
@@ -160,6 +162,8 @@ const SimpleTabs = createMaterialTopTabNavigator(
 );

 class TabNavigator extends React.Component<Props> {
+  static contextType = ThemeContext;
+
  static router = SimpleTabs.router;
  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
@@ -175,7 +179,7 @@ class TabNavigator extends React.Component<Props> {
          style={{
            height: 50,
            borderTopWidth: StyleSheet.hairlineWidth,
-            backgroundColor: '#000',
+            backgroundColor: this.context === 'light' ? '#000' : '#fff',
            alignItems: 'center',
            justifyContent: 'center',
          }}
@@ -186,7 +190,13 @@ class TabNavigator extends React.Component<Props> {
              //
            }}
          >
-            <Text style={{ fontSize: 20, color: '#fff', fontWeight: 'bold' }}>
+            <Text
+              style={{
+                fontSize: 20,
+                color: this.context === 'light' ? '#fff' : '#000',
+                fontWeight: 'bold',
+              }}
+            >
              Check out
            </Text>
          </TouchableOpacity>
--- a/examples/NavigationPlayground/src/CustomTabs.tsx
+++ b/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} />;
+};
--- a/examples/NavigationPlayground/src/Drawer.tsx
+++ b/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>
 );

--- a/examples/NavigationPlayground/src/ModalStack.tsx
+++ b/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>
 );

--- a/examples/NavigationPlayground/src/SampleText.tsx
+++ b/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;
--- a/examples/NavigationPlayground/src/SimpleStack.tsx
+++ b/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>
    );
  }
--- a/examples/NavigationPlayground/src/SimpleTabs.tsx
+++ b/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>
    )}
  />
 );
--- a/examples/NavigationPlayground/src/StackWithCustomHeaderBackImage.tsx
+++ b/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: {},
 });
--- a/examples/NavigationPlayground/src/StackWithTranslucentHeader.tsx
+++ b/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
--- a/examples/NavigationPlayground/yarn.lock
+++ b/examples/NavigationPlayground/yarn.lock
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation",
-  "version": "3.11.1",
+  "version": "3.12.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.0",
+    "@react-navigation/native": "~3.6.1",
+    "react-navigation-drawer": "~1.4.0",
+    "react-navigation-tabs": "~1.2.0",
+    "react-navigation-stack": "~1.5.0"
  },
  "devDependencies": {
    "@types/react-native": "~0.57.38",
--- a/src/react-navigation.js
+++ b/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;
--- a/typescript/react-navigation.d.ts
+++ b/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,
@@ -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> =
@@ -763,6 +769,7 @@ declare module 'react-navigation' {
  }

  export interface NavigationNavigatorProps<O = {}, S = {}> {
+    theme?: SupportedThemes | 'no-preference';
    detached?: boolean;
    navigation?: NavigationProp<S>;
    screenProps?: ScreenProps;
@@ -1256,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;
  }

  /**
@@ -1521,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>;
+  }
 }
--- a/yarn.lock
+++ b/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.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.0.tgz#73d1a12448e2bd71855e0080b95a7f51ede0cd9e"
+  integrity sha512-NLm24lA51R8o8c+iFnwtN9elqRzm4OJ8f1qPBCUNIYW1sb8M5yCD53vRP0fRcPFpr/6Xzs2TJMsWnnebwFp0Rw==
  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.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.6.0.tgz#dabf93382f75037c01dfdd2a03807e40b48a4d61"
+  integrity sha512-MmsEF4Gf3DD7rtZlbOLULQOBCxE2nGz6FdPYxtlEI+N/E2I5OrdxrTNAA7EGWsIiaJEapU4bp0a+tLjh/9PQpA==
  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.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.5.0.tgz#f2ddee8b441158cd26c631359bc12810cd41228f"
+  integrity sha512-XwgdQY8c7PguPw/cx6GCRMnYMe6P/izzOpeOfE8g6sWrWW2vs/vwodRb9a820QePhX0I7dkgxdnTSq+o7/R49Q==
+  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: