chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.28
 - @react-navigation/compat@5.0.0-alpha.19
 - @react-navigation/core@5.0.0-alpha.29
 - @react-navigation/drawer@5.0.0-alpha.30
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.27
 - @react-navigation/material-top-tabs@5.0.0-alpha.25
 - @react-navigation/native-stack@5.0.0-alpha.19
 - @react-navigation/native@5.0.0-alpha.21
 - @react-navigation/routers@5.0.0-alpha.18
 - @react-navigation/stack@5.0.0-alpha.46

README.md

@@ -35,7 +35,7 @@ Navigators bundle a router and a view which takes the navigation state and decid
 A simple navigator could look like this:
 
 ```js
-import { createNavigatorFactory } from '@react-navigation/core';
+import { createNavigatorFactory } from '@react-navigation/native';
 
 function StackNavigator({ initialRouteName, children, ...rest }) {
   // The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
@@ -256,7 +256,7 @@ Sometimes we want to run side-effects when a screen is focused. A side effect ma
 To make this easier, the library exports a `useFocusEffect` hook:
 
 ```js
-import { useFocusEffect } from '@react-navigation/core';
+import { useFocusEffect } from '@react-navigation/native';
 
 function Profile({ userId }) {
   const [user, setUser] = React.useState(null);
@@ -285,7 +285,7 @@ The `useFocusEffect` is analogous to React's `useEffect` hook. The only differen
 We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
 
 ```js
-import { useIsFocused } from '@react-navigation/core';
+import { useIsFocused } from '@react-navigation/native';
 
 // ...
 

example/metro.config.js

@@ -54,6 +54,23 @@ module.exports = {
     }, {}),
   },
 
+  server: {
+    enhanceMiddleware: middleware => {
+      return (req, res, next) => {
+        const assets = '/packages/stack/src/views/assets';
+
+        if (req.url.startsWith(assets)) {
+          req.url = req.url.replace(
+            assets,
+            '/assets/../packages/stack/src/views/assets'
+          );
+        }
+
+        return middleware(req, res, next);
+      };
+    },
+  },
+
   transformer: {
     getTransformOptions: async () => ({
       transform: {

example/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
     "@react-native-community/masked-view": "0.1.5",
+    "color": "^3.1.2",
     "expo": "^36.0.0",
     "expo-asset": "~8.0.0",
     "query-string": "^6.9.0",
@@ -27,24 +28,24 @@
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "~1.5.0",
-    "react-native-paper": "^3.2.1",
+    "react-native-paper": "^3.3.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.12",
+    "react-native-screens": "^2.0.0-alpha.19",
     "react-native-tab-view": "2.11.0",
-    "react-native-unimodules": "^0.6.0",
+    "react-native-unimodules": "^0.7.0",
     "react-native-web": "^0.11.7",
     "scheduler": "^0.18.0",
     "shortid": "^2.2.15",
     "use-subscription": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
+    "@babel/core": "^7.7.5",
-    "@expo/webpack-config": "^0.10.1",
+    "@expo/webpack-config": "^0.10.6",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.22",
+    "@types/react-native": "^0.60.25",
-    "babel-preset-expo": "^7.1.0",
+    "babel-preset-expo": "^8.0.0",
-    "expo-cli": "^3.8.0",
+    "expo-cli": "^3.11.1",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   }
 }

example/src/Screens/AuthFlow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
 import { Title, Button } from 'react-native-paper';
-import { ParamListBase } from '@react-navigation/core';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderBackButton,
@@ -9,11 +9,27 @@ import {
 } from '@react-navigation/stack';
 
 type AuthStackParams = {
-  splash: undefined;
+  Splash: undefined;
-  home: undefined;
+  Home: undefined;
-  'sign-in': undefined;
+  SignIn: undefined;
+  PostSignOut: undefined;
 };
 
+const AUTH_CONTEXT_ERROR =
+  'Authentication context not found. Have your wrapped your components with AuthContext.Consumer?';
+
+const AuthContext = React.createContext<{
+  signIn: () => void;
+  signOut: () => void;
+}>({
+  signIn: () => {
+    throw new Error(AUTH_CONTEXT_ERROR);
+  },
+  signOut: () => {
+    throw new Error(AUTH_CONTEXT_ERROR);
+  },
+});
+
 const SplashScreen = () => {
   return (
     <View style={styles.content}>
@@ -22,27 +38,27 @@ const SplashScreen = () => {
   );
 };
 
-const SignInScreen = ({ onSignIn }: { onSignIn: (token: string) => void }) => {
+const SignInScreen = () => {
+  const { signIn } = React.useContext(AuthContext);
+
   return (
     <View style={styles.content}>
       <TextInput placeholder="Username" style={styles.input} />
       <TextInput placeholder="Password" secureTextEntry style={styles.input} />
-      <Button
+      <Button mode="contained" onPress={signIn} style={styles.button}>
-        mode="contained"
-        onPress={() => onSignIn('token')}
-        style={styles.button}
-      >
         Sign in
       </Button>
     </View>
   );
 };
 
-const HomeScreen = ({ onSignOut }: { onSignOut: () => void }) => {
+const HomeScreen = () => {
+  const { signOut } = React.useContext(AuthContext);
+
   return (
     <View style={styles.content}>
       <Title style={styles.text}>Signed in successfully 🎉</Title>
-      <Button onPress={onSignOut} style={styles.button}>
+      <Button onPress={signOut} style={styles.button}>
         Sign out
       </Button>
     </View>
@@ -105,36 +121,44 @@ export default function SimpleStackScreen({ navigation }: Props) {
     headerShown: false,
   });
 
+  const authContext = React.useMemo(
+    () => ({
+      signIn: () => dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' }),
+      signOut: () => dispatch({ type: 'SIGN_OUT' }),
+    }),
+    []
+  );
+
   return (
-    <SimpleStack.Navigator
+    <AuthContext.Provider value={authContext}>
-      screenOptions={{
+      <SimpleStack.Navigator
-        headerLeft: () => (
+        screenOptions={{
-          <HeaderBackButton onPress={() => navigation.goBack()} />
+          headerLeft: () => (
-        ),
+            <HeaderBackButton onPress={() => navigation.goBack()} />
-      }}
+          ),
-    >
+        }}
-      {state.isLoading ? (
+      >
-        <SimpleStack.Screen
+        {state.isLoading ? (
-          name="splash"
+          <SimpleStack.Screen
-          component={SplashScreen}
+            name="Splash"
-          options={{ title: `Auth Flow` }}
+            component={SplashScreen}
-        />
+            options={{ title: 'Auth Flow' }}
-      ) : state.userToken === undefined ? (
+          />
-        <SimpleStack.Screen name="sign-in" options={{ title: `Sign in` }}>
+        ) : state.userToken === undefined ? (
-          {() => (
+          <SimpleStack.Screen
-            <SignInScreen
+            name="SignIn"
-              onSignIn={token => dispatch({ type: 'SIGN_IN', token })}
+            options={{ title: 'Sign in' }}
-            />
+            component={SignInScreen}
-          )}
+          />
-        </SimpleStack.Screen>
+        ) : (
-      ) : (
+          <SimpleStack.Screen
-        <SimpleStack.Screen name="home" options={{ title: 'Home' }}>
+            name="Home"
-          {() => (
+            options={{ title: 'Home' }}
-            <HomeScreen onSignOut={() => dispatch({ type: 'SIGN_OUT' })} />
+            component={HomeScreen}
-          )}
+          />
-        </SimpleStack.Screen>
+        )}
-      )}
+      </SimpleStack.Navigator>
-    </SimpleStack.Navigator>
+    </AuthContext.Provider>
   );
 }
 

example/src/Screens/MaterialTopTabs.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -15,13 +14,7 @@ const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
 export default function MaterialTopTabsScreen() {
   return (
-    <MaterialTopTabs.Navigator
+    <MaterialTopTabs.Navigator>
-      tabBarOptions={{
-        style: styles.tabBar,
-        labelStyle: styles.tabLabel,
-        indicatorStyle: styles.tabIndicator,
-      }}
-    >
       <MaterialTopTabs.Screen
         name="chat"
         component={Chat}
@@ -40,15 +33,3 @@ export default function MaterialTopTabsScreen() {
     </MaterialTopTabs.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: 'white',
-  },
-  tabLabel: {
-    color: 'black',
-  },
-  tabIndicator: {
-    backgroundColor: 'tomato',
-  },
-});

example/src/Screens/ModalPresentationStack.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 import { useSafeArea } from 'react-native-safe-area-context';
-import { RouteProp, ParamListBase } from '@react-navigation/core';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,

example/src/Screens/NativeStack.tsx

@@ -7,7 +7,8 @@ import {
   RouteProp,
   ParamListBase,
   useFocusEffect,
-} from '@react-navigation/core';
+  useTheme,
+} from '@react-navigation/native';
 import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { StackNavigationProp } from '@react-navigation/stack';
 import {
@@ -23,90 +24,113 @@ type NativeStackParams = {
 
 type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
 
+const Title = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return <Text style={[styles.title, { color: colors.text }]}>{children}</Text>;
+};
+
+const Paragraph = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.paragraph, { color: colors.text }]}>{children}</Text>
+  );
+};
+
 const ArticleScreen = ({
   navigation,
 }: {
   navigation: NativeStackNavigation;
   route: RouteProp<NativeStackParams, 'article'>;
-}) => (
+}) => {
-  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+  const { colors } = useTheme();
-    <View style={styles.buttons}>
+
-      <Button
+  return (
-        mode="contained"
+    <ScrollView
-        onPress={() => navigation.push('album')}
+      style={{ backgroundColor: colors.card }}
-        style={styles.button}
+      contentContainerStyle={styles.content}
-      >
+    >
-        Push album
+      <View style={styles.buttons}>
-      </Button>
+        <Button
-      <Button
+          mode="contained"
-        mode="outlined"
+          onPress={() => navigation.push('album')}
-        onPress={() => navigation.goBack()}
+          style={styles.button}
-        style={styles.button}
+        >
-      >
+          Push album
-        Go back
+        </Button>
-      </Button>
+        <Button
-    </View>
+          mode="outlined"
-    <Text style={styles.title}>What is Lorem Ipsum?</Text>
+          onPress={() => navigation.goBack()}
-    <Text style={styles.paragraph}>
+          style={styles.button}
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        >
-      Lorem Ipsum has been the industry&apos;s standard dummy text ever since
+          Go back
-      the 1500s, when an unknown printer took a galley of type and scrambled it
+        </Button>
-      to make a type specimen book. It has survived not only five centuries, but
+      </View>
-      also the leap into electronic typesetting, remaining essentially
+      <Title>What is Lorem Ipsum?</Title>
-      unchanged. It was popularised in the 1960s with the release of Letraset
+      <Paragraph>
-      sheets containing Lorem Ipsum passages, and more recently with desktop
+        Lorem Ipsum is simply dummy text of the printing and typesetting
-      publishing software like Aldus PageMaker including versions of Lorem
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
-      Ipsum.
+        ever since the 1500s, when an unknown printer took a galley of type and
-    </Text>
+        scrambled it to make a type specimen book. It has survived not only five
-    <Text style={styles.title}>Where does it come from?</Text>
+        centuries, but also the leap into electronic typesetting, remaining
-    <Text style={styles.paragraph}>
+        essentially unchanged. It was popularised in the 1960s with the release
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
-      roots in a piece of classical Latin literature from 45 BC, making it over
+        with desktop publishing software like Aldus PageMaker including versions
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+        of Lorem Ipsum.
-      College in Virginia, looked up one of the more obscure Latin words,
+      </Paragraph>
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
+      <Title>Where does it come from?</Title>
-      the word in classical literature, discovered the undoubtable source. Lorem
+      <Paragraph>
-      Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
-      et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45
+        has roots in a piece of classical Latin literature from 45 BC, making it
-      BC. This book is a treatise on the theory of ethics, very popular during
+        over 2000 years old. Richard McClintock, a Latin professor at
-      the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
-      sit amet..&quot;, comes from a line in section 1.10.32.
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
-    </Text>
+        the cites of the word in classical literature, discovered the
-    <Text style={styles.paragraph}>
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
-      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
-      for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
-      Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
+        of ethics, very popular during the Renaissance. The first line of Lorem
-      original form, accompanied by English versions from the 1914 translation
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
-      by H. Rackham.
+        section 1.10.32.
-    </Text>
+      </Paragraph>
-    <Text style={styles.title}>Why do we use it?</Text>
+      <Paragraph>
-    <Text style={styles.paragraph}>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
-      It is a long established fact that a reader will be distracted by the
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
-      readable content of a page when looking at its layout. The point of using
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
-      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
+        exact original form, accompanied by English versions from the 1914
-      as opposed to using &quot;Content here, content here&quot;, making it look
+        translation by H. Rackham.
-      like readable English. Many desktop publishing packages and web page
+      </Paragraph>
-      editors now use Lorem Ipsum as their default model text, and a search for
+      <Title>Why do we use it?</Title>
-      &quot;lorem ipsum&quot; will uncover many web sites still in their
+      <Paragraph>
-      infancy. Various versions have evolved over the years, sometimes by
+        It is a long established fact that a reader will be distracted by the
-      accident, sometimes on purpose (injected humour and the like).
+        readable content of a page when looking at its layout. The point of
-    </Text>
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
-    <Text style={styles.title}>Where can I get some?</Text>
+        letters, as opposed to using &quot;Content here, content here&quot;,
-    <Text style={styles.paragraph}>
+        making it look like readable English. Many desktop publishing packages
-      There are many variations of passages of Lorem Ipsum available, but the
+        and web page editors now use Lorem Ipsum as their default model text,
-      majority have suffered alteration in some form, by injected humour, or
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
-      randomised words which don&apos;t look even slightly believable. If you
+        still in their infancy. Various versions have evolved over the years,
-      are going to use a passage of Lorem Ipsum, you need to be sure there
+        sometimes by accident, sometimes on purpose (injected humour and the
-      isn&apos;t anything embarrassing hidden in the middle of text. All the
+        like).
-      Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
+      </Paragraph>
-      necessary, making this the first true generator on the Internet. It uses a
+      <Title>Where can I get some?</Title>
-      dictionary of over 200 Latin words, combined with a handful of model
+      <Paragraph>
-      sentence structures, to generate Lorem Ipsum which looks reasonable. The
+        There are many variations of passages of Lorem Ipsum available, but the
-      generated Lorem Ipsum is therefore always free from repetition, injected
+        majority have suffered alteration in some form, by injected humour, or
-      humour, or non-characteristic words etc.
+        randomised words which don&apos;t look even slightly believable. If you
-    </Text>
+        are going to use a passage of Lorem Ipsum, you need to be sure there
-  </ScrollView>
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
-);
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
+    </ScrollView>
+  );
+};
 
 const AlbumsScreen = ({
   navigation,
@@ -191,21 +215,16 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 24,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,

example/src/Screens/SimpleStack.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
-import { RouteProp, ParamListBase } from '@react-navigation/core';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,

example/src/Shared/Albums.tsx

@@ -38,7 +38,7 @@ export default function Albums() {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#343C46',
+    backgroundColor: '#000',
   },
   content: {
     flexDirection: 'row',

example/src/Shared/Article.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
 
 type Props = {
   date?: string;
@@ -19,10 +19,12 @@ export default function Article({
 
   useScrollToTop(ref);
 
+  const { colors } = useTheme();
+
   return (
     <ScrollView
       ref={ref}
-      style={styles.container}
+      style={{ backgroundColor: colors.card }}
       contentContainerStyle={styles.content}
     >
       <View style={styles.author}>
@@ -31,24 +33,26 @@ export default function Article({
           source={require('../../assets/avatar-1.png')}
         />
         <View style={styles.meta}>
-          <Text style={styles.name}>{author.name}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>
-          <Text style={styles.timestamp}>{date}</Text>
+            {author.name}
+          </Text>
+          <Text style={[styles.timestamp, { color: colors.text }]}>{date}</Text>
         </View>
       </View>
-      <Text style={styles.title}>Lorem Ipsum</Text>
+      <Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Contrary to popular belief, Lorem Ipsum is not simply random text. It
         has roots in a piece of classical Latin literature from 45 BC, making it
         over 2000 years old.
       </Text>
       <Image style={styles.image} source={require('../../assets/book.jpg')} />
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Richard McClintock, a Latin professor at Hampden-Sydney College in
         Virginia, looked up one of the more obscure Latin words, consectetur,
         from a Lorem Ipsum passage, and going through the cites of the word in
         classical literature, discovered the undoubtable source.
       </Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
         Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
         written in 45 BC. This book is a treatise on the theory of ethics, very
@@ -61,9 +65,6 @@ export default function Article({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
@@ -77,13 +78,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   name: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: 24,
   },
   timestamp: {
-    color: '#999',
+    opacity: 0.5,
     fontSize: 14,
     lineHeight: 21,
   },
@@ -93,14 +93,12 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 36,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,

example/src/Shared/Chat.tsx

@@ -7,7 +7,8 @@ import {
   ScrollView,
   StyleSheet,
 } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 const MESSAGES = [
   'okay',
@@ -21,6 +22,8 @@ export default function Chat() {
 
   useScrollToTop(ref);
 
+  const { colors } = useTheme();
+
   return (
     <View style={styles.container}>
       <ScrollView
@@ -45,9 +48,12 @@ export default function Chat() {
                 }
               />
               <View
-                style={[styles.bubble, odd ? styles.received : styles.sent]}
+                style={[
+                  styles.bubble,
+                  { backgroundColor: odd ? colors.primary : colors.card },
+                ]}
               >
-                <Text style={odd ? styles.receivedText : styles.sentText}>
+                <Text style={{ color: odd ? 'white' : colors.text }}>
                   {text}
                 </Text>
               </View>
@@ -56,7 +62,14 @@ export default function Chat() {
         })}
       </ScrollView>
       <TextInput
-        style={styles.input}
+        style={[
+          styles.input,
+          { backgroundColor: colors.card, color: colors.text },
+        ]}
+        placeholderTextColor={Color(colors.text)
+          .alpha(0.5)
+          .rgb()
+          .string()}
         placeholder="Write a message"
         underlineColorAndroid="transparent"
       />
@@ -67,7 +80,6 @@ export default function Chat() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eceff1',
   },
   inverted: {
     transform: [{ scaleY: -1 }],
@@ -97,22 +109,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 20,
   },
-  sent: {
-    backgroundColor: '#cfd8dc',
-  },
-  received: {
-    backgroundColor: '#2196F3',
-  },
-  sentText: {
-    color: 'black',
-  },
-  receivedText: {
-    color: 'white',
-  },
   input: {
     height: 48,
     paddingVertical: 12,
     paddingHorizontal: 24,
-    backgroundColor: 'white',
   },
 });

example/src/Shared/Contacts.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, FlatList, StyleSheet } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
 
 type Item = { name: string; number: number };
 
@@ -57,27 +57,35 @@ const CONTACTS: Item[] = [
   { name: 'Vincent Sandoval', number: 2606111495 },
 ];
 
-class ContactItem extends React.PureComponent<{
+const ContactItem = React.memo(
-  item: { name: string; number: number };
+  ({ item }: { item: { name: string; number: number } }) => {
-}> {
+    const { colors } = useTheme();
-  render() {
-    const { item } = this.props;
 
     return (
-      <View style={styles.item}>
+      <View style={[styles.item, { backgroundColor: colors.card }]}>
         <View style={styles.avatar}>
           <Text style={styles.letter}>
             {item.name.slice(0, 1).toUpperCase()}
           </Text>
         </View>
         <View style={styles.details}>
-          <Text style={styles.name}>{item.name}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>{item.name}</Text>
-          <Text style={styles.number}>{item.number}</Text>
+          <Text style={[styles.number, { color: colors.text, opacity: 0.5 }]}>
+            {item.number}
+          </Text>
         </View>
       </View>
     );
   }
-}
+);
+
+const ItemSeparator = () => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.separator, { backgroundColor: colors.border }]} />
+  );
+};
 
 export default function Contacts() {
   const ref = React.useRef<FlatList<Item>>(null);
@@ -86,8 +94,6 @@ export default function Contacts() {
 
   const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
 
-  const ItemSeparator = () => <View style={styles.separator} />;
-
   return (
     <FlatList
       ref={ref}
@@ -101,7 +107,6 @@ export default function Contacts() {
 
 const styles = StyleSheet.create({
   item: {
-    backgroundColor: 'white',
     flexDirection: 'row',
     alignItems: 'center',
     padding: 8,
@@ -124,14 +129,11 @@ const styles = StyleSheet.create({
   name: {
     fontWeight: 'bold',
     fontSize: 14,
-    color: 'black',
   },
   number: {
     fontSize: 12,
-    color: '#999',
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: 'rgba(0, 0, 0, .08)',
   },
 });

example/src/index.tsx

@@ -1,16 +1,32 @@
 import * as React from 'react';
-import { ScrollView, AsyncStorage, YellowBox } from 'react-native';
+import {
+  View,
+  ScrollView,
+  AsyncStorage,
+  YellowBox,
+  Platform,
+  StatusBar,
+} from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { Appbar, List } from 'react-native-paper';
+import {
+  Provider as PaperProvider,
+  DefaultTheme as PaperLightTheme,
+  DarkTheme as PaperDarkTheme,
+  Subheading,
+  Appbar,
+  List,
+  Switch,
+  Divider,
+} from 'react-native-paper';
 import { Asset } from 'expo-asset';
 import {
   InitialState,
   getStateFromPath,
-  NavigationContainerRef,
-} from '@react-navigation/core';
-import {
   useLinking,
+  NavigationContainerRef,
   NavigationNativeContainer,
+  DefaultTheme,
+  DarkTheme,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -74,7 +90,8 @@ const SCREENS = {
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
 const Stack = createStackNavigator<RootStackParamList>();
 
-const PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 
 Asset.loadAsync(StackAssets);
 
@@ -104,6 +121,8 @@ export default function App() {
     },
   });
 
+  const [theme, setTheme] = React.useState(DefaultTheme);
+
   const [isReady, setIsReady] = React.useState(false);
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
@@ -115,7 +134,9 @@ export default function App() {
         let state = await getInitialState();
 
         if (state === undefined) {
-          const savedState = await AsyncStorage.getItem(PERSISTENCE_KEY);
+          const savedState = await AsyncStorage.getItem(
+            NAVIGATION_PERSISTENCE_KEY
+          );
           state = savedState ? JSON.parse(savedState) : undefined;
         }
 
@@ -123,6 +144,14 @@ export default function App() {
           setInitialState(state);
         }
       } finally {
+        try {
+          const themeName = await AsyncStorage.getItem(THEME_PERSISTENCE_KEY);
+
+          setTheme(themeName === 'dark' ? DarkTheme : DefaultTheme);
+        } catch (e) {
+          // Ignore
+        }
+
         setIsReady(true);
       }
     };
@@ -130,78 +159,126 @@ export default function App() {
     restoreState();
   }, [getInitialState]);
 
+  const paperTheme = React.useMemo(() => {
+    const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
+
+    return {
+      ...t,
+      colors: {
+        ...t.colors,
+        ...theme.colors,
+        surface: theme.colors.card,
+        accent: theme.dark ? 'rgb(255, 55, 95)' : 'rgb(255, 45, 85)',
+      },
+    };
+  }, [theme.colors, theme.dark]);
+
   if (!isReady) {
     return null;
   }
 
   return (
-    <NavigationNativeContainer
+    <PaperProvider theme={paperTheme}>
-      ref={containerRef}
+      {Platform.OS === 'ios' && (
-      initialState={initialState}
+        <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
-      onStateChange={state =>
+      )}
-        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+      <NavigationNativeContainer
-      }
+        ref={containerRef}
-    >
+        initialState={initialState}
-      <Drawer.Navigator>
+        onStateChange={state =>
-        <Drawer.Screen
+          AsyncStorage.setItem(
-          name="Root"
+            NAVIGATION_PERSISTENCE_KEY,
-          options={{
+            JSON.stringify(state)
-            title: 'Examples',
+          )
-            drawerIcon: ({ size, color }) => (
+        }
-              <MaterialIcons size={size} color={color} name="folder" />
+        theme={theme}
-            ),
+      >
-          }}
+        <Drawer.Navigator>
-        >
+          <Drawer.Screen
-          {({
+            name="Root"
-            navigation,
+            options={{
-          }: {
+              title: 'Examples',
-            navigation: DrawerNavigationProp<RootDrawerParamList>;
+              drawerIcon: ({ size, color }) => (
-          }) => (
+                <MaterialIcons size={size} color={color} name="folder" />
-            <Stack.Navigator>
+              ),
-              <Stack.Screen
+            }}
-                name="Home"
+          >
-                options={{
+            {({
-                  title: 'Examples',
+              navigation,
-                  headerLeft: () => (
+            }: {
-                    <Appbar.Action
+              navigation: DrawerNavigationProp<RootDrawerParamList>;
-                      icon="menu"
+            }) => (
-                      onPress={() => navigation.toggleDrawer()}
+              <Stack.Navigator>
-                    />
+                <Stack.Screen
-                  ),
+                  name="Home"
-                }}
+                  options={{
-              >
+                    title: 'Examples',
-                {({
+                    headerLeft: () => (
-                  navigation,
+                      <Appbar.Action
-                }: {
+                        color={theme.colors.text}
-                  navigation: StackNavigationProp<RootStackParamList>;
+                        icon="menu"
-                }) => (
+                        onPress={() => navigation.toggleDrawer()}
-                  <ScrollView>
+                      />
-                    {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
+                    ),
-                      name => (
+                  }}
+                >
+                  {({
+                    navigation,
+                  }: {
+                    navigation: StackNavigationProp<RootStackParamList>;
+                  }) => (
+                    <ScrollView
+                      style={{ backgroundColor: theme.colors.background }}
+                    >
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          padding: 16,
+                        }}
+                      >
+                        <Subheading>Dark theme</Subheading>
+                        <Switch
+                          value={theme.dark}
+                          onValueChange={() => {
+                            AsyncStorage.setItem(
+                              THEME_PERSISTENCE_KEY,
+                              theme.dark ? 'light' : 'dark'
+                            );
+
+                            setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
+                          }}
+                        />
+                      </View>
+                      <Divider />
+                      {(Object.keys(SCREENS) as Array<
+                        keyof typeof SCREENS
+                      >).map(name => (
                         <List.Item
                           key={name}
                           title={SCREENS[name].title}
                           onPress={() => navigation.push(name)}
                         />
-                      )
+                      ))}
-                    )}
+                    </ScrollView>
-                  </ScrollView>
+                  )}
+                </Stack.Screen>
+                {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
+                  name => (
+                    <Stack.Screen
+                      key={name}
+                      name={name}
+                      component={SCREENS[name].component}
+                      options={{ title: SCREENS[name].title }}
+                    />
+                  )
                 )}
-              </Stack.Screen>
+              </Stack.Navigator>
-              {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
+            )}
-                name => (
+          </Drawer.Screen>
-                  <Stack.Screen
+        </Drawer.Navigator>
-                    key={name}
+      </NavigationNativeContainer>
-                    name={name}
+    </PaperProvider>
-                    component={SCREENS[name].component}
-                    options={{ title: SCREENS[name].title }}
-                  />
-                )
-              )}
-            </Stack.Navigator>
-          )}
-        </Drawer.Screen>
-      </Drawer.Navigator>
-    </NavigationNativeContainer>
   );
 }

package.json

@@ -24,22 +24,22 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.2",
-    "@babel/runtime": "^7.7.2",
+    "@babel/runtime": "^7.7.6",
     "@commitlint/config-conventional": "^8.2.0",
     "@types/jest": "^24.0.23",
     "codecov": "^3.6.1",
     "commitlint": "^8.2.0",
-    "core-js": "^3.4.1",
+    "core-js": "^3.5.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.7.2",
     "eslint-config-satya164": "^3.1.2",
     "husky": "^3.0.9",
     "jest": "^24.8.0",
     "lerna": "^3.18.4",
     "prettier": "^1.19.1",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "resolutions": {
     "react": "~16.9.0",

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.27...@react-navigation/bottom-tabs@5.0.0-alpha.28) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.26...@react-navigation/bottom-tabs@5.0.0-alpha.27) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.25...@react-navigation/bottom-tabs@5.0.0-alpha.26) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.24...@react-navigation/bottom-tabs@5.0.0-alpha.25) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.23...@react-navigation/bottom-tabs@5.0.0-alpha.24) (2019-12-10)
 
 

packages/bottom-tabs/README.md

@@ -7,7 +7,7 @@ Bottom tab navigator for React Navigation following iOS design guidelines.
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/bottom-tabs
+yarn add @react-navigation/native @react-navigation/bottom-tabs
 ```
 
 Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,20 +33,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18",
+    "color": "^3.1.2"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/color": "^3.0.0",
-    "@types/react-native": "^0.60.22",
+    "@types/react": "^16.9.16",
+    "@types/react-native": "^0.60.25",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-safe-area-context": "^0.6.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-safe-area-context": "^0.3.6"

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -3,7 +3,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/bottom-tabs/src/types.tsx

@@ -10,7 +10,7 @@ import {
   NavigationProp,
   ParamListBase,
   Descriptor,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type BottomTabNavigationEventMap = {

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -10,22 +10,15 @@ import {
   Dimensions,
 } from 'react-native';
 import {
-  Route,
   NavigationContext,
   CommonActions,
-} from '@react-navigation/core';
+  useTheme,
+} from '@react-navigation/native';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
 import { BottomTabBarProps } from '../types';
 
-type State = {
-  dimensions: { height: number; width: number };
-  layout: { height: number; width: number };
-  keyboard: boolean;
-  visible: Animated.Value;
-};
-
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
@@ -34,97 +27,101 @@ type Props = BottomTabBarProps & {
 const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
-export default class BottomTabBar extends React.Component<Props, State> {
+export default function BottomTabBar({
-  static defaultProps = {
+  state,
-    keyboardHidesTabBar: false,
+  navigation,
-    adaptive: true,
+  descriptors,
-  };
+  activeBackgroundColor,
+  activeTintColor,
+  adaptive = true,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  keyboardHidesTabBar = false,
+  labelPosition,
+  labelStyle,
+  showIcon,
+  showLabel,
+  style,
+  tabStyle,
+}: Props) {
+  const { colors } = useTheme();
 
-  state = {
+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-    dimensions: Dimensions.get('window'),
+  const [layout, setLayout] = React.useState({ height: 0, width: 0 });
-    layout: { height: 0, width: 0 },
+  const [keyboardShown, setKeyboardShown] = React.useState(false);
-    keyboard: false,
-    visible: new Animated.Value(1),
-  };
 
-  componentDidMount() {
+  const [visible] = React.useState(() => new Animated.Value(0));
-    Dimensions.addEventListener('change', this.handleOrientationChange);
 
-    if (Platform.OS === 'ios') {
+  const { routes } = state;
-      Keyboard.addListener('keyboardWillShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', this.handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide);
-    }
-  }
 
-  componentWillUnmount() {
+  React.useEffect(() => {
-    Dimensions.removeEventListener('change', this.handleOrientationChange);
+    if (keyboardShown) {
-
+      Animated.timing(visible, {
-    if (Platform.OS === 'ios') {
-      Keyboard.removeListener('keyboardWillShow', this.handleKeyboardShow);
-      Keyboard.removeListener('keyboardWillHide', this.handleKeyboardHide);
-    } else {
-      Keyboard.removeListener('keyboardDidShow', this.handleKeyboardShow);
-      Keyboard.removeListener('keyboardDidHide', this.handleKeyboardHide);
-    }
-  }
-
-  private handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-    this.setState({ dimensions: window });
-  };
-
-  private handleKeyboardShow = () =>
-    this.setState({ keyboard: true }, () =>
-      Animated.timing(this.state.visible, {
         toValue: 0,
         duration: 200,
         useNativeDriver: true,
-      }).start()
+      }).start();
-    );
+    }
+  }, [keyboardShown, visible]);
 
-  private handleKeyboardHide = () =>
+  React.useEffect(() => {
-    Animated.timing(this.state.visible, {
+    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-      toValue: 1,
+      setDimensions(window);
-      duration: 250,
+    };
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        this.setState({ keyboard: false });
-      }
-    });
 
-  private handleLayout = (e: LayoutChangeEvent) => {
+    const handleKeyboardShow = () => setKeyboardShown(true);
-    const { layout } = this.state;
-    const { height, width } = e.nativeEvent.layout;
 
-    if (height === layout.height && width === layout.width) {
+    const handleKeyboardHide = () =>
-      return;
+      Animated.timing(visible, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          setKeyboardShown(false);
+        }
+      });
+
+    Dimensions.addEventListener('change', handleOrientationChange);
+
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
     }
 
-    this.setState({
+    return () => {
-      layout: {
+      Dimensions.removeEventListener('change', handleOrientationChange);
-        height,
+
-        width,
+      if (Platform.OS === 'ios') {
-      },
+        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
+      } else {
+        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
+      }
+    };
+  }, [visible]);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setLayout(layout => {
+      if (height === layout.height && width === layout.width) {
+        return layout;
+      } else {
+        return {
+          height,
+          width,
+        };
+      }
     });
   };
 
-  private getLabelText = ({ route }: { route: Route<string> }) => {
+  const shouldUseHorizontalLabels = () => {
-    const { options } = this.props.descriptors[route.key];
-
-    return options.tabBarLabel !== undefined
-      ? options.tabBarLabel
-      : options.title !== undefined
-      ? options.title
-      : route.name;
-  };
-
-  private shouldUseHorizontalLabels = () => {
-    const { state, adaptive, tabStyle, labelPosition } = this.props;
-    const { dimensions } = this.state;
-    const { routes } = state;
     const isLandscape = dimensions.width > dimensions.height;
 
     if (labelPosition) {
@@ -165,126 +162,114 @@ export default class BottomTabBar extends React.Component<Props, State> {
     }
   };
 
-  render() {
+  return (
-    const {
+    <SafeAreaConsumer>
-      state,
+      {insets => (
-      navigation,
+        <Animated.View
-      descriptors,
+          style={[
-      keyboardHidesTabBar,
+            styles.tabBar,
-      activeTintColor,
+            {
-      inactiveTintColor,
+              backgroundColor: colors.card,
-      activeBackgroundColor,
+              borderTopColor: colors.border,
-      inactiveBackgroundColor,
+            },
-      labelStyle,
+            keyboardHidesTabBar
-      showIcon,
+              ? {
-      showLabel,
+                  // When the keyboard is shown, slide down the tab bar
-      allowFontScaling,
+                  transform: [
-      style,
+                    {
-      tabStyle,
+                      translateY: visible.interpolate({
-    } = this.props;
+                        inputRange: [0, 1],
-    const { routes } = state;
+                        outputRange: [layout.height, 0],
+                      }),
+                    },
+                  ],
+                  // Absolutely position the tab bar so that the content is below it
+                  // This is needed to avoid gap at bottom when the tab bar is hidden
+                  position: keyboardShown ? 'absolute' : null,
+                }
+              : null,
+            {
+              height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
+              paddingBottom: insets ? insets.bottom : 0,
+            },
+            style,
+          ]}
+          pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+        >
+          <View style={styles.content} onLayout={handleLayout}>
+            {routes.map((route, index) => {
+              const focused = index === state.index;
+              const { options } = descriptors[route.key];
 
-    return (
+              const onPress = () => {
-      <SafeAreaConsumer>
+                const event = navigation.emit({
-        {insets => (
+                  type: 'tabPress',
-          <Animated.View
+                  target: route.key,
-            style={[
+                });
-              styles.tabBar,
-              keyboardHidesTabBar
-                ? {
-                    // When the keyboard is shown, slide down the tab bar
-                    transform: [
-                      {
-                        translateY: this.state.visible.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [this.state.layout.height, 0],
-                        }),
-                      },
-                    ],
-                    // Absolutely position the tab bar so that the content is below it
-                    // This is needed to avoid gap at bottom when the tab bar is hidden
-                    position: this.state.keyboard ? 'absolute' : null,
-                  }
-                : null,
-              {
-                height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
-                paddingBottom: insets ? insets.bottom : 0,
-              },
-              style,
-            ]}
-            pointerEvents={
-              keyboardHidesTabBar && this.state.keyboard ? 'none' : 'auto'
-            }
-          >
-            <View style={styles.content} onLayout={this.handleLayout}>
-              {routes.map((route, index) => {
-                const focused = index === state.index;
-                const { options } = descriptors[route.key];
 
-                const onPress = () => {
+                if (!focused && !event.defaultPrevented) {
-                  const event = navigation.emit({
+                  navigation.dispatch({
-                    type: 'tabPress',
+                    ...CommonActions.navigate(route.name),
-                    target: route.key,
+                    target: state.key,
                   });
+                }
+              };
 
-                  if (!focused && !event.defaultPrevented) {
+              const onLongPress = () => {
-                    navigation.dispatch({
+                navigation.emit({
-                      ...CommonActions.navigate(route.name),
+                  type: 'tabLongPress',
-                      target: state.key,
+                  target: route.key,
-                    });
+                });
-                  }
+              };
-                };
 
-                const onLongPress = () => {
+              const label =
-                  navigation.emit({
+                options.tabBarLabel !== undefined
-                    type: 'tabLongPress',
+                  ? options.tabBarLabel
-                    target: route.key,
+                  : options.title !== undefined
-                  });
+                  ? options.title
-                };
+                  : route.name;
 
-                const label = this.getLabelText({ route });
+              const accessibilityLabel =
-                const accessibilityLabel =
+                options.tabBarAccessibilityLabel !== undefined
-                  options.tabBarAccessibilityLabel !== undefined
+                  ? options.tabBarAccessibilityLabel
-                    ? options.tabBarAccessibilityLabel
+                  : typeof label === 'string'
-                    : typeof label === 'string'
+                  ? `${label}, tab, ${index + 1} of ${routes.length}`
-                    ? `${label}, tab, ${index + 1} of ${routes.length}`
+                  : undefined;
-                    : undefined;
 
-                return (
+              return (
-                  <NavigationContext.Provider
+                <NavigationContext.Provider
-                    key={route.key}
+                  key={route.key}
-                    value={descriptors[route.key].navigation}
+                  value={descriptors[route.key].navigation}
-                  >
+                >
-                    <BottomTabItem
+                  <BottomTabItem
-                      route={route}
+                    route={route}
-                      focused={focused}
+                    focused={focused}
-                      horizontal={this.shouldUseHorizontalLabels()}
+                    horizontal={shouldUseHorizontalLabels()}
-                      onPress={onPress}
+                    onPress={onPress}
-                      onLongPress={onLongPress}
+                    onLongPress={onLongPress}
-                      accessibilityLabel={accessibilityLabel}
+                    accessibilityLabel={accessibilityLabel}
-                      testID={options.tabBarTestID}
+                    testID={options.tabBarTestID}
-                      allowFontScaling={allowFontScaling}
+                    allowFontScaling={allowFontScaling}
-                      activeTintColor={activeTintColor}
+                    activeTintColor={activeTintColor}
-                      inactiveTintColor={inactiveTintColor}
+                    inactiveTintColor={inactiveTintColor}
-                      activeBackgroundColor={activeBackgroundColor}
+                    activeBackgroundColor={activeBackgroundColor}
-                      inactiveBackgroundColor={inactiveBackgroundColor}
+                    inactiveBackgroundColor={inactiveBackgroundColor}
-                      button={options.tabBarButton}
+                    button={options.tabBarButton}
-                      icon={options.tabBarIcon}
+                    icon={options.tabBarIcon}
-                      label={label}
+                    label={label}
-                      showIcon={showIcon}
+                    showIcon={showIcon}
-                      showLabel={showLabel}
+                    showLabel={showLabel}
-                      labelStyle={labelStyle}
+                    labelStyle={labelStyle}
-                      style={tabStyle}
+                    style={tabStyle}
-                    />
+                  />
-                  </NavigationContext.Provider>
+                </NavigationContext.Provider>
-                );
+              );
-              })}
+            })}
-            </View>
+          </View>
-          </Animated.View>
+        </Animated.View>
-        )}
+      )}
-      </SafeAreaConsumer>
+    </SafeAreaConsumer>
-    );
+  );
-  }
 }
 
 const styles = StyleSheet.create({
@@ -292,9 +277,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: '#fff',
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: 'rgba(0, 0, 0, .3)',
     elevation: 8,
   },
   content: {

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -8,7 +8,8 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
 import { BottomTabBarButtonProps } from '../types';
@@ -113,8 +114,8 @@ export default function BottomTabBarItem({
   onPress,
   onLongPress,
   horizontal,
-  activeTintColor = '#007AFF',
+  activeTintColor: customActiveTintColor,
-  inactiveTintColor = '#8E8E93',
+  inactiveTintColor: customInactiveTintColor,
   activeBackgroundColor = 'transparent',
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
@@ -123,6 +124,20 @@ export default function BottomTabBarItem({
   labelStyle,
   style,
 }: Props) {
+  const { colors } = useTheme();
+
+  const activeTintColor =
+    customActiveTintColor === undefined
+      ? colors.primary
+      : customActiveTintColor;
+
+  const inactiveTintColor =
+    customInactiveTintColor === undefined
+      ? Color(colors.text)
+          .mix(Color(colors.card), 0.5)
+          .hex()
+      : customInactiveTintColor;
+
   const renderLabel = ({ focused }: { focused: boolean }) => {
     if (showLabel === false) {
       return null;

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { TabNavigationState } from '@react-navigation/routers';
+import { useTheme } from '@react-navigation/native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
@@ -25,6 +26,26 @@ type State = {
   loaded: number[];
 };
 
+function SceneContent({
+  isFocused,
+  children,
+}: {
+  isFocused: boolean;
+  children: React.ReactNode;
+}) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      accessibilityElementsHidden={!isFocused}
+      importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.content, { backgroundColor: colors.background }]}
+    >
+      {children}
+    </View>
+  );
+}
+
 export default class BottomTabView extends React.Component<Props, State> {
   static defaultProps = {
     lazy: true,
@@ -97,15 +118,9 @@ export default class BottomTabView extends React.Component<Props, State> {
                   style={StyleSheet.absoluteFill}
                   isVisible={isFocused}
                 >
-                  <View
+                  <SceneContent isFocused={isFocused}>
-                    accessibilityElementsHidden={!isFocused}
-                    importantForAccessibility={
-                      isFocused ? 'auto' : 'no-hide-descendants'
-                    }
-                    style={styles.content}
-                  >
                     {descriptors[route.key].render()}
-                  </View>
+                  </SceneContent>
                 </ResourceSavingScene>
               );
             })}

packages/bottom-tabs/src/views/TabBarIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route } from '@react-navigation/core';
+import { Route } from '@react-navigation/native';
 
 type Props = {
   route: Route<string>;

packages/compat/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.18...@react-navigation/compat@5.0.0-alpha.19) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.17...@react-navigation/compat@5.0.0-alpha.18) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.16...@react-navigation/compat@5.0.0-alpha.17) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.15...@react-navigation/compat@5.0.0-alpha.16) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/README.md

@@ -7,7 +7,7 @@ Compatibility layer to write navigator definitions in static configuration forma
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/compat
+yarn add @react-navigation/native @react-navigation/compat
 ```
 
 ## Usage

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.19",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,15 +24,15 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
     "react": "~16.9.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "~16.9.0"
   },
   "@react-native-community/bob": {

packages/compat/src/CompatScreen.tsx

@@ -3,7 +3,7 @@ import {
   NavigationProp,
   ParamListBase,
   RouteProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';
 

packages/compat/src/NavigationActions.tsx

@@ -1,4 +1,4 @@
-import { CommonActions, NavigationState } from '@react-navigation/core';
+import { CommonActions, NavigationState } from '@react-navigation/native';
 
 export function navigate({
   routeName,

packages/compat/src/StackActions.tsx

@@ -1,4 +1,4 @@
-import { CommonActions } from '@react-navigation/core';
+import { CommonActions } from '@react-navigation/native';
 import { StackActions, StackActionType } from '@react-navigation/routers';
 
 export function reset(): CommonActions.Action {

packages/compat/src/createCompatNavigationProp.tsx

@@ -4,7 +4,7 @@ import {
   ParamListBase,
   NavigationProp,
   RouteProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import * as helpers from './helpers';
 import { CompatNavigationProp } from './types';
 

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -6,7 +6,7 @@ import {
   TypedNavigator,
   NavigationProp,
   RouteProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';

packages/compat/src/createSwitchNavigator.tsx

@@ -2,7 +2,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/compat/src/types.tsx

@@ -1,4 +1,4 @@
-import { ParamListBase, NavigationProp, Route } from '@react-navigation/core';
+import { ParamListBase, NavigationProp, Route } from '@react-navigation/native';
 import * as helpers from './helpers';
 
 export type CompatNavigationProp<

packages/compat/src/useCompatNavigation.tsx

@@ -4,7 +4,7 @@ import {
   useRoute,
   NavigationProp,
   ParamListBase,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import createCompatNavigationProp from './createCompatNavigationProp';
 import { CompatNavigationProp } from './types';
 

packages/compat/src/withNavigation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/core';
+import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import useCompatNavigation from './useCompatNavigation';
 import { CompatNavigationProp } from './types';
 

packages/compat/src/withNavigationFocus.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useIsFocused } from '@react-navigation/core';
+import { useIsFocused } from '@react-navigation/native';
 
 type InjectedProps = {
   isFocused: boolean;

packages/core/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.28...@react-navigation/core@5.0.0-alpha.29) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.27...@react-navigation/core@5.0.0-alpha.28) (2019-12-16)
+
+
+### Bug Fixes
+
+* use Partial type for initialParam ([#206](https://github.com/react-navigation/navigation-ex/issues/206)) ([c3d3748](https://github.com/react-navigation/navigation-ex/commit/c3d374814308b0bd6d259099444f0f24593f4d7e))
+
+
+### Features
+
+* add nested config in deep linking ([#210](https://github.com/react-navigation/navigation-ex/issues/210)) ([8002d51](https://github.com/react-navigation/navigation-ex/commit/8002d5179524a7211c37760a4ed45e8c12af4358)), closes [#154](https://github.com/react-navigation/navigation-ex/issues/154)
+
+
+
+
+
 # [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.26...@react-navigation/core@5.0.0-alpha.27) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.29",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,15 +35,15 @@
     "use-subscription": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
+    "@babel/core": "^7.7.5",
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
     "@types/shortid": "^0.0.29",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
-    "react-native-testing-library": "^1.9.1",
+    "react-native-testing-library": "^1.12.0",
     "react-test-renderer": "~16.9.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "react": "~16.9.0"

packages/core/src/__tests__/getStateFromPath.test.tsx

@@ -127,3 +127,238 @@ it('handles route without param', () => {
 it('returns undefined for invalid path', () => {
   expect(getStateFromPath('//')).toBe(undefined);
 });
+
+it('converts path string to initial state with config with nested screens', () => {
+  expect(
+    getStateFromPath(
+      '/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true',
+      {
+        Foo: {
+          Foe: 'few',
+        },
+        Bar: 'bar/:type/:fruit',
+        Baz: {
+          path: 'baz/:author',
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, c => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      }
+    )
+  ).toEqual({
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Bar',
+                    params: { fruit: 'apple', type: 'sweet' },
+                    state: {
+                      routes: [
+                        {
+                          name: 'Baz',
+                          params: {
+                            author: 'Jane',
+                            count: 10,
+                            answer: '42',
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});
+
+it('converts path string to initial state with config with nested screens and unused configs', () => {
+  expect(
+    getStateFromPath('/few/baz/jane?count=10&answer=42&valid=true', {
+      Foo: {
+        Foe: 'few',
+      },
+      Baz: {
+        path: 'baz/:author',
+        parse: {
+          author: (author: string) =>
+            author.replace(/^\w/, c => c.toUpperCase()),
+          count: Number,
+          valid: Boolean,
+        },
+      },
+    })
+  ).toEqual({
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    params: {
+                      author: 'Jane',
+                      count: 10,
+                      answer: '42',
+                      valid: true,
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});
+
+it('handles parse in nested object with parse in it', () => {
+  expect(
+    getStateFromPath(
+      '/bar/sweet/apple/few/bis/jane?count=10&answer=42&valid=true',
+      {
+        Foo: {
+          Foe: 'few',
+        },
+        Bar: 'bar/:type/:fruit',
+        Baz: {
+          Bis: {
+            path: 'bis/:author',
+            parse: {
+              author: (author: string) =>
+                author.replace(/^\w/, c => c.toUpperCase()),
+              count: Number,
+              valid: Boolean,
+            },
+          },
+        },
+      }
+    )
+  ).toEqual({
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Foe',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Baz',
+                          state: {
+                            routes: [
+                              {
+                                name: 'Bis',
+                                params: {
+                                  author: 'Jane',
+                                  count: 10,
+                                  answer: '42',
+                                  valid: true,
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});
+
+it('handles parse in nested object for second route depth', () => {
+  expect(
+    getStateFromPath('/baz', {
+      Foo: {
+        path: 'foo',
+        Foe: 'foe',
+        Bar: {
+          Baz: 'baz',
+        },
+      },
+    })
+  ).toEqual({
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});
+
+it('handles parse in nested object for second route depth and and path and parse in roots', () => {
+  expect(
+    getStateFromPath('/baz', {
+      Foo: {
+        path: 'foo/:id',
+        parse: {
+          id: Number,
+        },
+        Foe: 'foe',
+        Bar: {
+          path: 'bar/:id',
+          parse: {
+            id: Number,
+          },
+          Baz: 'baz',
+        },
+      },
+    })
+  ).toEqual({
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});

packages/core/src/getStateFromPath.tsx

@@ -1,11 +1,18 @@
 import escape from 'escape-string-regexp';
 import queryString from 'query-string';
-import { NavigationState, PartialState } from './types';
+import { NavigationState, PartialState, InitialState } from './types';
 
 type ParseConfig = Record<string, (value: string) => any>;
 
 type Options = {
-  [routeName: string]: string | { path: string; parse?: ParseConfig };
+  [routeName: string]: string | { path: string; parse?: ParseConfig } | Options;
+};
+
+type RouteConfig = {
+  match: RegExp;
+  pattern: string;
+  routeNames: string[];
+  parse: Record<string, (value: string) => any> | undefined;
 };
 
 /**
@@ -31,27 +38,10 @@ export default function getStateFromPath(
   path: string,
   options: Options = {}
 ): PartialState<NavigationState> | undefined {
-  // Create a normalized config array which will be easier to use
+  // Create a normalized configs array which will be easier to use
-  const routeConfig = Object.keys(options).map(key => {
+  const configs = ([] as RouteConfig[]).concat(
-    const pattern =
+    ...Object.keys(options).map(key => createNormalizedConfigs(key, options))
-      typeof options[key] === 'string'
+  );
-        ? (options[key] as string)
-        : (options[key] as { path: string }).path;
-
-    // Create a regex from the provided path pattern
-    // With the pattern, we can match segements containing params and extract them
-    const match = new RegExp(
-      '^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
-    );
-
-    return {
-      match,
-      pattern,
-      routeName: key,
-      // @ts-ignore
-      parse: options[key].parse,
-    };
-  });
 
   let result: PartialState<NavigationState> | undefined;
   let current: PartialState<NavigationState> | undefined;
@@ -62,16 +52,16 @@ export default function getStateFromPath(
     .replace(/\?.*/, ''); // Remove query params which we will handle later
 
   while (remaining) {
-    let routeName;
+    let routeNames;
     let params;
 
     // Go through all configs, and see if the next path segment matches our regex
-    for (const config of routeConfig) {
+    for (const config of configs) {
       const match = remaining.match(config.match);
 
       // If our regex matches, we need to extract params from the path
       if (match) {
-        routeName = config.routeName;
+        routeNames = config.routeNames;
 
         const paramPatterns = config.pattern
           .split('/')
@@ -99,20 +89,54 @@ export default function getStateFromPath(
     }
 
     // If we hadn't matched any segments earlier, use the path as route name
-    if (routeName === undefined) {
+    if (routeNames === undefined) {
       const segments = remaining.split('/');
 
-      routeName = decodeURIComponent(segments[0]);
+      routeNames = [decodeURIComponent(segments[0])];
       segments.shift();
       remaining = segments.join('/');
     }
 
-    const state = {
+    let state: InitialState;
-      routes: [{ name: routeName, params }],
+
-    };
+    if (routeNames.length === 1) {
+      state = {
+        routes: [
+          { name: routeNames.shift() as string, ...(params && { params }) },
+        ],
+      };
+    } else {
+      state = {
+        routes: [{ name: routeNames.shift() as string, state: { routes: [] } }],
+      };
+
+      let helper = state.routes[0].state as InitialState;
+      let routeName;
+
+      while ((routeName = routeNames.shift())) {
+        if (routeNames.length === 0) {
+          helper.routes.push({
+            name: routeName,
+            ...(params && { params }),
+          });
+        } else {
+          helper.routes[0] = {
+            name: routeName,
+            state: {
+              routes: [],
+            },
+          };
+          helper = helper.routes[0].state as InitialState;
+        }
+      }
+    }
 
     if (current) {
-      // The state should be nested inside the route we parsed before
+      // The state should be nested inside the deepest route we parsed before
+      while (current.routes[0].state) {
+        current = current.routes[0].state;
+      }
+
       current.routes[0].state = state;
     } else {
       result = state;
@@ -128,17 +152,20 @@ export default function getStateFromPath(
   const query = path.split('?')[1];
 
   if (query) {
+    while (current.routes[0].state) {
+      // The query params apply to the deepest route
+      current = current.routes[0].state;
+    }
+
     const route = current.routes[0];
 
     const params = queryString.parse(query);
-    const config = options[route.name]
+    const parseFunction = findParseConfigForRoute(route.name, options);
-      ? (options[route.name] as { parse?: ParseConfig }).parse
-      : undefined;
 
-    if (config) {
+    if (parseFunction) {
       Object.keys(params).forEach(name => {
-        if (config[name] && typeof params[name] === 'string') {
+        if (parseFunction[name] && typeof params[name] === 'string') {
-          params[name] = config[name](params[name] as string);
+          params[name] = parseFunction[name](params[name] as string);
         }
       });
     }
@@ -148,3 +175,89 @@ export default function getStateFromPath(
 
   return result;
 }
+
+function createNormalizedConfigs(
+  key: string,
+  routeConfig: Options,
+  routeNames: string[] = []
+): RouteConfig[] {
+  const configs = [];
+
+  routeNames.push(key);
+
+  const value = routeConfig[key];
+
+  if (typeof value === 'string') {
+    // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
+    configs.push(createConfigItem(routeNames, value));
+  } else if (typeof value === 'object') {
+    // if an object is specified as the value (e.g. Foo: { ... }),
+    // it could have config object and optionally nested config
+    Object.keys(value).forEach(nestedKey => {
+      if (nestedKey === 'path') {
+        configs.push(
+          createConfigItem(
+            routeNames,
+            value[nestedKey] as string,
+            value.parse ? (value.parse as ParseConfig) : undefined
+          )
+        );
+      } else if (nestedKey === 'parse') {
+        // We handle custom parse function when a `path` is specified (in nestedKey === path)
+      } else {
+        // If the name of the key is not `path` or `parse`, it's a nested config for route
+        // So we need to traverse into it and collect the configs
+        const result = createNormalizedConfigs(
+          nestedKey,
+          routeConfig[key] as Options,
+          routeNames
+        );
+
+        configs.push(...result);
+      }
+    });
+  }
+
+  routeNames.pop();
+
+  return configs;
+}
+
+function createConfigItem(
+  routeNames: string[],
+  pattern: string,
+  parse?: ParseConfig
+): RouteConfig {
+  const match = new RegExp(
+    '^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
+  );
+
+  return {
+    match,
+    pattern,
+    // The routeNames array is mutated, so copy it to keep the current state
+    routeNames: [...routeNames],
+    parse,
+  };
+}
+
+function findParseConfigForRoute(
+  routeName: string,
+  config: Options
+): ParseConfig | undefined {
+  if (config[routeName]) {
+    return (config[routeName] as { parse?: ParseConfig }).parse;
+  }
+
+  for (const name in config) {
+    if (typeof config[name] === 'object') {
+      const parse = findParseConfigForRoute(routeName, config[name] as Options);
+
+      if (parse) {
+        return parse;
+      }
+    }
+  }
+
+  return undefined;
+}

packages/core/src/types.tsx

@@ -533,7 +533,7 @@ export type RouteConfig<
   /**
    * Initial params object for the route.
    */
-  initialParams?: ParamList[RouteName];
+  initialParams?: Partial<ParamList[RouteName]>;
 } & (
   | {
       /**

packages/drawer/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.29...@react-navigation/drawer@5.0.0-alpha.30) (2019-12-19)
+
+
+### Bug Fixes
+
+* set screen background in drawer from theme ([0635365](https://github.com/react-navigation/navigation-ex/commit/0635365483bf5ac38e75191b4ba8f52cf6d73896))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.28...@react-navigation/drawer@5.0.0-alpha.29) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.27...@react-navigation/drawer@5.0.0-alpha.28) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.26...@react-navigation/drawer@5.0.0-alpha.27) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.25...@react-navigation/drawer@5.0.0-alpha.26) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/README.md

@@ -7,7 +7,7 @@ Bottom tab navigator for React Navigation following iOS design guidelines.
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/drawer
+yarn add @react-navigation/native @react-navigation/drawer
 ```
 
 Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.26",
+  "version": "5.0.0-alpha.30",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,28 +34,29 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18",
+    "color": "^3.1.2"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.22",
+    "@types/react-native": "^0.60.25",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.11",
+    "react-native-screens": "^2.0.0-alpha.19",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-safe-area-context": "^0.6.0",
     "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {

packages/drawer/src/index.tsx

@@ -10,6 +10,7 @@ export { default as DrawerView } from './views/DrawerView';
 export { default as DrawerItem } from './views/DrawerItem';
 export { default as DrawerItemList } from './views/DrawerItemList';
 export { default as DrawerContent } from './views/DrawerContent';
+export { default as DrawerContentScrollView } from './views/DrawerContentScrollView';
 
 /**
  * Utilities

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -3,7 +3,7 @@ import {
   createNavigatorFactory,
   useNavigationBuilder,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   DrawerNavigationState,
   DrawerRouterOptions,
@@ -19,7 +19,7 @@ import {
 
 type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
   DrawerRouterOptions &
-  Partial<DrawerNavigationConfig>;
+  DrawerNavigationConfig;
 
 function DrawerNavigator({
   initialRouteName,

packages/drawer/src/types.tsx

@@ -6,7 +6,7 @@ import {
   NavigationProp,
   Descriptor,
   NavigationHelpers,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { DrawerNavigationState } from '@react-navigation/routers';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 
@@ -20,14 +20,14 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   /**
    * Position of the drawer on the screen. Defaults to `left`.
    */
-  drawerPosition: 'left' | 'right';
+  drawerPosition?: 'left' | 'right';
   /**
    * Type of the drawer. It determines how the drawer looks and animates.
    * - `front`: Traditional drawer which covers the screen with a overlay behind it.
    * - `back`: The drawer is revealed behind the screen on swipe.
    * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
    */
-  drawerType: 'front' | 'back' | 'slide';
+  drawerType?: 'front' | 'back' | 'slide';
   /**
    * How far from the edge of the screen the swipe gesture should activate.
    */
@@ -35,12 +35,12 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   /**
    * Whether the statusbar should be hidden when the drawer is pulled or opens,
    */
-  hideStatusBar: boolean;
+  hideStatusBar?: boolean;
   /**
    * Whether the keyboard should be dismissed when the swipe gesture begins.
    * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
    */
-  keyboardDismissMode: 'on-drag' | 'none';
+  keyboardDismissMode?: 'on-drag' | 'none';
   /**
    * Minimum swipe distance threshold that should activate opening the drawer.
    */
@@ -53,7 +53,7 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   /**
    * Animation of the statusbar when hiding it. use in combination with `hideStatusBar`.
    */
-  statusBarAnimation: 'slide' | 'none' | 'fade';
+  statusBarAnimation?: 'slide' | 'none' | 'fade';
   /**
    * Props to pass to the underlying pan gesture handler.
    */
@@ -62,7 +62,7 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * Whether the screens should render the first time they are accessed. Defaults to `true`.
    * Set it to `false` if you want to render all screens on initial render.
    */
-  lazy: boolean;
+  lazy?: boolean;
   /**
    * Whether a screen should be unmounted when navigating away from it.
    * Defaults to `false`.
@@ -72,7 +72,7 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * Function that returns React element to render as the content of the drawer, for example, navigation items.
    * Defaults to `DrawerContent`.
    */
-  drawerContent: (props: DrawerContentComponentProps<T>) => React.ReactNode;
+  drawerContent?: (props: DrawerContentComponentProps<T>) => React.ReactNode;
   /**
    * Options for the content component which will be passed as props.
    */
@@ -121,7 +121,7 @@ export type DrawerNavigationOptions = {
 
 export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {
   state: DrawerNavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
   /**
    * Animated node which represents the current progress of the drawer's open state.

packages/drawer/src/views/DrawerContent.tsx

@@ -1,36 +1,12 @@
 import * as React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { useSafeArea } from 'react-native-safe-area-context';
 import DrawerItemList from './DrawerItemList';
 import { DrawerContentComponentProps } from '../types';
+import DrawerContentScrollView from './DrawerContentScrollView';
 
-export default function DrawerContent({
+export default function DrawerContent(props: DrawerContentComponentProps) {
-  contentContainerStyle,
-  style,
-  drawerPosition,
-  ...rest
-}: DrawerContentComponentProps) {
-  const insets = useSafeArea();
-
   return (
-    <ScrollView
+    <DrawerContentScrollView {...props}>
-      contentContainerStyle={[
+      <DrawerItemList {...props} />
-        {
+    </DrawerContentScrollView>
-          paddingTop: insets.top + 4,
-          paddingLeft: drawerPosition === 'left' ? insets.left : 0,
-          paddingRight: drawerPosition === 'right' ? insets.right : 0,
-        },
-        contentContainerStyle,
-      ]}
-      style={[styles.container, style]}
-    >
-      <DrawerItemList {...rest} />
-    </ScrollView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

packages/drawer/src/views/DrawerContentScrollView.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ScrollView, StyleSheet, ScrollViewProps } from 'react-native';
+import { useSafeArea } from 'react-native-safe-area-context';
+
+type Props = ScrollViewProps & {
+  drawerPosition: 'left' | 'right';
+  children: React.ReactNode;
+};
+
+export default function DrawerContentScrollView({
+  contentContainerStyle,
+  style,
+  drawerPosition,
+  children,
+  ...rest
+}: Props) {
+  const insets = useSafeArea();
+
+  return (
+    <ScrollView
+      {...rest}
+      contentContainerStyle={[
+        {
+          paddingTop: insets.top + 4,
+          paddingLeft: drawerPosition === 'left' ? insets.left : 0,
+          paddingRight: drawerPosition === 'right' ? insets.right : 0,
+        },
+        contentContainerStyle,
+      ]}
+      style={[styles.container, style]}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/drawer/src/views/DrawerItem.tsx

@@ -7,6 +7,8 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+import Color from 'color';
 import TouchableItem from './TouchableItem';
 
 type Props = {
@@ -61,19 +63,29 @@ type Props = {
 /**
  * A component used to show an action item with an icon and a label in a navigation drawer.
  */
-export default function DrawerItem({
+export default function DrawerItem(props: Props) {
-  icon,
+  const { colors } = useTheme();
-  label,
+
-  labelStyle,
+  const {
-  focused = false,
+    icon,
-  activeTintColor = '#6200ee',
+    label,
-  inactiveTintColor = 'rgba(0, 0, 0, .68)',
+    labelStyle,
-  activeBackgroundColor = 'rgba(98, 0, 238, 0.12)',
+    focused = false,
-  inactiveBackgroundColor = 'transparent',
+    activeTintColor = colors.primary,
-  style,
+    inactiveTintColor = Color(colors.text)
-  onPress,
+      .alpha(0.68)
-  ...rest
+      .rgb()
-}: Props) {
+      .string(),
+    activeBackgroundColor = Color(activeTintColor)
+      .alpha(0.12)
+      .rgb()
+      .string(),
+    inactiveBackgroundColor = 'transparent',
+    style,
+    onPress,
+    ...rest
+  } = props;
+
   const { borderRadius = 4 } = StyleSheet.flatten(style || {});
   const color = focused ? activeTintColor : inactiveTintColor;
   const backgroundColor = focused

packages/drawer/src/views/DrawerItemList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CommonActions } from '@react-navigation/core';
+import { CommonActions } from '@react-navigation/native';
 import {
   DrawerActions,
   DrawerNavigationState,

packages/drawer/src/views/DrawerView.tsx

@@ -13,6 +13,7 @@ import {
   DrawerNavigationState,
   DrawerActions,
 } from '@react-navigation/routers';
+import { useTheme } from '@react-navigation/native';
 
 import DrawerGestureContext from '../utils/DrawerGestureContext';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
@@ -26,16 +27,10 @@ import {
   DrawerContentComponentProps,
 } from '../types';
 
-type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
+type Props = DrawerNavigationConfig & {
   state: DrawerNavigationState;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
-  overlayColor: string;
-};
-
-type State = {
-  loaded: number[];
-  drawerWidth: number;
 };
 
 const getDefaultDrawerWidth = ({
@@ -62,49 +57,52 @@ const getDefaultDrawerWidth = ({
 /**
  * Component that renders the drawer.
  */
-export default class DrawerView extends React.PureComponent<Props, State> {
+export default function DrawerView({
-  static defaultProps = {
+  state,
-    lazy: true,
+  navigation,
-    drawerContent: (props: DrawerContentComponentProps) => (
+  descriptors,
-      <DrawerContent {...props} />
+  lazy = true,
-    ),
+  drawerContent = (props: DrawerContentComponentProps) => (
-    drawerPosition: I18nManager.isRTL ? 'right' : 'left',
+    <DrawerContent {...props} />
-    keyboardDismissMode: 'on-drag',
+  ),
-    overlayColor: 'rgba(0, 0, 0, 0.5)',
+  drawerPosition = I18nManager.isRTL ? 'right' : 'left',
-    drawerType: 'front',
+  keyboardDismissMode = 'on-drag',
-    hideStatusBar: false,
+  overlayColor = 'rgba(0, 0, 0, 0.5)',
-    statusBarAnimation: 'slide',
+  drawerType = 'front',
-  };
+  hideStatusBar = false,
+  statusBarAnimation = 'slide',
+  drawerContentOptions,
+  drawerStyle,
+  edgeWidth,
+  gestureHandlerProps,
+  minSwipeDistance,
+  sceneContainerStyle,
+  unmountInactiveScreens,
+}: Props) {
+  const [loaded, setLoaded] = React.useState([state.index]);
+  const [drawerWidth, setDrawerWidth] = React.useState(() =>
+    getDefaultDrawerWidth(Dimensions.get('window'))
+  );
 
-  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+  const drawerGestureRef = React.useRef<PanGestureHandler>(null);
-    const { index } = nextProps.state;
 
-    return {
+  const { colors } = useTheme();
-      // Set the current tab to be loaded if it was not loaded before
+
-      loaded: prevState.loaded.includes(index)
+  React.useEffect(() => {
-        ? prevState.loaded
+    const updateWidth = ({ window }: { window: ScaledSize }) => {
-        : [...prevState.loaded, index],
+      setDrawerWidth(getDefaultDrawerWidth(window));
     };
+
+    Dimensions.addEventListener('change', updateWidth);
+
+    return () => Dimensions.removeEventListener('change', updateWidth);
+  }, []);
+
+  if (!loaded.includes(state.index)) {
+    setLoaded([...loaded, state.index]);
   }
 
-  state: State = {
+  const handleDrawerOpen = () => {
-    loaded: [this.props.state.index],
-    drawerWidth: getDefaultDrawerWidth(Dimensions.get('window')),
-  };
-
-  componentDidMount() {
-    Dimensions.addEventListener('change', this.updateWidth);
-  }
-
-  componentWillUnmount() {
-    Dimensions.removeEventListener('change', this.updateWidth);
-  }
-
-  private drawerGestureRef = React.createRef<PanGestureHandler>();
-
-  private handleDrawerOpen = () => {
-    const { state, navigation } = this.props;
-
     navigation.dispatch({
       ...DrawerActions.openDrawer(),
       target: state.key,
@@ -113,9 +111,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     navigation.emit({ type: 'drawerOpen' });
   };
 
-  private handleDrawerClose = () => {
+  const handleDrawerClose = () => {
-    const { state, navigation } = this.props;
-
     navigation.dispatch({
       ...DrawerActions.closeDrawer(),
       target: state.key,
@@ -124,24 +120,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     navigation.emit({ type: 'drawerClose' });
   };
 
-  private updateWidth = ({ window }: { window: ScaledSize }) => {
+  const renderNavigationView = ({ progress }: any) => {
-    const drawerWidth = getDefaultDrawerWidth(window);
-
-    if (this.state.drawerWidth !== drawerWidth) {
-      this.setState({ drawerWidth });
-    }
-  };
-
-  private renderNavigationView = ({ progress }: any) => {
-    const {
-      state,
-      navigation,
-      descriptors,
-      drawerPosition,
-      drawerContent,
-      drawerContentOptions,
-    } = this.props;
-
     return drawerContent({
       ...drawerContentOptions,
       progress: progress,
@@ -152,11 +131,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     });
   };
 
-  private renderContent = () => {
+  const renderContent = () => {
-    let { lazy, state, descriptors, unmountInactiveScreens } = this.props;
-
-    const { loaded } = this.state;
-
     return (
       <ScreenContainer style={styles.content}>
         {state.routes.map((route, index) => {
@@ -164,7 +139,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
             return null;
           }
 
-          if (lazy && !loaded.includes(index)) {
+          if (lazy && !loaded.includes(index) && index !== state.index) {
             // Don't render a screen if we've never navigated to it
             return null;
           }
@@ -186,58 +161,45 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     );
   };
 
-  private setDrawerGestureRef = (ref: PanGestureHandler | null) => {
+  const activeKey = state.routes[state.index].key;
-    // @ts-ignore
+  const { gestureEnabled } = descriptors[activeKey].options;
-    this.drawerGestureRef.current = ref;
-  };
 
-  render() {
+  return (
-    const {
+    <SafeAreaProviderCompat>
-      state,
+      <DrawerGestureContext.Provider value={drawerGestureRef}>
-      descriptors,
+        <Drawer
-      drawerType,
+          open={state.isDrawerOpen}
-      drawerPosition,
+          gestureEnabled={gestureEnabled !== false}
-      overlayColor,
+          onOpen={handleDrawerOpen}
-      sceneContainerStyle,
+          onClose={handleDrawerClose}
-      drawerStyle,
+          onGestureRef={ref => {
-      edgeWidth,
+            // @ts-ignore
-      minSwipeDistance,
+            drawerGestureRef.current = ref;
-      hideStatusBar,
+          }}
-      statusBarAnimation,
+          gestureHandlerProps={gestureHandlerProps}
-      gestureHandlerProps,
+          drawerType={drawerType}
-    } = this.props;
+          drawerPosition={drawerPosition}
-
+          sceneContainerStyle={[
-    const { drawerWidth } = this.state;
+            { backgroundColor: colors.background },
-
+            sceneContainerStyle,
-    const activeKey = state.routes[state.index].key;
+          ]}
-    const { gestureEnabled } = descriptors[activeKey].options;
+          drawerStyle={[
-
+            { width: drawerWidth, backgroundColor: colors.card },
-    return (
+            drawerStyle,
-      <SafeAreaProviderCompat>
+          ]}
-        <DrawerGestureContext.Provider value={this.drawerGestureRef}>
+          overlayStyle={{ backgroundColor: overlayColor }}
-          <Drawer
+          swipeEdgeWidth={edgeWidth}
-            open={state.isDrawerOpen}
+          swipeDistanceThreshold={minSwipeDistance}
-            gestureEnabled={gestureEnabled !== false}
+          hideStatusBar={hideStatusBar}
-            onOpen={this.handleDrawerOpen}
+          statusBarAnimation={statusBarAnimation}
-            onClose={this.handleDrawerClose}
+          renderDrawerContent={renderNavigationView}
-            onGestureRef={this.setDrawerGestureRef}
+          renderSceneContent={renderContent}
-            gestureHandlerProps={gestureHandlerProps}
+          keyboardDismissMode={keyboardDismissMode}
-            drawerType={drawerType}
+          drawerPostion={drawerPosition}
-            drawerPosition={drawerPosition}
+        />
-            sceneContainerStyle={sceneContainerStyle}
+      </DrawerGestureContext.Provider>
-            drawerStyle={[{ width: drawerWidth }, drawerStyle]}
+    </SafeAreaProviderCompat>
-            overlayStyle={{ backgroundColor: overlayColor }}
+  );
-            swipeEdgeWidth={edgeWidth}
-            swipeDistanceThreshold={minSwipeDistance}
-            hideStatusBar={hideStatusBar}
-            statusBarAnimation={statusBarAnimation}
-            renderDrawerContent={this.renderNavigationView}
-            renderSceneContent={this.renderContent}
-          />
-        </DrawerGestureContext.Provider>
-      </SafeAreaProviderCompat>
-    );
-  }
 }
 
 const styles = StyleSheet.create({

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.26...@react-navigation/material-bottom-tabs@5.0.0-alpha.27) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.25...@react-navigation/material-bottom-tabs@5.0.0-alpha.26) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.24...@react-navigation/material-bottom-tabs@5.0.0-alpha.25) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.23...@react-navigation/material-bottom-tabs@5.0.0-alpha.24) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.22...@react-navigation/material-bottom-tabs@5.0.0-alpha.23) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/README.md

@@ -7,7 +7,7 @@ React Navigation integration for [bottom navigation](https://material.io/design/
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/material-bottom-tabs
+yarn add @react-navigation/native @react-navigation/material-bottom-tabs
 ```
 
 Setup `react-native-paper` following the [Getting Started guide](https://callstack.github.io/react-native-paper/getting-started.html).

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0-alpha.27",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,22 +34,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.22",
+    "@types/react-native": "^0.60.25",
     "@types/react-native-vector-icons": "^6.4.4",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-paper": "^3.2.1",
+    "react-native-paper": "^3.3.0",
     "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-paper": "^3.0.0",

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -3,7 +3,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/material-bottom-tabs/src/types.tsx

@@ -4,7 +4,7 @@ import {
   Descriptor,
   NavigationProp,
   NavigationHelpers,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type MaterialBottomTabNavigationEventMap = {

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { BottomNavigation } from 'react-native-paper';
+import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import {
@@ -25,9 +25,25 @@ export default function MaterialBottomTabView({
   descriptors,
   ...rest
 }: Props) {
+  const { dark, colors } = useTheme();
+
+  const theme = React.useMemo(() => {
+    const t = dark ? DarkTheme : DefaultTheme;
+
+    return {
+      ...t,
+      colors: {
+        ...t.colors,
+        ...colors,
+        surface: colors.card,
+      },
+    };
+  }, [colors, dark]);
+
   return (
     <BottomNavigation
       {...rest}
+      theme={theme}
       navigationState={state}
       onIndexChange={(index: number) =>
         navigation.dispatch({

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.24...@react-navigation/material-top-tabs@5.0.0-alpha.25) (2019-12-19)
+
+
+### Bug Fixes
+
+* fix backgroundColor in sceneContainerStyle overriden by theme ([ebd145a](https://github.com/react-navigation/navigation-ex/commit/ebd145a09d80f119070a14a8d4940b5757b5e7fb)), closes [#215](https://github.com/react-navigation/navigation-ex/issues/215)
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.23...@react-navigation/material-top-tabs@5.0.0-alpha.24) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.22...@react-navigation/material-top-tabs@5.0.0-alpha.23) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.21...@react-navigation/material-top-tabs@5.0.0-alpha.22) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.20...@react-navigation/material-top-tabs@5.0.0-alpha.21) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/README.md

@@ -7,7 +7,7 @@ React Navigation integration for animated tab view component from [`react-native
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/material-top-tabs react-native-tab-view
+yarn add @react-navigation/native @react-navigation/material-top-tabs react-native-tab-view
 ```
 
 Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated)..

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.25",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,22 +34,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18",
+    "color": "^3.1.2"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.22",
+    "@types/react-native": "^0.60.25",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-tab-view": "^2.11.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -3,7 +3,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/material-top-tabs/src/types.tsx

@@ -6,7 +6,7 @@ import {
   NavigationHelpers,
   Route,
   NavigationProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { TabNavigationState } from '@react-navigation/routers';
 
 export type MaterialTopTabNavigationEventMap = {

packages/material-top-tabs/src/views/MaterialTopTabBar.tsx

@@ -1,29 +1,46 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { TabBar } from 'react-native-tab-view';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 import { MaterialTopTabBarProps } from '../types';
 
-export default function TabBarTop({
+export default function TabBarTop(props: MaterialTopTabBarProps) {
-  state,
+  const { colors } = useTheme();
-  navigation,
+
-  descriptors,
+  const {
-  activeTintColor = 'rgba(255, 255, 255, 1)',
+    state,
-  inactiveTintColor = 'rgba(255, 255, 255, 0.7)',
+    navigation,
-  allowFontScaling = true,
+    descriptors,
-  iconStyle,
+    activeTintColor = colors.text,
-  labelStyle,
+    inactiveTintColor = Color(activeTintColor)
-  showIcon = false,
+      .alpha(0.5)
-  showLabel = true,
+      .rgb()
-  ...rest
+      .string(),
-}: MaterialTopTabBarProps) {
+    allowFontScaling = true,
+    showIcon = false,
+    showLabel = true,
+    pressColor = Color(activeTintColor)
+      .alpha(0.08)
+      .rgb()
+      .string(),
+    iconStyle,
+    labelStyle,
+    indicatorStyle,
+    style,
+    ...rest
+  } = props;
+
   return (
     <TabBar
       {...rest}
       navigationState={state}
       activeColor={activeTintColor}
       inactiveColor={inactiveTintColor}
+      indicatorStyle={[{ backgroundColor: colors.primary }, indicatorStyle]}
+      style={[{ backgroundColor: colors.card }, style]}
+      pressColor={pressColor}
       getAccessibilityLabel={({ route }) =>
         descriptors[route.key].options.tabBarAccessibilityLabel
       }

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import MaterialTopTabBar from './MaterialTopTabBar';
@@ -15,17 +15,22 @@ type Props = MaterialTopTabNavigationConfig & {
   state: TabNavigationState;
   navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
-  tabBarPosition: 'top' | 'bottom';
+  tabBarPosition?: 'top' | 'bottom';
 };
 
-export default class MaterialTopTabView extends React.PureComponent<Props> {
+export default function MaterialTopTabView({
-  static defaultProps = {
+  lazyPlaceholder,
-    tabBarPosition: 'top',
+  tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
-  };
+  tabBarOptions,
-
+  state,
-  private renderLazyPlaceholder = (props: { route: Route<string> }) => {
+  navigation,
-    const { lazyPlaceholder } = this.props;
+  descriptors,
+  sceneContainerStyle,
+  ...rest
+}: Props) {
+  const { colors } = useTheme();
 
+  const renderLazyPlaceholder = (props: { route: Route<string> }) => {
     if (lazyPlaceholder != null) {
       return lazyPlaceholder(props);
     }
@@ -33,21 +38,12 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
     return null;
   };
 
-  private renderTabBar = (props: SceneRendererProps) => {
+  const renderTabBar = (props: SceneRendererProps) => {
-    const { state, descriptors } = this.props;
     const route = state.routes[state.index];
     const options = descriptors[route.key].options;
 
     const tabBarVisible = options.tabBarVisible !== false;
 
-    const {
-      navigation,
-      tabBar = (props: MaterialTopTabBarProps) => (
-        <MaterialTopTabBar {...props} />
-      ),
-      tabBarOptions,
-    } = this.props;
-
     if (tabBarVisible === false) {
       return null;
     }
@@ -61,45 +57,25 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
     });
   };
 
-  private handleSwipeStart = () =>
+  return (
-    this.props.navigation.emit({
+    <TabView
-      type: 'swipeStart',
+      {...rest}
-    });
+      onIndexChange={index =>
-
+        navigation.dispatch({
-  private handleSwipeEnd = () =>
+          ...TabActions.jumpTo(state.routes[index].name),
-    this.props.navigation.emit({
+          target: state.key,
-      type: 'swipeEnd',
+        })
-    });
+      }
-
+      renderScene={({ route }) => descriptors[route.key].render()}
-  render() {
+      navigationState={state}
-    const {
+      renderTabBar={renderTabBar}
-      /* eslint-disable @typescript-eslint/no-unused-vars */
+      renderLazyPlaceholder={renderLazyPlaceholder}
-      lazyPlaceholder,
+      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
-      tabBar,
+      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
-      tabBarOptions,
+      sceneContainerStyle={[
-      /* eslint-enable @typescript-eslint/no-unused-vars */
+        { backgroundColor: colors.background },
-      state,
+        sceneContainerStyle,
-      navigation,
+      ]}
-      descriptors,
+    />
-      ...rest
+  );
-    } = this.props;
-
-    return (
-      <TabView
-        {...rest}
-        onIndexChange={index =>
-          navigation.dispatch({
-            ...TabActions.jumpTo(state.routes[index].name),
-            target: state.key,
-          })
-        }
-        renderScene={({ route }) => descriptors[route.key].render()}
-        navigationState={state}
-        renderTabBar={this.renderTabBar}
-        renderLazyPlaceholder={this.renderLazyPlaceholder}
-        onSwipeStart={this.handleSwipeStart}
-        onSwipeEnd={this.handleSwipeEnd}
-      />
-    );
-  }
 }

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.18...@react-navigation/native-stack@5.0.0-alpha.19) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.17...@react-navigation/native-stack@5.0.0-alpha.18) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.16...@react-navigation/native-stack@5.0.0-alpha.17) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.15...@react-navigation/native-stack@5.0.0-alpha.16) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
 
 

packages/native-stack/README.md

@@ -2,21 +2,39 @@
 
 Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.
 
-Expo is currently not supported as it includes an older version of `react-native-screens`.
+Expo SDK 35 and lower is not supported as it includes an older version of `react-native-screens`.
 
 ## Installation
 
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/native-stack
+yarn add @react-navigation/native @react-navigation/native-stack
+```
+Or with npm
+
+```sh
+npm install --save @react-navigation/native @react-navigation/native-stack
 ```
 
-Now we need to install [`react-native-screens`](https://github.com/kmagiera/react-native-screens).
+If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
+
+```sh
+expo install react-native-screens
+```
+
+If you are not using Expo, run the following:
 
 ```sh
 yarn add react-native-screens
 ```
+Or with npm
+
+```sh
+npm install --save react-native-screens
+```
+
+If you are using Expo, you are done. Otherwise, continue to the next steps.
 
 To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
 
@@ -36,9 +54,9 @@ implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
 Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`):
 
 ```js
-import { useScreens } from 'react-native-screens';
+import { enableScreens } from 'react-native-screens';
 
-useScreens();
+enableScreens();
 ```
 
 ## Usage

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.19",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,16 +29,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "del-cli": "^3.0.0",
-    "react-native-screens": "^2.0.0-alpha.11",
+    "react-native-screens": "^2.0.0-alpha.19",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-screens": "^2.0.0-alpha.8"

packages/native-stack/src/navigators/createNativeStackNavigator.tsx

@@ -3,7 +3,7 @@ import {
   createNavigatorFactory,
   useNavigationBuilder,
   EventArg,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 
 import {
   StackRouter,

packages/native-stack/src/types.tsx

@@ -6,7 +6,7 @@ import {
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   StackNavigationState,
   StackRouterOptions,

packages/native-stack/src/views/HeaderConfig.tsx

@@ -6,7 +6,7 @@ import {
   ScreenStackHeaderRightView,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
 import { NativeStackNavigationOptions } from '../types';
 
 type Props = NativeStackNavigationOptions & {
@@ -14,6 +14,7 @@ type Props = NativeStackNavigationOptions & {
 };
 
 export default function HeaderConfig(props: Props) {
+  const { colors } = useTheme();
   const {
     route,
     title,
@@ -52,17 +53,23 @@ export default function HeaderConfig(props: Props) {
       titleColor={
         headerTitleStyle.color !== undefined
           ? headerTitleStyle.color
-          : headerTintColor
+          : headerTintColor !== undefined
+          ? headerTintColor
+          : colors.text
       }
       backTitle={headerBackTitleVisible ? headerBackTitle : ''}
       backTitleFontFamily={headerBackTitleStyle.fontFamily}
       backTitleFontSize={headerBackTitleStyle.fontSize}
-      color={headerTintColor}
+      color={headerTintColor !== undefined ? headerTintColor : colors.primary}
       gestureEnabled={gestureEnabled === undefined ? true : gestureEnabled}
       largeTitle={headerLargeTitle}
       largeTitleFontFamily={headerLargeTitleStyle.fontFamily}
       largeTitleFontSize={headerLargeTitleStyle.fontSize}
-      backgroundColor={headerStyle.backgroundColor}
+      backgroundColor={
+        headerStyle.backgroundColor !== undefined
+          ? headerStyle.backgroundColor
+          : colors.card
+      }
     >
       {headerRight !== undefined ? (
         <ScreenStackHeaderRightView>{headerRight()}</ScreenStackHeaderRightView>

packages/native-stack/src/views/NativeStackView.tsx

@@ -9,6 +9,7 @@ import {
   ScreenProps,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
+import { useTheme } from '@react-navigation/native';
 import HeaderConfig from './HeaderConfig';
 import {
   NativeStackNavigationHelpers,
@@ -34,8 +35,10 @@ export default function NativeStackView({
   navigation,
   descriptors,
 }: Props) {
+  const { colors } = useTheme();
+
   return (
-    <ScreenStack style={styles.scenes}>
+    <ScreenStack style={styles.container}>
       {state.routes.map(route => {
         const { options, render: renderScene } = descriptors[route.key];
         const { presentation = 'push', animation, contentStyle } = options;
@@ -55,7 +58,15 @@ export default function NativeStackView({
             }}
           >
             <HeaderConfig {...options} route={route} />
-            <View style={[styles.content, contentStyle]}>{renderScene()}</View>
+            <View
+              style={[
+                styles.container,
+                { backgroundColor: colors.background },
+                contentStyle,
+              ]}
+            >
+              {renderScene()}
+            </View>
           </Screen>
         );
       })}
@@ -64,11 +75,7 @@ export default function NativeStackView({
 }
 
 const styles = StyleSheet.create({
-  content: {
+  container: {
-    flex: 1,
-    backgroundColor: '#eee',
-  },
-  scenes: {
     flex: 1,
   },
 });

packages/native/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.20...@react-navigation/native@5.0.0-alpha.21) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.19...@react-navigation/native@5.0.0-alpha.20) (2019-12-16)
+
+
+### Features
+
+* add nested config in deep linking ([#210](https://github.com/react-navigation/navigation-ex/issues/210)) ([8002d51](https://github.com/react-navigation/navigation-ex/commit/8002d5179524a7211c37760a4ed45e8c12af4358)), closes [#154](https://github.com/react-navigation/navigation-ex/issues/154)
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.18...@react-navigation/native@5.0.0-alpha.19) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.17...@react-navigation/native@5.0.0-alpha.18) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.16...@react-navigation/native@5.0.0-alpha.17) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/README.md

@@ -7,7 +7,7 @@ React Native integration for React Navigation
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/native
+yarn add @react-navigation/native
 ```
 
 ## Usage

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,17 +29,19 @@
     "prepare": "bob build",
     "clean": "del lib"
   },
+  "dependencies": {
+    "@react-navigation/core": "^5.0.0-alpha.29"
+  },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.22",
+    "@types/react-native": "^0.60.25",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*"
   },

packages/native/src/NavigationNativeContainer.tsx

@@ -4,7 +4,14 @@ import {
   NavigationContainerProps,
   NavigationContainerRef,
 } from '@react-navigation/core';
+import ThemeProvider from './theming/ThemeProvider';
+import DefaultTheme from './theming/DefaultTheme';
 import useBackButton from './useBackButton';
+import { Theme } from './types';
+
+type Props = NavigationContainerProps & {
+  theme?: Theme;
+};
 
 /**
  * Container component which holds the navigation state
@@ -13,11 +20,12 @@ import useBackButton from './useBackButton';
  *
  * @param props.initialState Initial state object for the navigation tree.
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const NavigationNativeContainer = React.forwardRef(function NativeContainer(
-  props: NavigationContainerProps,
+  { theme = DefaultTheme, ...rest }: Props,
   ref: React.Ref<NavigationContainerRef>
 ) {
   const refContainer = React.useRef<NavigationContainerRef>(null);
@@ -27,11 +35,9 @@ const NavigationNativeContainer = React.forwardRef(function NativeContainer(
   React.useImperativeHandle(ref, () => refContainer.current);
 
   return (
-    <NavigationContainer
+    <ThemeProvider value={theme}>
-      {...props}
+      <NavigationContainer {...rest} ref={refContainer} />
-      ref={refContainer}
+    </ThemeProvider>
-      children={props.children}
-    />
   );
 });
 

packages/native/src/index.tsx

@@ -1,5 +1,12 @@
+export * from '@react-navigation/core';
+
 export { default as NavigationNativeContainer } from './NavigationNativeContainer';
 
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';
 export { default as useScrollToTop } from './useScrollToTop';
+
+export { default as DefaultTheme } from './theming/DefaultTheme';
+export { default as DarkTheme } from './theming/DarkTheme';
+export { default as ThemeProvider } from './theming/ThemeProvider';
+export { default as useTheme } from './theming/useTheme';

packages/native/src/theming/DarkTheme.tsx

@@ -0,0 +1,14 @@
+import { Theme } from '../types';
+
+const DarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: 'rgb(10, 132, 255)',
+    background: 'rgb(1, 1, 1)',
+    card: 'rgb(18, 18, 18)',
+    text: 'rgb(229, 229, 231)',
+    border: 'rgb(39, 39, 41)',
+  },
+};
+
+export default DarkTheme;

packages/native/src/theming/DefaultTheme.tsx

@@ -0,0 +1,14 @@
+import { Theme } from '../types';
+
+const DefaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: 'rgb(242, 242, 242)',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(28, 28, 30)',
+    border: 'rgb(199, 199, 204)',
+  },
+};
+
+export default DefaultTheme;

packages/native/src/theming/ThemeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import DefaultTheme from './DefaultTheme';
+import { Theme } from '../types';
+
+const ThemeContext = React.createContext<Theme>(DefaultTheme);
+
+export default ThemeContext;

packages/native/src/theming/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import ThemeContext from './ThemeContext';
+import { Theme } from '../types';
+
+type Props = {
+  value: Theme;
+  children: React.ReactNode;
+};
+
+export default function ThemeProvider({ value, children }: Props) {
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}

packages/native/src/theming/useTheme.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ThemeContext from './ThemeContext';
+
+export default function useTheme() {
+  const theme = React.useContext(ThemeContext);
+
+  return theme;
+}

packages/native/src/types.tsx

@@ -0,0 +1,10 @@
+export type Theme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+  };
+};

packages/native/src/useLinking.tsx

@@ -3,15 +3,11 @@ import { Linking } from 'react-native';
 import {
   getStateFromPath as getStateFromPathDefault,
   NavigationContainerRef,
-  NavigationState,
-  PartialState,
 } from '@react-navigation/core';
 
-type Config = {
+type GetStateFromPath = typeof getStateFromPathDefault;
-  [routeName: string]:
+
-    | string
+type Config = Parameters<GetStateFromPath>[1];
-    | { path: string; parse?: Record<string, (value: string) => any> };
-};
 
 type Options = {
   /**
@@ -36,10 +32,7 @@ type Options = {
   /**
    * Custom function to parse the URL object to a valid navigation state (advanced).
    */
-  getStateFromPath?: (
+  getStateFromPath?: GetStateFromPath;
-    path: string,
-    options?: Config
-  ) => PartialState<NavigationState> | undefined;
 };
 
 export default function useLinking(

packages/routers/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.17...@react-navigation/routers@5.0.0-alpha.18) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.16...@react-navigation/routers@5.0.0-alpha.17) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.15...@react-navigation/routers@5.0.0-alpha.16) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 # [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.14...@react-navigation/routers@5.0.0-alpha.15) (2019-11-17)
 
 

packages/routers/README.md

@@ -9,7 +9,7 @@ You probably don't need to use this package directly if you're not building cust
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/routers
+yarn add @react-navigation/routers
 ```
 
 ## Usage
@@ -17,7 +17,7 @@ yarn add @react-navigation/core @react-navigation/routers
 A basic custom navigator bundling a router and a view looks like this:
 
 ```js
-import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/core';
+import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/native';
 import { StackRouter } from '@react-navigation/routers';
 
 function StackNavigator({ initialRouteName, children, ...rest }) {

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.18",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,15 +29,13 @@
     "clean": "del lib"
   },
   "dependencies": {
+    "@react-navigation/core": "^5.0.0-alpha.29",
     "shortid": "^2.2.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "del-cli": "^3.0.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
-  },
-  "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.46](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.45...@react-navigation/stack@5.0.0-alpha.46) (2019-12-19)
+
+
+### Bug Fixes
+
+* fix typescript issues ([c52a8c4](https://github.com/react-navigation/navigation-ex/commit/c52a8c46a8906812651e5259a850207fc448590e))
+
+
+
+
+
+# [5.0.0-alpha.45](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.44...@react-navigation/stack@5.0.0-alpha.45) (2019-12-16)
+
+
+### Bug Fixes
+
+* disable style interpolation for card when animation is disabled ([c110570](https://github.com/react-navigation/navigation-ex/commit/c110570d4c89a38336f19403e6f2d0870868620e))
+
+
+
+
+
+# [5.0.0-alpha.44](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.43...@react-navigation/stack@5.0.0-alpha.44) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.42...@react-navigation/stack@5.0.0-alpha.43) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.41...@react-navigation/stack@5.0.0-alpha.42) (2019-12-10)
+
+
+### Features
+
+* expose animation related values in context ([6cddb52](https://github.com/react-navigation/navigation-ex/commit/6cddb5238c0b1e37238c85c76e2ecb1f81517c19))
+
+
+
+
+
 # [5.0.0-alpha.41](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.40...@react-navigation/stack@5.0.0-alpha.41) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/README.md

@@ -7,7 +7,7 @@ Stack navigator for React Navigation.
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/stack @react-native-community/masked-view
+yarn add @react-navigation/native @react-navigation/stack @react-native-community/masked-view
 ```
 
 Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.41",
+  "version": "5.0.0-alpha.46",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,30 +33,32 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.18",
+    "color": "^3.1.2"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "@react-native-community/masked-view": "^0.1.5",
-    "@types/react": "^16.9.11",
+    "@types/color": "^3.0.0",
-    "@types/react-native": "^0.60.22",
+    "@types/react": "^16.9.16",
+    "@types/react-native": "^0.60.25",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.11",
+    "react-native-screens": "^2.0.0-alpha.19",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "@react-native-community/masked-view": "^0.1.1",
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
-    "react-native-safe-area-context": "^0.3.6",
+    "react-native-safe-area-context": "^0.6.0",
     "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },
   "@react-native-community/bob": {

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -273,3 +273,7 @@ export function forScaleFromCenterAndroid({
     },
   };
 }
+
+export function forNoAnimation(): StackCardInterpolatedStyle {
+  return {};
+}

packages/stack/src/index.tsx

@@ -35,6 +35,7 @@ export {
  * Utilities
  */
 export { default as StackGestureContext } from './utils/StackGestureContext';
+export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext';
 
 /**
  * Types

packages/stack/src/navigators/createStackNavigator.tsx

@@ -4,7 +4,7 @@ import {
   createNavigatorFactory,
   DefaultNavigatorOptions,
   EventArg,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   StackRouter,
   StackRouterOptions,

packages/stack/src/types.tsx

@@ -12,7 +12,7 @@ import {
   Descriptor,
   Route,
   NavigationHelpers,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { StackNavigationState } from '@react-navigation/routers';
 
 export type StackNavigationEventMap = {
@@ -271,18 +271,14 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Defaults to `true` on Android and `false` on iOS.
      */
     cardOverlayEnabled?: boolean;
-    /**
-     * Whether to use a transparent background for the card instead of a white one.
-     * This is useful to implement things like modal dialogs where the previous scene should still be visible underneath the current one.
-     * Defaults to `false`.
-     *
-     * If you use [`react-native-screens`](https://github.com/kmagiera/react-native-screens),
-     * you should also specify `mode: 'modal'` in the stack view config so previous screens aren't detached.
-     */
-    cardTransparent?: boolean;
     /**
      * Style object for the card in stack.
      * You can provide a custom background color to use instead of the default background here.
+     *
+     * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
+     * This is useful to implement things like modal dialogs.
+     * If you use [`react-native-screens`](https://github.com/kmagiera/react-native-screens), you should also specify `mode: 'modal'`
+     * in the stack view config when using a transparent background so previous screens aren't detached.
      */
     cardStyle?: StyleProp<ViewStyle>;
     /**
@@ -406,6 +402,10 @@ export type StackHeaderTitleProps = {
    * Whether title font should scale to respect Text Size accessibility settings.
    */
   allowFontScaling?: boolean;
+  /**
+   * Tint color for the header.
+   */
+  tintColor?: string;
   /**
    * Content of the title element. Usually the title string.
    */
@@ -468,6 +468,10 @@ export type StackCardInterpolationProps = {
    * Animated node representing whether the card is closing.
    */
   closing: Animated.Node<0 | 1>;
+  /**
+   * Animated node representing whether the card is being swiped.
+   */
+  swiping: Animated.Node<0 | 1>;
   /**
    * Animated node representing multiplier when direction is inverted.
    */

packages/stack/src/utils/StackCardAnimationContext.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { StackCardInterpolationProps } from '../types';
+
+export default React.createContext<StackCardInterpolationProps | undefined>(
+  undefined
+);

packages/stack/src/views/Header/HeaderBackButton.tsx

@@ -8,45 +8,56 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '@react-navigation/native';
 import MaskedView from '../MaskedView';
 import TouchableItem from '../TouchableItem';
 import { StackHeaderLeftButtonProps } from '../../types';
 
-type Props = StackHeaderLeftButtonProps & {
+type Props = StackHeaderLeftButtonProps;
-  tintColor: string;
-};
 
-type State = {
+export default function HeaderBackButton({
-  fullLabelWidth?: number;
+  disabled,
-};
+  allowFontScaling,
+  backImage,
+  label,
+  labelStyle,
+  labelVisible = Platform.OS === 'ios',
+  onLabelLayout,
+  onPress,
+  pressColorAndroid: customPressColorAndroid,
+  screenLayout,
+  tintColor: customTintColor,
+  titleLayout,
+  truncatedLabel = 'Back',
+}: Props) {
+  const { dark, colors } = useTheme();
 
-class HeaderBackButton extends React.Component<Props, State> {
+  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
-  static defaultProps = {
+    undefined | number
-    pressColorAndroid: 'rgba(0, 0, 0, .32)',
+  >(undefined);
-    tintColor: Platform.select({
-      ios: '#037aff',
-      web: '#5f6368',
-    }),
-    labelVisible: Platform.OS === 'ios',
-    truncatedLabel: 'Back',
-  };
 
-  state: State = {};
+  const tintColor =
+    customTintColor !== undefined
+      ? customTintColor
+      : Platform.select({
+          ios: colors.primary,
+          default: colors.text,
+        });
 
-  private handleLabelLayout = (e: LayoutChangeEvent) => {
+  const pressColorAndroid =
-    const { onLabelLayout } = this.props;
+    customPressColorAndroid !== undefined
+      ? customPressColorAndroid
+      : dark
+      ? 'rgba(255, 255, 255, .32)'
+      : 'rgba(0, 0, 0, .32)';
 
+  const handleLabelLayout = (e: LayoutChangeEvent) => {
     onLabelLayout && onLabelLayout(e);
 
-    this.setState({
+    setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
-      fullLabelWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
-    });
   };
 
-  private shouldTruncateLabel = () => {
+  const shouldTruncateLabel = () => {
-    const { titleLayout, screenLayout, label } = this.props;
-    const { fullLabelWidth: initialLabelWidth } = this.state;
-
     return (
       !label ||
       (initialLabelWidth &&
@@ -56,9 +67,7 @@ class HeaderBackButton extends React.Component<Props, State> {
     );
   };
 
-  private renderBackImage = () => {
+  const renderBackImage = () => {
-    const { backImage, labelVisible, tintColor } = this.props;
-
     if (backImage) {
       return backImage({ tintColor });
     } else {
@@ -76,19 +85,8 @@ class HeaderBackButton extends React.Component<Props, State> {
     }
   };
 
-  private renderLabel() {
+  const renderLabel = () => {
-    const {
+    const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
-      label,
-      truncatedLabel,
-      allowFontScaling,
-      labelVisible,
-      backImage,
-      labelStyle,
-      tintColor,
-      screenLayout,
-    } = this.props;
-
-    const leftLabelText = this.shouldTruncateLabel() ? truncatedLabel : label;
 
     if (!labelVisible || leftLabelText === undefined) {
       return null;
@@ -109,7 +107,7 @@ class HeaderBackButton extends React.Component<Props, State> {
           onLayout={
             // This measurement is used to determine if we should truncate the label when it doesn't fit
             // Only measure it when label is not truncated because we want the measurement of full label
-            leftLabelText === label ? this.handleLabelLayout : undefined
+            leftLabelText === label ? handleLabelLayout : undefined
           }
           style={[
             styles.label,
@@ -145,42 +143,37 @@ class HeaderBackButton extends React.Component<Props, State> {
         {labelElement}
       </MaskedView>
     );
-  }
+  };
 
-  private handlePress = () =>
+  const handlePress = () => onPress && requestAnimationFrame(onPress);
-    this.props.onPress && requestAnimationFrame(this.props.onPress);
 
-  render() {
+  return (
-    const { pressColorAndroid, label, disabled } = this.props;
+    <TouchableItem
-
+      disabled={disabled}
-    return (
+      accessible
-      <TouchableItem
+      accessibilityRole="button"
-        disabled={disabled}
+      accessibilityComponentType="button"
-        accessible
+      accessibilityLabel={
-        accessibilityRole="button"
+        label && label !== 'Back' ? `${label}, back` : 'Go back'
-        accessibilityComponentType="button"
+      }
-        accessibilityLabel={
+      accessibilityTraits="button"
-          label && label !== 'Back' ? `${label}, back` : 'Go back'
+      testID="header-back"
-        }
+      delayPressIn={0}
-        accessibilityTraits="button"
+      onPress={disabled ? undefined : handlePress}
-        testID="header-back"
+      pressColor={pressColorAndroid}
-        delayPressIn={0}
+      style={[styles.container, disabled && styles.disabled]}
-        onPress={disabled ? undefined : this.handlePress}
+      hitSlop={Platform.select({
-        pressColor={pressColorAndroid}
+        ios: undefined,
-        style={[styles.container, disabled && styles.disabled]}
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
-        hitSlop={Platform.select({
+      })}
-          ios: undefined,
+      borderless
-          default: { top: 16, right: 16, bottom: 16, left: 16 },
+    >
-        })}
+      <React.Fragment>
-        borderless
+        {renderBackImage()}
-      >
+        {renderLabel()}
-        <React.Fragment>
+      </React.Fragment>
-          {this.renderBackImage()}
+    </TouchableItem>
-          {this.renderLabel()}
+  );
-        </React.Fragment>
-      </TouchableItem>
-    );
-  }
 }
 
 const styles = StyleSheet.create({
@@ -253,5 +246,3 @@ const styles = StyleSheet.create({
     transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
   },
 });
-
-export default HeaderBackButton;

packages/stack/src/views/Header/HeaderBackground.tsx

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import { StyleSheet, Platform, ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '@react-navigation/native';
 
 export default function HeaderBackground({ style, ...rest }: ViewProps) {
-  return <Animated.View style={[styles.container, style]} {...rest} />;
+  const { colors } = useTheme();
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'white',
     ...Platform.select({
       android: {
         elevation: 4,
       },
       ios: {
-        shadowColor: 'rgba(0, 0, 0, 0.3)',
         shadowOpacity: 0.85,
         shadowRadius: 0,
         shadowOffset: {
@@ -25,7 +39,6 @@ const styles = StyleSheet.create({
       },
       default: {
         borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: 'rgba(0, 0, 0, 0.20)',
       },
     }),
   },

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -4,7 +4,7 @@ import {
   NavigationContext,
   Route,
   ParamListBase,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { StackNavigationState } from '@react-navigation/routers';
 import { EdgeInsets } from 'react-native-safe-area-context';
 

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { EdgeInsets } from 'react-native-safe-area-context';
-import { Route } from '@react-navigation/core';
+import { Route } from '@react-navigation/native';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
 import memoize from '../../utils/memoize';
@@ -339,7 +339,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
                 children: currentTitle,
                 onLayout: this.handleTitleLayout,
                 allowFontScaling: titleAllowFontScaling,
-                style: [{ color: headerTintColor }, customTitleStyle],
+                tintColor: headerTintColor,
+                style: customTitleStyle,
               })}
             </Animated.View>
             {right ? (

packages/stack/src/views/Header/HeaderTitle.tsx

@@ -1,14 +1,26 @@
 import * as React from 'react';
 import { StyleSheet, Platform, TextProps } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '@react-navigation/native';
 
 type Props = TextProps & {
+  tintColor?: string;
   children?: string;
 };
 
-export default function HeaderTitle({ style, ...rest }: Props) {
+export default function HeaderTitle({ tintColor, style, ...rest }: Props) {
+  const { colors } = useTheme();
+
   return (
-    <Animated.Text numberOfLines={1} {...rest} style={[styles.title, style]} />
+    <Animated.Text
+      numberOfLines={1}
+      {...rest}
+      style={[
+        styles.title,
+        { color: tintColor === undefined ? colors.text : tintColor },
+        style,
+      ]}
+    />
   );
 }
 
@@ -17,17 +29,14 @@ const styles = StyleSheet.create({
     ios: {
       fontSize: 17,
       fontWeight: '600',
-      color: 'rgba(0, 0, 0, .9)',
     },
     android: {
       fontSize: 20,
       fontWeight: '500',
-      color: 'rgba(0, 0, 0, .9)',
     },
     default: {
       fontSize: 18,
       fontWeight: '500',
-      color: '#3c4043',
     },
   }),
 });