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

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",
-    "@expo/webpack-config": "^0.10.1",
-    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.22",
-    "babel-preset-expo": "^7.1.0",
-    "expo-cli": "^3.8.0",
-    "typescript": "^3.7.2"
+    "@babel/core": "^7.7.5",
+    "@expo/webpack-config": "^0.10.6",
+    "@types/react": "^16.9.16",
+    "@types/react-native": "^0.60.25",
+    "babel-preset-expo": "^8.0.0",
+    "expo-cli": "^3.11.1",
+    "typescript": "^3.7.3"
   }
 }

example/src/Screens/AuthFlow.tsx

@@ -9,11 +9,27 @@ import {
 } from '@react-navigation/stack';
 
 type AuthStackParams = {
-  splash: undefined;
-  home: undefined;
-  'sign-in': undefined;
+  Splash: undefined;
+  Home: 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
-        mode="contained"
-        onPress={() => onSignIn('token')}
-        style={styles.button}
-      >
+      <Button mode="contained" onPress={signIn} 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
-      screenOptions={{
-        headerLeft: () => (
-          <HeaderBackButton onPress={() => navigation.goBack()} />
-        ),
-      }}
-    >
-      {state.isLoading ? (
-        <SimpleStack.Screen
-          name="splash"
-          component={SplashScreen}
-          options={{ title: `Auth Flow` }}
-        />
-      ) : state.userToken === undefined ? (
-        <SimpleStack.Screen name="sign-in" options={{ title: `Sign in` }}>
-          {() => (
-            <SignInScreen
-              onSignIn={token => dispatch({ type: 'SIGN_IN', token })}
-            />
-          )}
-        </SimpleStack.Screen>
-      ) : (
-        <SimpleStack.Screen name="home" options={{ title: 'Home' }}>
-          {() => (
-            <HomeScreen onSignOut={() => dispatch({ type: 'SIGN_OUT' })} />
-          )}
-        </SimpleStack.Screen>
-      )}
-    </SimpleStack.Navigator>
+    <AuthContext.Provider value={authContext}>
+      <SimpleStack.Navigator
+        screenOptions={{
+          headerLeft: () => (
+            <HeaderBackButton onPress={() => navigation.goBack()} />
+          ),
+        }}
+      >
+        {state.isLoading ? (
+          <SimpleStack.Screen
+            name="Splash"
+            component={SplashScreen}
+            options={{ title: 'Auth Flow' }}
+          />
+        ) : state.userToken === undefined ? (
+          <SimpleStack.Screen
+            name="SignIn"
+            options={{ title: 'Sign in' }}
+            component={SignInScreen}
+          />
+        ) : (
+          <SimpleStack.Screen
+            name="Home"
+            options={{ title: 'Home' }}
+            component={HomeScreen}
+          />
+        )}
+      </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
-      tabBarOptions={{
-        style: styles.tabBar,
-        labelStyle: styles.tabLabel,
-        indicatorStyle: styles.tabIndicator,
-      }}
-    >
+    <MaterialTopTabs.Navigator>
       <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/NativeStack.tsx

@@ -7,6 +7,7 @@ import {
   RouteProp,
   ParamListBase,
   useFocusEffect,
+  useTheme,
 } from '@react-navigation/native';
 import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -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}>
-    <View style={styles.buttons}>
-      <Button
-        mode="contained"
-        onPress={() => navigation.push('album')}
-        style={styles.button}
-      >
-        Push album
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.goBack()}
-        style={styles.button}
-      >
-        Go back
-      </Button>
-    </View>
-    <Text style={styles.title}>What is Lorem Ipsum?</Text>
-    <Text style={styles.paragraph}>
-      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
-      the 1500s, when an unknown printer took a galley of type and scrambled it
-      to make a type specimen book. It has survived not only five centuries, but
-      also the leap into electronic typesetting, remaining essentially
-      unchanged. It was popularised in the 1960s with the release of Letraset
-      sheets containing Lorem Ipsum passages, and more recently with desktop
-      publishing software like Aldus PageMaker including versions of Lorem
-      Ipsum.
-    </Text>
-    <Text style={styles.title}>Where does it come from?</Text>
-    <Text style={styles.paragraph}>
-      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. 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. 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 popular during
-      the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
-      sit amet..&quot;, comes from a line in section 1.10.32.
-    </Text>
-    <Text style={styles.paragraph}>
-      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
-      for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
-      Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
-      original form, accompanied by English versions from the 1914 translation
-      by H. Rackham.
-    </Text>
-    <Text style={styles.title}>Why do we use it?</Text>
-    <Text style={styles.paragraph}>
-      It is a long established fact that a reader will be distracted by the
-      readable content of a page when looking at its layout. The point of using
-      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
-      as opposed to using &quot;Content here, content here&quot;, making it look
-      like readable English. Many desktop publishing packages and web page
-      editors now use Lorem Ipsum as their default model text, and a search for
-      &quot;lorem ipsum&quot; will uncover many web sites still in their
-      infancy. Various versions have evolved over the years, sometimes by
-      accident, sometimes on purpose (injected humour and the like).
-    </Text>
-    <Text style={styles.title}>Where can I get some?</Text>
-    <Text style={styles.paragraph}>
-      There are many variations of passages of Lorem Ipsum available, but the
-      majority have suffered alteration in some form, by injected humour, or
-      randomised words which don&apos;t look even slightly believable. If you
-      are going to use a passage of Lorem Ipsum, you need to be sure there
-      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.
-    </Text>
-  </ScrollView>
-);
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView
+      style={{ backgroundColor: colors.card }}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Title>What is Lorem Ipsum?</Title>
+      <Paragraph>
+        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 the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Title>Where does it come from?</Title>
+      <Paragraph>
+        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. 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. 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 popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Title>Why do we use it?</Title>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Title>Where can I get some?</Title>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        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/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.timestamp}>{date}</Text>
+          <Text style={[styles.name, { color: colors.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.paragraph}>
+      <Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
+      <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<{
-  item: { name: string; number: number };
-}> {
-  render() {
-    const { item } = this.props;
+const ContactItem = React.memo(
+  ({ item }: { item: { name: string; number: number } }) => {
+    const { colors } = useTheme();
 
     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.number}>{item.number}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>{item.name}</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,7 +1,23 @@
 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,
@@ -9,6 +25,8 @@ import {
   useLinking,
   NavigationContainerRef,
   NavigationNativeContainer,
+  DefaultTheme,
+  DarkTheme,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -72,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);
 
@@ -102,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
@@ -113,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;
         }
 
@@ -121,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);
       }
     };
@@ -128,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
-      ref={containerRef}
-      initialState={initialState}
-      onStateChange={state =>
-        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
-      }
-    >
-      <Drawer.Navigator>
-        <Drawer.Screen
-          name="Root"
-          options={{
-            title: 'Examples',
-            drawerIcon: ({ size, color }) => (
-              <MaterialIcons size={size} color={color} name="folder" />
-            ),
-          }}
-        >
-          {({
-            navigation,
-          }: {
-            navigation: DrawerNavigationProp<RootDrawerParamList>;
-          }) => (
-            <Stack.Navigator>
-              <Stack.Screen
-                name="Home"
-                options={{
-                  title: 'Examples',
-                  headerLeft: () => (
-                    <Appbar.Action
-                      icon="menu"
-                      onPress={() => navigation.toggleDrawer()}
-                    />
-                  ),
-                }}
-              >
-                {({
-                  navigation,
-                }: {
-                  navigation: StackNavigationProp<RootStackParamList>;
-                }) => (
-                  <ScrollView>
-                    {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
-                      name => (
+    <PaperProvider theme={paperTheme}>
+      {Platform.OS === 'ios' && (
+        <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
+      )}
+      <NavigationNativeContainer
+        ref={containerRef}
+        initialState={initialState}
+        onStateChange={state =>
+          AsyncStorage.setItem(
+            NAVIGATION_PERSISTENCE_KEY,
+            JSON.stringify(state)
+          )
+        }
+        theme={theme}
+      >
+        <Drawer.Navigator>
+          <Drawer.Screen
+            name="Root"
+            options={{
+              title: 'Examples',
+              drawerIcon: ({ size, color }) => (
+                <MaterialIcons size={size} color={color} name="folder" />
+              ),
+            }}
+          >
+            {({
+              navigation,
+            }: {
+              navigation: DrawerNavigationProp<RootDrawerParamList>;
+            }) => (
+              <Stack.Navigator>
+                <Stack.Screen
+                  name="Home"
+                  options={{
+                    title: 'Examples',
+                    headerLeft: () => (
+                      <Appbar.Action
+                        color={theme.colors.text}
+                        icon="menu"
+                        onPress={() => navigation.toggleDrawer()}
+                      />
+                    ),
+                  }}
+                >
+                  {({
+                    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>
-              {(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.Navigator>
-          )}
-        </Drawer.Screen>
-      </Drawer.Navigator>
-    </NavigationNativeContainer>
+              </Stack.Navigator>
+            )}
+          </Drawer.Screen>
+        </Drawer.Navigator>
+      </NavigationNativeContainer>
+    </PaperProvider>
   );
 }

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",
-    "eslint": "^6.6.0",
+    "core-js": "^3.5.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,33 @@
 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

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.25",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,17 +33,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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-native": "^0.60.22",
+    "@types/color": "^3.0.0",
+    "@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/native": "^5.0.0-alpha.0",

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

@@ -10,22 +10,15 @@ import {
   Dimensions,
 } from 'react-native';
 import {
-  Route,
   NavigationContext,
   CommonActions,
+  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> {
-  static defaultProps = {
-    keyboardHidesTabBar: false,
-    adaptive: true,
-  };
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  activeBackgroundColor,
+  activeTintColor,
+  adaptive = true,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  keyboardHidesTabBar = false,
+  labelPosition,
+  labelStyle,
+  showIcon,
+  showLabel,
+  style,
+  tabStyle,
+}: Props) {
+  const { colors } = useTheme();
 
-  state = {
-    dimensions: Dimensions.get('window'),
-    layout: { height: 0, width: 0 },
-    keyboard: false,
-    visible: new Animated.Value(1),
-  };
+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+  const [layout, setLayout] = React.useState({ height: 0, width: 0 });
+  const [keyboardShown, setKeyboardShown] = React.useState(false);
 
-  componentDidMount() {
-    Dimensions.addEventListener('change', this.handleOrientationChange);
+  const [visible] = React.useState(() => new Animated.Value(0));
 
-    if (Platform.OS === 'ios') {
-      Keyboard.addListener('keyboardWillShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', this.handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide);
-    }
-  }
+  const { routes } = state;
 
-  componentWillUnmount() {
-    Dimensions.removeEventListener('change', this.handleOrientationChange);
-
-    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, {
+  React.useEffect(() => {
+    if (keyboardShown) {
+      Animated.timing(visible, {
         toValue: 0,
         duration: 200,
         useNativeDriver: true,
-      }).start()
-    );
+      }).start();
+    }
+  }, [keyboardShown, visible]);
 
-  private handleKeyboardHide = () =>
-    Animated.timing(this.state.visible, {
-      toValue: 1,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        this.setState({ keyboard: false });
-      }
-    });
+  React.useEffect(() => {
+    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
 
-  private handleLayout = (e: LayoutChangeEvent) => {
-    const { layout } = this.state;
-    const { height, width } = e.nativeEvent.layout;
+    const handleKeyboardShow = () => setKeyboardShown(true);
 
-    if (height === layout.height && width === layout.width) {
-      return;
+    const handleKeyboardHide = () =>
+      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({
-      layout: {
-        height,
-        width,
-      },
+    return () => {
+      Dimensions.removeEventListener('change', handleOrientationChange);
+
+      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 { 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 shouldUseHorizontalLabels = () => {
     const isLandscape = dimensions.width > dimensions.height;
 
     if (labelPosition) {
@@ -165,126 +162,114 @@ export default class BottomTabBar extends React.Component<Props, State> {
     }
   };
 
-  render() {
-    const {
-      state,
-      navigation,
-      descriptors,
-      keyboardHidesTabBar,
-      activeTintColor,
-      inactiveTintColor,
-      activeBackgroundColor,
-      inactiveBackgroundColor,
-      labelStyle,
-      showIcon,
-      showLabel,
-      allowFontScaling,
-      style,
-      tabStyle,
-    } = this.props;
-    const { routes } = state;
+  return (
+    <SafeAreaConsumer>
+      {insets => (
+        <Animated.View
+          style={[
+            styles.tabBar,
+            {
+              backgroundColor: colors.card,
+              borderTopColor: colors.border,
+            },
+            keyboardHidesTabBar
+              ? {
+                  // When the keyboard is shown, slide down the tab bar
+                  transform: [
+                    {
+                      translateY: visible.interpolate({
+                        inputRange: [0, 1],
+                        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 (
-      <SafeAreaConsumer>
-        {insets => (
-          <Animated.View
-            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 = () => {
+                const event = navigation.emit({
+                  type: 'tabPress',
+                  target: route.key,
+                });
 
-                const onPress = () => {
-                  const event = navigation.emit({
-                    type: 'tabPress',
-                    target: route.key,
+                if (!focused && !event.defaultPrevented) {
+                  navigation.dispatch({
+                    ...CommonActions.navigate(route.name),
+                    target: state.key,
                   });
+                }
+              };
 
-                  if (!focused && !event.defaultPrevented) {
-                    navigation.dispatch({
-                      ...CommonActions.navigate(route.name),
-                      target: state.key,
-                    });
-                  }
-                };
+              const onLongPress = () => {
+                navigation.emit({
+                  type: 'tabLongPress',
+                  target: route.key,
+                });
+              };
 
-                const onLongPress = () => {
-                  navigation.emit({
-                    type: 'tabLongPress',
-                    target: route.key,
-                  });
-                };
+              const label =
+                options.tabBarLabel !== undefined
+                  ? options.tabBarLabel
+                  : options.title !== undefined
+                  ? options.title
+                  : route.name;
 
-                const label = this.getLabelText({ route });
-                const accessibilityLabel =
-                  options.tabBarAccessibilityLabel !== undefined
-                    ? options.tabBarAccessibilityLabel
-                    : typeof label === 'string'
-                    ? `${label}, tab, ${index + 1} of ${routes.length}`
-                    : undefined;
+              const accessibilityLabel =
+                options.tabBarAccessibilityLabel !== undefined
+                  ? options.tabBarAccessibilityLabel
+                  : typeof label === 'string'
+                  ? `${label}, tab, ${index + 1} of ${routes.length}`
+                  : undefined;
 
-                return (
-                  <NavigationContext.Provider
-                    key={route.key}
-                    value={descriptors[route.key].navigation}
-                  >
-                    <BottomTabItem
-                      route={route}
-                      focused={focused}
-                      horizontal={this.shouldUseHorizontalLabels()}
-                      onPress={onPress}
-                      onLongPress={onLongPress}
-                      accessibilityLabel={accessibilityLabel}
-                      testID={options.tabBarTestID}
-                      allowFontScaling={allowFontScaling}
-                      activeTintColor={activeTintColor}
-                      inactiveTintColor={inactiveTintColor}
-                      activeBackgroundColor={activeBackgroundColor}
-                      inactiveBackgroundColor={inactiveBackgroundColor}
-                      button={options.tabBarButton}
-                      icon={options.tabBarIcon}
-                      label={label}
-                      showIcon={showIcon}
-                      showLabel={showLabel}
-                      labelStyle={labelStyle}
-                      style={tabStyle}
-                    />
-                  </NavigationContext.Provider>
-                );
-              })}
-            </View>
-          </Animated.View>
-        )}
-      </SafeAreaConsumer>
-    );
-  }
+              return (
+                <NavigationContext.Provider
+                  key={route.key}
+                  value={descriptors[route.key].navigation}
+                >
+                  <BottomTabItem
+                    route={route}
+                    focused={focused}
+                    horizontal={shouldUseHorizontalLabels()}
+                    onPress={onPress}
+                    onLongPress={onLongPress}
+                    accessibilityLabel={accessibilityLabel}
+                    testID={options.tabBarTestID}
+                    allowFontScaling={allowFontScaling}
+                    activeTintColor={activeTintColor}
+                    inactiveTintColor={inactiveTintColor}
+                    activeBackgroundColor={activeBackgroundColor}
+                    inactiveBackgroundColor={inactiveBackgroundColor}
+                    button={options.tabBarButton}
+                    icon={options.tabBarIcon}
+                    label={label}
+                    showIcon={showIcon}
+                    showLabel={showLabel}
+                    labelStyle={labelStyle}
+                    style={tabStyle}
+                  />
+                </NavigationContext.Provider>
+              );
+            })}
+          </View>
+        </Animated.View>
+      )}
+    </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/native';
+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',
-  inactiveTintColor = '#8E8E93',
+  activeTintColor: customActiveTintColor,
+  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
-                    accessibilityElementsHidden={!isFocused}
-                    importantForAccessibility={
-                      isFocused ? 'auto' : 'no-hide-descendants'
-                    }
-                    style={styles.content}
-                  >
+                  <SceneContent isFocused={isFocused}>
                     {descriptors[route.key].render()}
-                  </View>
+                  </SceneContent>
                 </ResourceSavingScene>
               );
             })}

packages/compat/CHANGELOG.md

@@ -3,6 +3,22 @@
 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

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.17",
+  "version": "5.0.0-alpha.19",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,12 +24,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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/native": "^5.0.0-alpha.0",

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
-  const routeConfig = Object.keys(options).map(key => {
-    const pattern =
-      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,
-    };
-  });
+  // Create a normalized configs array which will be easier to use
+  const configs = ([] as RouteConfig[]).concat(
+    ...Object.keys(options).map(key => createNormalizedConfigs(key, options))
+  );
 
   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 = {
-      routes: [{ name: routeName, params }],
-    };
+    let state: InitialState;
+
+    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]
-      ? (options[route.name] as { parse?: ParseConfig }).parse
-      : undefined;
+    const parseFunction = findParseConfigForRoute(route.name, options);
 
-    if (config) {
+    if (parseFunction) {
       Object.keys(params).forEach(name => {
-        if (config[name] && typeof params[name] === 'string') {
-          params[name] = config[name](params[name] as string);
+        if (parseFunction[name] && typeof params[name] === '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,36 @@
 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

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.30",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,20 +34,21 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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-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",
-    "typescript": "^3.7.2"
+    "react-native-screens": "^2.0.0-alpha.19",
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",
@@ -55,7 +56,7 @@
     "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

@@ -19,7 +19,7 @@ import {
 
 type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
   DrawerRouterOptions &
-  Partial<DrawerNavigationConfig>;
+  DrawerNavigationConfig;
 
 function DrawerNavigator({
   initialRouteName,

packages/drawer/src/types.tsx

@@ -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({
-  contentContainerStyle,
-  style,
-  drawerPosition,
-  ...rest
-}: DrawerContentComponentProps) {
-  const insets = useSafeArea();
-
+export default function DrawerContent(props: DrawerContentComponentProps) {
   return (
-    <ScrollView
-      contentContainerStyle={[
-        {
-          paddingTop: insets.top + 4,
-          paddingLeft: drawerPosition === 'left' ? insets.left : 0,
-          paddingRight: drawerPosition === 'right' ? insets.right : 0,
-        },
-        contentContainerStyle,
-      ]}
-      style={[styles.container, style]}
-    >
-      <DrawerItemList {...rest} />
-    </ScrollView>
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+    </DrawerContentScrollView>
   );
 }
-
-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({
-  icon,
-  label,
-  labelStyle,
-  focused = false,
-  activeTintColor = '#6200ee',
-  inactiveTintColor = 'rgba(0, 0, 0, .68)',
-  activeBackgroundColor = 'rgba(98, 0, 238, 0.12)',
-  inactiveBackgroundColor = 'transparent',
-  style,
-  onPress,
-  ...rest
-}: Props) {
+export default function DrawerItem(props: Props) {
+  const { colors } = useTheme();
+
+  const {
+    icon,
+    label,
+    labelStyle,
+    focused = false,
+    activeTintColor = colors.primary,
+    inactiveTintColor = Color(colors.text)
+      .alpha(0.68)
+      .rgb()
+      .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/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> {
-  static defaultProps = {
-    lazy: true,
-    drawerContent: (props: DrawerContentComponentProps) => (
-      <DrawerContent {...props} />
-    ),
-    drawerPosition: I18nManager.isRTL ? 'right' : 'left',
-    keyboardDismissMode: 'on-drag',
-    overlayColor: 'rgba(0, 0, 0, 0.5)',
-    drawerType: 'front',
-    hideStatusBar: false,
-    statusBarAnimation: 'slide',
-  };
+export default function DrawerView({
+  state,
+  navigation,
+  descriptors,
+  lazy = true,
+  drawerContent = (props: DrawerContentComponentProps) => (
+    <DrawerContent {...props} />
+  ),
+  drawerPosition = I18nManager.isRTL ? 'right' : 'left',
+  keyboardDismissMode = 'on-drag',
+  overlayColor = 'rgba(0, 0, 0, 0.5)',
+  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 { index } = nextProps.state;
+  const drawerGestureRef = React.useRef<PanGestureHandler>(null);
 
-    return {
-      // Set the current tab to be loaded if it was not loaded before
-      loaded: prevState.loaded.includes(index)
-        ? prevState.loaded
-        : [...prevState.loaded, index],
+  const { colors } = useTheme();
+
+  React.useEffect(() => {
+    const updateWidth = ({ window }: { window: ScaledSize }) => {
+      setDrawerWidth(getDefaultDrawerWidth(window));
     };
+
+    Dimensions.addEventListener('change', updateWidth);
+
+    return () => Dimensions.removeEventListener('change', updateWidth);
+  }, []);
+
+  if (!loaded.includes(state.index)) {
+    setLoaded([...loaded, state.index]);
   }
 
-  state: State = {
-    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;
-
+  const handleDrawerOpen = () => {
     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 { state, navigation } = this.props;
-
+  const handleDrawerClose = () => {
     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 drawerWidth = getDefaultDrawerWidth(window);
-
-    if (this.state.drawerWidth !== drawerWidth) {
-      this.setState({ drawerWidth });
-    }
-  };
-
-  private renderNavigationView = ({ progress }: any) => {
-    const {
-      state,
-      navigation,
-      descriptors,
-      drawerPosition,
-      drawerContent,
-      drawerContentOptions,
-    } = this.props;
-
+  const renderNavigationView = ({ progress }: any) => {
     return drawerContent({
       ...drawerContentOptions,
       progress: progress,
@@ -152,11 +131,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     });
   };
 
-  private renderContent = () => {
-    let { lazy, state, descriptors, unmountInactiveScreens } = this.props;
-
-    const { loaded } = this.state;
-
+  const renderContent = () => {
     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) => {
-    // @ts-ignore
-    this.drawerGestureRef.current = ref;
-  };
+  const activeKey = state.routes[state.index].key;
+  const { gestureEnabled } = descriptors[activeKey].options;
 
-  render() {
-    const {
-      state,
-      descriptors,
-      drawerType,
-      drawerPosition,
-      overlayColor,
-      sceneContainerStyle,
-      drawerStyle,
-      edgeWidth,
-      minSwipeDistance,
-      hideStatusBar,
-      statusBarAnimation,
-      gestureHandlerProps,
-    } = this.props;
-
-    const { drawerWidth } = this.state;
-
-    const activeKey = state.routes[state.index].key;
-    const { gestureEnabled } = descriptors[activeKey].options;
-
-    return (
-      <SafeAreaProviderCompat>
-        <DrawerGestureContext.Provider value={this.drawerGestureRef}>
-          <Drawer
-            open={state.isDrawerOpen}
-            gestureEnabled={gestureEnabled !== false}
-            onOpen={this.handleDrawerOpen}
-            onClose={this.handleDrawerClose}
-            onGestureRef={this.setDrawerGestureRef}
-            gestureHandlerProps={gestureHandlerProps}
-            drawerType={drawerType}
-            drawerPosition={drawerPosition}
-            sceneContainerStyle={sceneContainerStyle}
-            drawerStyle={[{ width: drawerWidth }, drawerStyle]}
-            overlayStyle={{ backgroundColor: overlayColor }}
-            swipeEdgeWidth={edgeWidth}
-            swipeDistanceThreshold={minSwipeDistance}
-            hideStatusBar={hideStatusBar}
-            statusBarAnimation={statusBarAnimation}
-            renderDrawerContent={this.renderNavigationView}
-            renderSceneContent={this.renderContent}
-          />
-        </DrawerGestureContext.Provider>
-      </SafeAreaProviderCompat>
-    );
-  }
+  return (
+    <SafeAreaProviderCompat>
+      <DrawerGestureContext.Provider value={drawerGestureRef}>
+        <Drawer
+          open={state.isDrawerOpen}
+          gestureEnabled={gestureEnabled !== false}
+          onOpen={handleDrawerOpen}
+          onClose={handleDrawerClose}
+          onGestureRef={ref => {
+            // @ts-ignore
+            drawerGestureRef.current = ref;
+          }}
+          gestureHandlerProps={gestureHandlerProps}
+          drawerType={drawerType}
+          drawerPosition={drawerPosition}
+          sceneContainerStyle={[
+            { backgroundColor: colors.background },
+            sceneContainerStyle,
+          ]}
+          drawerStyle={[
+            { width: drawerWidth, backgroundColor: colors.card },
+            drawerStyle,
+          ]}
+          overlayStyle={{ backgroundColor: overlayColor }}
+          swipeEdgeWidth={edgeWidth}
+          swipeDistanceThreshold={minSwipeDistance}
+          hideStatusBar={hideStatusBar}
+          statusBarAnimation={statusBarAnimation}
+          renderDrawerContent={renderNavigationView}
+          renderSceneContent={renderContent}
+          keyboardDismissMode={keyboardDismissMode}
+          drawerPostion={drawerPosition}
+        />
+      </DrawerGestureContext.Provider>
+    </SafeAreaProviderCompat>
+  );
 }
 
 const styles = StyleSheet.create({

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,33 @@
 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

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.27",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,19 +34,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@react-navigation/routers": "^5.0.0-alpha.18"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.22",
+    "@types/react": "^16.9.16",
+    "@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/native": "^5.0.0-alpha.0",

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/native';
+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,36 @@
 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

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.25",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,19 +34,20 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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-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-tab-view": "^2.11.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",

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/native';
+import { Route, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 import { MaterialTopTabBarProps } from '../types';
 
-export default function TabBarTop({
-  state,
-  navigation,
-  descriptors,
-  activeTintColor = 'rgba(255, 255, 255, 1)',
-  inactiveTintColor = 'rgba(255, 255, 255, 0.7)',
-  allowFontScaling = true,
-  iconStyle,
-  labelStyle,
-  showIcon = false,
-  showLabel = true,
-  ...rest
-}: MaterialTopTabBarProps) {
+export default function TabBarTop(props: MaterialTopTabBarProps) {
+  const { colors } = useTheme();
+
+  const {
+    state,
+    navigation,
+    descriptors,
+    activeTintColor = colors.text,
+    inactiveTintColor = Color(activeTintColor)
+      .alpha(0.5)
+      .rgb()
+      .string(),
+    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/native';
+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> {
-  static defaultProps = {
-    tabBarPosition: 'top',
-  };
-
-  private renderLazyPlaceholder = (props: { route: Route<string> }) => {
-    const { lazyPlaceholder } = this.props;
+export default function MaterialTopTabView({
+  lazyPlaceholder,
+  tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
+  tabBarOptions,
+  state,
+  navigation,
+  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 { state, descriptors } = this.props;
+  const renderTabBar = (props: SceneRendererProps) => {
     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 = () =>
-    this.props.navigation.emit({
-      type: 'swipeStart',
-    });
-
-  private handleSwipeEnd = () =>
-    this.props.navigation.emit({
-      type: 'swipeEnd',
-    });
-
-  render() {
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      lazyPlaceholder,
-      tabBar,
-      tabBarOptions,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      state,
-      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}
-      />
-    );
-  }
+  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={renderTabBar}
+      renderLazyPlaceholder={renderLazyPlaceholder}
+      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
+      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
+      sceneContainerStyle={[
+        { backgroundColor: colors.background },
+        sceneContainerStyle,
+      ]}
+    />
+  );
 }

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,33 @@
 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

packages/native-stack/README.md

@@ -2,7 +2,7 @@
 
 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
 
@@ -11,12 +11,30 @@ Open a Terminal in your project's folder and run,
 ```sh
 yarn add @react-navigation/native @react-navigation/native-stack
 ```
+Or with npm
 
-Now we need to install [`react-native-screens`](https://github.com/kmagiera/react-native-screens).
+```sh
+npm install --save @react-navigation/native @react-navigation/native-stack
+```
+
+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.16",
+  "version": "5.0.0-alpha.19",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,13 +29,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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",
-    "typescript": "^3.7.2"
+    "react-native-screens": "^2.0.0-alpha.19",
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",

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/native';
+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: {
-    flex: 1,
-    backgroundColor: '#eee',
-  },
-  scenes: {
+  container: {
     flex: 1,
   },
 });

packages/native/CHANGELOG.md

@@ -3,6 +3,36 @@
 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

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.18",
+  "version": "5.0.0-alpha.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,16 +30,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.27"
+    "@react-navigation/core": "^5.0.0-alpha.29"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
-    "@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",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "react": "*",

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
-      {...props}
-      ref={refContainer}
-      children={props.children}
-    />
+    <ThemeProvider value={theme}>
+      <NavigationContainer {...rest} ref={refContainer} />
+    </ThemeProvider>
   );
 });
 

packages/native/src/index.tsx

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

packages/routers/CHANGELOG.md

@@ -3,6 +3,22 @@
 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

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.18",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,13 +29,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.27",
+    "@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"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/CHANGELOG.md

@@ -3,6 +3,39 @@
 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

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.43",
+  "version": "5.0.0-alpha.46",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,21 +33,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.16"
+    "@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/react-native": "^0.60.22",
+    "@types/color": "^3.0.0",
+    "@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",
-    "typescript": "^3.7.2"
+    "react-native-screens": "^2.0.0-alpha.19",
+    "typescript": "^3.7.3"
   },
   "peerDependencies": {
     "@react-native-community/masked-view": "^0.1.1",
@@ -56,7 +58,7 @@
     "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/types.tsx

@@ -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.
    */

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 & {
-  tintColor: string;
-};
+type Props = StackHeaderLeftButtonProps;
 
-type State = {
-  fullLabelWidth?: number;
-};
+export default function HeaderBackButton({
+  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> {
-  static defaultProps = {
-    pressColorAndroid: 'rgba(0, 0, 0, .32)',
-    tintColor: Platform.select({
-      ios: '#037aff',
-      web: '#5f6368',
-    }),
-    labelVisible: Platform.OS === 'ios',
-    truncatedLabel: 'Back',
-  };
+  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
+    undefined | number
+  >(undefined);
 
-  state: State = {};
+  const tintColor =
+    customTintColor !== undefined
+      ? customTintColor
+      : Platform.select({
+          ios: colors.primary,
+          default: colors.text,
+        });
 
-  private handleLabelLayout = (e: LayoutChangeEvent) => {
-    const { onLabelLayout } = this.props;
+  const pressColorAndroid =
+    customPressColorAndroid !== undefined
+      ? customPressColorAndroid
+      : dark
+      ? 'rgba(255, 255, 255, .32)'
+      : 'rgba(0, 0, 0, .32)';
 
+  const handleLabelLayout = (e: LayoutChangeEvent) => {
     onLabelLayout && onLabelLayout(e);
 
-    this.setState({
-      fullLabelWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
-    });
+    setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
   };
 
-  private shouldTruncateLabel = () => {
-    const { titleLayout, screenLayout, label } = this.props;
-    const { fullLabelWidth: initialLabelWidth } = this.state;
-
+  const shouldTruncateLabel = () => {
     return (
       !label ||
       (initialLabelWidth &&
@@ -56,9 +67,7 @@ class HeaderBackButton extends React.Component<Props, State> {
     );
   };
 
-  private renderBackImage = () => {
-    const { backImage, labelVisible, tintColor } = this.props;
-
+  const renderBackImage = () => {
     if (backImage) {
       return backImage({ tintColor });
     } else {
@@ -76,19 +85,8 @@ class HeaderBackButton extends React.Component<Props, State> {
     }
   };
 
-  private renderLabel() {
-    const {
-      label,
-      truncatedLabel,
-      allowFontScaling,
-      labelVisible,
-      backImage,
-      labelStyle,
-      tintColor,
-      screenLayout,
-    } = this.props;
-
-    const leftLabelText = this.shouldTruncateLabel() ? truncatedLabel : label;
+  const renderLabel = () => {
+    const leftLabelText = 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 = () =>
-    this.props.onPress && requestAnimationFrame(this.props.onPress);
+  const handlePress = () => onPress && requestAnimationFrame(onPress);
 
-  render() {
-    const { pressColorAndroid, label, disabled } = this.props;
-
-    return (
-      <TouchableItem
-        disabled={disabled}
-        accessible
-        accessibilityRole="button"
-        accessibilityComponentType="button"
-        accessibilityLabel={
-          label && label !== 'Back' ? `${label}, back` : 'Go back'
-        }
-        accessibilityTraits="button"
-        testID="header-back"
-        delayPressIn={0}
-        onPress={disabled ? undefined : this.handlePress}
-        pressColor={pressColorAndroid}
-        style={[styles.container, disabled && styles.disabled]}
-        hitSlop={Platform.select({
-          ios: undefined,
-          default: { top: 16, right: 16, bottom: 16, left: 16 },
-        })}
-        borderless
-      >
-        <React.Fragment>
-          {this.renderBackImage()}
-          {this.renderLabel()}
-        </React.Fragment>
-      </TouchableItem>
-    );
-  }
+  return (
+    <TouchableItem
+      disabled={disabled}
+      accessible
+      accessibilityRole="button"
+      accessibilityComponentType="button"
+      accessibilityLabel={
+        label && label !== 'Back' ? `${label}, back` : 'Go back'
+      }
+      accessibilityTraits="button"
+      testID="header-back"
+      delayPressIn={0}
+      onPress={disabled ? undefined : handlePress}
+      pressColor={pressColorAndroid}
+      style={[styles.container, disabled && styles.disabled]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+      borderless
+    >
+      <React.Fragment>
+        {renderBackImage()}
+        {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/HeaderSegment.tsx

@@ -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',
     },
   }),
 });

packages/stack/src/views/KeyboardManager.tsx

@@ -18,7 +18,7 @@ export default class KeyboardManager extends React.Component<Props> {
   // When a gesture didn't change the tab, we can restore the focused input with this
   private previouslyFocusedTextInput: number | null = null;
   private startTimestamp: number = 0;
-  private keyboardTimeout: NodeJS.Timeout | undefined;
+  private keyboardTimeout: any;
 
   private clearKeyboardTimeout = () => {
     if (this.keyboardTimeout !== undefined) {

packages/stack/src/views/Stack/Card.tsx

@@ -12,6 +12,7 @@ import {
 import Animated, { Easing } from 'react-native-reanimated';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import { EdgeInsets } from 'react-native-safe-area-context';
+import Color from 'color';
 import animate, { Binary } from './CardAnimation';
 import PointerEventsView from './PointerEventsView';
 import memoize from '../../utils/memoize';
@@ -30,7 +31,6 @@ type Props = ViewProps & {
   index: number;
   active: boolean;
   closing?: boolean;
-  transparent?: boolean;
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: Layout;
@@ -758,7 +758,6 @@ export default class Card extends React.Component<Props> {
   render() {
     const {
       active,
-      transparent,
       styleInterpolator,
       index,
       current,
@@ -813,6 +812,11 @@ export default class Card extends React.Component<Props> {
         : this.handleGestureEventHorizontal
       : undefined;
 
+    const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
+    const isTransparent = backgroundColor
+      ? Color(backgroundColor).alpha() === 0
+      : false;
+
     return (
       <StackGestureContext.Provider value={this.gestureRef}>
         <View pointerEvents="box-none" {...rest}>
@@ -838,7 +842,7 @@ export default class Card extends React.Component<Props> {
               {...this.gestureActivationCriteria()}
             >
               <Animated.View style={[styles.container, cardStyle]}>
-                {shadowEnabled && shadowStyle && !transparent ? (
+                {shadowEnabled && shadowStyle && !isTransparent ? (
                   <Animated.View
                     style={[
                       styles.shadow,
@@ -853,11 +857,7 @@ export default class Card extends React.Component<Props> {
                 <PointerEventsView
                   active={active}
                   progress={this.props.current}
-                  style={[
-                    styles.content,
-                    transparent ? styles.transparent : styles.opaque,
-                    contentStyle,
-                  ]}
+                  style={[styles.content, contentStyle]}
                 >
                   <StackCardAnimationContext.Provider value={animationContext}>
                     {children}
@@ -905,10 +905,4 @@ const styles = StyleSheet.create({
     height: 3,
     shadowOffset: { width: 1, height: -1 },
   },
-  transparent: {
-    backgroundColor: 'transparent',
-  },
-  opaque: {
-    backgroundColor: '#eee',
-  },
 });

packages/stack/src/views/Stack/CardContainer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { StackNavigationState } from '@react-navigation/routers';
-import { Route } from '@react-navigation/native';
+import { Route, useTheme } from '@react-navigation/native';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
@@ -21,7 +21,6 @@ type Props = TransitionPreset & {
   safeAreaInsetRight: number;
   safeAreaInsetBottom: number;
   safeAreaInsetLeft: number;
-  cardTransparent?: boolean;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
@@ -53,30 +52,57 @@ type Props = TransitionPreset & {
   floatingHeaderHeight: number;
 };
 
-export default class CardContainer extends React.PureComponent<Props> {
-  private handleOpen = () => {
-    const { scene, onTransitionEnd, onOpenRoute } = this.props;
-
+export default function CardContainer({
+  active,
+  cardOverlayEnabled,
+  cardShadowEnabled,
+  cardStyle,
+  cardStyleInterpolator,
+  closing,
+  current,
+  floatingHeaderHeight,
+  focused,
+  gestureDirection,
+  gestureEnabled,
+  gestureResponseDistance,
+  gestureVelocityImpact,
+  getPreviousRoute,
+  headerMode,
+  headerShown,
+  headerStyleInterpolator,
+  headerTransparent,
+  index,
+  layout,
+  onCloseRoute,
+  onGoBack,
+  onOpenRoute,
+  onPageChangeCancel,
+  onPageChangeConfirm,
+  onPageChangeStart,
+  onTransitionEnd,
+  onTransitionStart,
+  previousScene,
+  renderHeader,
+  renderScene,
+  safeAreaInsetBottom,
+  safeAreaInsetLeft,
+  safeAreaInsetRight,
+  safeAreaInsetTop,
+  scene,
+  state,
+  transitionSpec,
+}: Props) {
+  const handleOpen = () => {
     onTransitionEnd && onTransitionEnd({ route: scene.route }, false);
     onOpenRoute({ route: scene.route });
   };
 
-  private handleClose = () => {
-    const { scene, onTransitionEnd, onCloseRoute } = this.props;
-
+  const handleClose = () => {
     onTransitionEnd && onTransitionEnd({ route: scene.route }, true);
     onCloseRoute({ route: scene.route });
   };
 
-  private handleTransitionStart = ({ closing }: { closing: boolean }) => {
-    const {
-      scene,
-      onTransitionStart,
-      onPageChangeConfirm,
-      onPageChangeCancel,
-      onGoBack,
-    } = this.props;
-
+  const handleTransitionStart = ({ closing }: { closing: boolean }) => {
     if (closing) {
       onPageChangeConfirm && onPageChangeConfirm();
     } else {
@@ -87,103 +113,64 @@ export default class CardContainer extends React.PureComponent<Props> {
     closing && onGoBack({ route: scene.route });
   };
 
-  render() {
-    const {
-      index,
-      layout,
-      active,
-      focused,
-      closing,
-      current,
-      state,
-      scene,
-      previousScene,
-      safeAreaInsetTop,
-      safeAreaInsetRight,
-      safeAreaInsetBottom,
-      safeAreaInsetLeft,
-      cardTransparent,
-      cardOverlayEnabled,
-      cardShadowEnabled,
-      cardStyle,
-      onPageChangeStart,
-      onPageChangeCancel,
-      gestureEnabled,
-      gestureResponseDistance,
-      gestureVelocityImpact,
-      floatingHeaderHeight,
-      headerShown,
-      getPreviousRoute,
-      headerMode,
-      headerTransparent,
-      renderHeader,
-      renderScene,
-      gestureDirection,
-      transitionSpec,
-      cardStyleInterpolator,
-      headerStyleInterpolator,
-    } = this.props;
+  const insets = {
+    top: safeAreaInsetTop,
+    right: safeAreaInsetRight,
+    bottom: safeAreaInsetBottom,
+    left: safeAreaInsetLeft,
+  };
 
-    const insets = {
-      top: safeAreaInsetTop,
-      right: safeAreaInsetRight,
-      bottom: safeAreaInsetBottom,
-      left: safeAreaInsetLeft,
-    };
+  const { colors } = useTheme();
 
-    return (
-      <Card
-        index={index}
-        active={active}
-        transparent={cardTransparent}
-        gestureDirection={gestureDirection}
-        layout={layout}
-        insets={insets}
-        current={current}
-        next={scene.progress.next}
-        closing={closing}
-        onOpen={this.handleOpen}
-        onClose={this.handleClose}
-        overlayEnabled={cardOverlayEnabled}
-        shadowEnabled={cardShadowEnabled}
-        onTransitionStart={this.handleTransitionStart}
-        onGestureBegin={onPageChangeStart}
-        onGestureCanceled={onPageChangeCancel}
-        gestureEnabled={gestureEnabled}
-        gestureResponseDistance={gestureResponseDistance}
-        gestureVelocityImpact={gestureVelocityImpact}
-        transitionSpec={transitionSpec}
-        styleInterpolator={cardStyleInterpolator}
-        accessibilityElementsHidden={!focused}
-        importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-        pointerEvents="box-none"
-        containerStyle={
-          headerMode === 'float' && !headerTransparent && headerShown !== false
-            ? { marginTop: floatingHeaderHeight }
-            : null
-        }
-        contentStyle={cardStyle}
-        style={StyleSheet.absoluteFill}
-      >
-        <View style={styles.container}>
-          <View style={styles.scene}>
-            {renderScene({ route: scene.route })}
-          </View>
-          {headerMode === 'screen'
-            ? renderHeader({
-                mode: 'screen',
-                layout,
-                insets,
-                scenes: [previousScene, scene],
-                state,
-                getPreviousRoute,
-                styleInterpolator: headerStyleInterpolator,
-              })
-            : null}
-        </View>
-      </Card>
-    );
-  }
+  return (
+    <Card
+      index={index}
+      active={active}
+      gestureDirection={gestureDirection}
+      layout={layout}
+      insets={insets}
+      current={current}
+      next={scene.progress.next}
+      closing={closing}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      overlayEnabled={cardOverlayEnabled}
+      shadowEnabled={cardShadowEnabled}
+      onTransitionStart={handleTransitionStart}
+      onGestureBegin={onPageChangeStart}
+      onGestureCanceled={onPageChangeCancel}
+      gestureEnabled={gestureEnabled}
+      gestureResponseDistance={gestureResponseDistance}
+      gestureVelocityImpact={gestureVelocityImpact}
+      transitionSpec={transitionSpec}
+      styleInterpolator={cardStyleInterpolator}
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      pointerEvents="box-none"
+      containerStyle={
+        headerMode === 'float' && !headerTransparent && headerShown !== false
+          ? { marginTop: floatingHeaderHeight }
+          : null
+      }
+      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
+      style={StyleSheet.absoluteFill}
+    >
+      <View style={styles.container}>
+        <View style={styles.scene}>{renderScene({ route: scene.route })}</View>
+        {headerMode === 'screen'
+          ? renderHeader({
+              mode: 'screen',
+              layout,
+              insets,
+              scenes: [previousScene, scene],
+              state,
+              getPreviousRoute,
+              styleInterpolator: headerStyleInterpolator,
+            })
+          : null}
+      </View>
+    </Card>
+  );
 }
 
 const styles = StyleSheet.create({

packages/stack/src/views/Stack/CardStack.tsx

@@ -21,7 +21,8 @@ import {
   DefaultTransition,
   ModalTransition,
 } from '../../TransitionConfigs/TransitionPresets';
-import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
+import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
+import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
 import {
   Layout,
   StackHeaderMode,
@@ -314,7 +315,7 @@ export default class CardStack extends React.Component<Props, State> {
     if (headerMode === 'screen') {
       defaultTransitionPreset = {
         ...defaultTransitionPreset,
-        headerStyleInterpolator: forNoAnimation,
+        headerStyleInterpolator: forNoAnimationHeader,
       };
     }
 
@@ -354,15 +355,17 @@ export default class CardStack extends React.Component<Props, State> {
               safeAreaInsets,
               headerShown,
               headerTransparent,
-              cardTransparent,
               cardShadowEnabled,
               cardOverlayEnabled,
               cardStyle,
+              animationEnabled,
               gestureResponseDistance,
               gestureVelocityImpact,
               gestureDirection = defaultTransitionPreset.gestureDirection,
               transitionSpec = defaultTransitionPreset.transitionSpec,
-              cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
+              cardStyleInterpolator = animationEnabled === false
+                ? forNoAnimationCard
+                : defaultTransitionPreset.cardStyleInterpolator,
               headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
             } = scene.descriptor
               ? scene.descriptor.options
@@ -385,8 +388,11 @@ export default class CardStack extends React.Component<Props, State> {
 
               if (nextScene) {
                 const {
+                  animationEnabled,
                   transitionSpec = defaultTransitionPreset.transitionSpec,
-                  cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
+                  cardStyleInterpolator = animationEnabled === false
+                    ? forNoAnimationCard
+                    : defaultTransitionPreset.cardStyleInterpolator,
                   headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
                 } = nextScene.descriptor
                   ? nextScene.descriptor.options
@@ -429,7 +435,6 @@ export default class CardStack extends React.Component<Props, State> {
                   safeAreaInsetRight={safeAreaInsetRight}
                   safeAreaInsetBottom={safeAreaInsetBottom}
                   safeAreaInsetLeft={safeAreaInsetLeft}
-                  cardTransparent={cardTransparent}
                   cardOverlayEnabled={cardOverlayEnabled}
                   cardShadowEnabled={cardShadowEnabled}
                   cardStyle={cardStyle}

yarn.lock

@@ -9,7 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.0", "@babel/core@^7.7.2":
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab"
   integrity sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ==
@@ -29,6 +29,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.4.5", "@babel/core@^7.7.5":
+  version "7.7.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.5.tgz#ae1323cd035b5160293307f50647e83f8ba62f7e"
+  integrity sha512-M42+ScN4+1S9iB6f+TL7QBpoQETxbclx+KNoKJABghnKYE+fMzSGqst0BZJc8CpI625bwPwYgUyRvxZ+0mZzpw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.4"
+    "@babel/helpers" "^7.7.4"
+    "@babel/parser" "^7.7.5"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@babel/types" "^7.7.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@@ -257,6 +277,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
   integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
 
+"@babel/parser@^7.7.5":
+  version "7.7.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
+  integrity sha512-KNlOe9+/nk4i29g0VXgl8PEXIRms5xKLJeuZ6UptN0fHv+jDiriG+y94X6qAgWTR0h3KaoM1wK5G5h7MHFRSig==
+
 "@babel/plugin-external-helpers@^7.0.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.7.4.tgz#8aa7aa402f0e2ecb924611cbf30942a497dfd17e"
@@ -788,7 +813,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/preset-env@^7.3.1", "@babel/preset-env@^7.7.1":
+"@babel/preset-env@^7.3.1":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.4.tgz#ccaf309ae8d1ee2409c85a4e2b5e280ceee830f8"
   integrity sha512-Dg+ciGJjwvC1NIe/DGblMbcGq1HOtKbw8RLl4nIjlfcILKEOkWT/vRqPpumswABEBVudii6dnVwrBtzD7ibm4g==
@@ -845,7 +870,7 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@^7.6.3":
+"@babel/preset-env@^7.6.3", "@babel/preset-env@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.6.tgz#39ac600427bbb94eec6b27953f1dfa1d64d457b2"
   integrity sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==
@@ -932,13 +957,20 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b"
   integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw==
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.7.6":
+  version "7.7.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
+  integrity sha512-BWAJxpNVa0QlE5gZdWjSxXtemZyZ9RmrmVozxt3NUXeZhVIJ5ANyqmMc0JDrivBZyxUuQvFxlvH4OWWOogGfUw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.0.0", "@babel/template@^7.4.0", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -1192,10 +1224,10 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
-"@expo/build-tools@0.1.0-alpha.7":
-  version "0.1.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@expo/build-tools/-/build-tools-0.1.0-alpha.7.tgz#eca466de72a116bb32ab64e3c51bda37d36f212c"
-  integrity sha512-cS4ZxDMDi4HDau0ugXjGEUyKFD5D8WDdLAhs+R0MNG/cJcnDEAdefsMg67PNaJ9Z7OnSelmJOdEurYMcRedafw==
+"@expo/build-tools@0.1.0-alpha.8":
+  version "0.1.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/@expo/build-tools/-/build-tools-0.1.0-alpha.8.tgz#5f8722c3b8cda8afe8cc9363d368f81787791362"
+  integrity sha512-6wvio+09Mf9+MBtUKYNkZDeVzHggQl6tjzA6cccXu2UgIphJjl2UB+z1bT9AYGgs3BfKLzNom+z0EWPhJaVwuw==
   dependencies:
     "@expo/spawn-async" "^1.5.0"
     "@hapi/boom" "^7.4.3"
@@ -1203,13 +1235,14 @@
     "@types/bunyan" "^1.8.6"
     "@types/hapi__joi" "^15.0.4"
     bunyan "^1.8.12"
-    envsub "^3.0.9"
     fs-extra "^8.1.0"
     got "^9.6.0"
     lodash "^4.17.15"
     node-forge "^0.9.1"
     plist "^3.0.1"
     uuid "^3.3.3"
+  optionalDependencies:
+    envsub "^3.0.9"
 
 "@expo/bunyan@3.0.2":
   version "3.0.2"
@@ -1223,12 +1256,12 @@
     mv "~2"
     safe-json-stringify "~1"
 
-"@expo/config@^2.5.1":
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.5.1.tgz#467733b18d9c26601785a4d3c261edd5e1fba6c0"
-  integrity sha512-MyIGtj917uPHiJJL0mP7A6vDxqgH/z7MqOa18UAz4NfGfCrMKetf/yAk6bQ/rcGBJeNyDSOOXwAOErFSQtBGfg==
+"@expo/config@^2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@expo/config/-/config-2.5.2.tgz#2095883f95c9b2e99d36d7dd20c79a7cc4f3d72e"
+  integrity sha512-/L38U6OHY4ivButcBGhh557FpLcWaCGaDF+QiAWNSdUEBEz0jjPs+Yx2f8cdQQ40UzooowmMO0lVYtzsC4dmUw==
   dependencies:
-    "@expo/json-file" "^8.2.1"
+    "@expo/json-file" "^8.2.2"
     "@types/invariant" "^2.2.30"
     find-yarn-workspace-root "^1.2.1"
     fs-extra "^7.0.1"
@@ -1236,12 +1269,12 @@
     resolve-from "^5.0.0"
     slugify "^1.3.4"
 
-"@expo/dev-tools@^0.8.1":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.8.2.tgz#61af440d51239bd7c3627c22a241c1a42530da19"
-  integrity sha512-VWFqAxM2dUxVtSCQzuUGK7FsbbhvLDaqt7fmwDjL7bbowFW/GqQB3jVyL0lcR7t30X5MM/OrF/Oszoga11wMcg==
+"@expo/dev-tools@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@expo/dev-tools/-/dev-tools-0.9.2.tgz#59d678c1f2dd81b848da095d1fa3cb6894ed1f5b"
+  integrity sha512-9kjoaYdsMlhRWXVHXQK5/7/dbwD9ms98Eugi57a6Cc0u4Ajx4iNi1BVZZc4Vo3c04CCtujeSIFuODwJuwzd12w==
   dependencies:
-    "@expo/config" "^2.5.1"
+    "@expo/config" "^2.5.2"
     base64url "3.0.1"
     express "4.16.4"
     freeport-async "2.0.0"
@@ -1251,20 +1284,20 @@
     lodash "^4.17.15"
     subscriptions-transport-ws "0.9.8"
 
-"@expo/image-utils@^0.2.7", "@expo/image-utils@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.2.8.tgz#26c452e70f6d796c2ac589efba9f05c3aaead795"
-  integrity sha512-TH7n7IE42YbzJXOOS3KTnHTNtlrofNcg0Rn5Og0q0na6KxAXTZL4F3/y2VIHzlEdI27UUtAxoLpdgFrfMh3yow==
+"@expo/image-utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.2.9.tgz#e06690e2e7c76ec77975a0d051d01d2c8332520f"
+  integrity sha512-YVyaBXnumbhQpP0j3+snFLOJSCdDkbbJj+M7ZpX2WmMtos2Z9MELmjDJ8Kd1+lYcmbIg8I3kzF9rV9uvasbr5Q==
   dependencies:
     "@expo/spawn-async" "1.5.0"
     semver "6.1.1"
   optionalDependencies:
     sharp-cli "1.10.0"
 
-"@expo/json-file@^8.2.1":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.1.tgz#481e038ec0b01bf0d48bc223acaaa25214ccb4c6"
-  integrity sha512-8X7rBhjNJEXTXlVLAhOoRl19WhlRhfuEp8cbfoE1fEV0ExXyZwfN8rRYbm2Q5BcFjSsRnfuTckpQiU86qahIDA==
+"@expo/json-file@^8.2.2":
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.2.tgz#cdf25f93d0089503f70c9bc89c6a68c3961c3c7d"
+  integrity sha512-ywy5/nB0aDunWgBxT4w/TJIkOBomxDXKWn7w/DgGYjVf76+ZJI+P8YTsdYk0IQe2IHo6xj6r5loWzWwx44Q8rg==
   dependencies:
     "@babel/code-frame" "^7.0.0-beta.44"
     fs-extra "^8.0.1"
@@ -1357,18 +1390,18 @@
     request "^2.81.0"
     uuid "^3.0.0"
 
-"@expo/osascript@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.6.tgz#232be46a56bc4c3a1934de21971d7e29810e2bb1"
-  integrity sha512-V4qsnRodRZT5OKMQ69gzyMr4vjFbA5YP4MEZ2khdomEFlxxJyobaLv8aWB1303i2yPdEY3vYi4pF6LxL4tXPUg==
+"@expo/osascript@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.0.7.tgz#9ab2e70df0f769d0366db28f2c23cc848be624b4"
+  integrity sha512-x6vExXDia1JSRM8mruSy4In6tXuU8o8t5t54k8MosqWeT8qI74/u+Y8pKi3RsJ1wlxDhdDIp2CyeAsYG+uQNnw==
   dependencies:
     "@expo/spawn-async" "^1.5.0"
     exec-async "^2.2.0"
 
-"@expo/package-manager@^0.0.0":
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/@expo/package-manager/-/package-manager-0.0.0.tgz#6802603d48b96480c222c9a70822a4f7a90cdf70"
-  integrity sha512-2E5DzKaAU8WP4C1CXwwyp9gOAQvlSemGFrym6ev8fCSD3HtMcZAQNwIBOSi1hCsi8xYCeE5dMGhIlgXtYKxCMg==
+"@expo/package-manager@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@expo/package-manager/-/package-manager-0.0.1.tgz#2eb798f63ab46295ea1ab49243b27771c617efc5"
+  integrity sha512-2tYCZwGwpZIEI4dirV8ntP4l67q6QGtuvhJKJ5U1InQiKL3d+bCtZ/81ctoLV7bM8ocTR/E65RBC8cjwBRlO5g==
   dependencies:
     "@expo/spawn-async" "^1.5.0"
     ansi-regex "^5.0.0"
@@ -1380,10 +1413,10 @@
     split "^1.0.1"
     stream "^0.0.2"
 
-"@expo/schemer@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@expo/schemer/-/schemer-1.3.0.tgz#bcd62e540365793368d3412e2987af0f2aff1150"
-  integrity sha512-KtJPtm9K/5tcOoNIj8gFDMlO3aHgBensnqsBik5jjKq+LJWLIeGxFCyR3X/Y2DJRmaLuZpj1hMG93VBwoOi+Vg==
+"@expo/schemer@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@expo/schemer/-/schemer-1.3.1.tgz#5bc347c1b19c97c796cbecbe89c602f5470f39ad"
+  integrity sha512-mwHtOkNixNlw80z3Htm0LwpZvi5T+HPuPwY/w0p6/SQLA5aR5HKT9b9xK2LjK8e27pkkFjjq3nsR0OOfi8jWTQ==
   dependencies:
     ajv "^5.2.2"
     es6-error "^4.0.2"
@@ -1421,15 +1454,15 @@
   dependencies:
     lodash "^4.17.4"
 
-"@expo/webpack-config@^0.10.1", "@expo/webpack-config@^0.10.4":
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.10.4.tgz#dcd03b94ef3cbfcc1e690909fcddeac7cecc409c"
-  integrity sha512-8fRMoo0bO8U8TZbN1itlzOilnfhjNxmshV5BGNkGi4yby+Mjev8CkDgTrsBISyWcNPr1XHO5NYbqN1VdqpjD0w==
+"@expo/webpack-config@^0.10.6":
+  version "0.10.6"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-0.10.6.tgz#375c5794cc801e09e64104798c9f62576d4e1d05"
+  integrity sha512-c6CMs5BMaJkMYdJoQKl1vc9P2PqR6tcb4qZoBP53PwK8fKVGec0QgyMPBg19/HMrZB0QYlnysWTBH8wtcJcL+w==
   dependencies:
-    "@babel/core" "^7.0.0"
+    "@babel/core" "^7.4.5"
     "@babel/runtime" "^7.3.4"
-    "@expo/config" "^2.5.1"
-    "@expo/webpack-pwa-manifest-plugin" "^1.2.13"
+    "@expo/config" "^2.5.2"
+    "@expo/webpack-pwa-manifest-plugin" "^1.2.14"
     "@types/yup" "^0.26.24"
     babel-loader "8.0.6"
     babel-preset-expo "^7.0.0"
@@ -1464,13 +1497,13 @@
     workbox-webpack-plugin "^3.6.3"
     yup "^0.27.0"
 
-"@expo/webpack-pwa-manifest-plugin@^1.2.13":
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.13.tgz#28c9bcc06af4b36c1f66e4abda1061c8dcbdffa3"
-  integrity sha512-gldJe4/Wj6pcC2bi8VynE0MQyww9Dyaizfeb+jJHZxHyAnpoWlh30WaYH8eXr/HFvPbm+5vnRjslFRQdMjObDQ==
+"@expo/webpack-pwa-manifest-plugin@^1.2.14":
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/@expo/webpack-pwa-manifest-plugin/-/webpack-pwa-manifest-plugin-1.2.14.tgz#2448f507229213f57bf320dc2756fd4de0fe6b6f"
+  integrity sha512-0YQDUnyAg8FdiVce7ZoB7VsxA9nM3VMnEPDkdZYg+AwRPcVld40cdEljm4b+6daSHxmcRPhSYEDe4ouLbD2J/w==
   dependencies:
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.8"
+    "@expo/config" "^2.5.2"
+    "@expo/image-utils" "^0.2.9"
     is-color "^1.0.2"
     mime "^2.4.0"
     node-fetch "^2.6.0"
@@ -1487,20 +1520,20 @@
     pouchdb-collections "^1.0.1"
     tiny-queue "^0.2.1"
 
-"@expo/xdl@^57.0.1":
-  version "57.0.2"
-  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-57.0.2.tgz#94b7b473f54d025f1bcee52284ea0c300a129657"
-  integrity sha512-wOmuvvVlgRtcHZOJWvi6C7Qf2YzH0ru7+V1gYv4w6WFcul7v3eYt4agYRQjU66cO2dcaZMstQ8cTDz1z/dCyvQ==
+"@expo/xdl@57.2.1":
+  version "57.2.1"
+  resolved "https://registry.yarnpkg.com/@expo/xdl/-/xdl-57.2.1.tgz#9e3daa6e597cce7595a2844fed2b49857ad29060"
+  integrity sha512-ITRey8tSz2NlZ/KyII0OMi70kubNHdUumJHkCiuGU8+zzWpgbBQXyaucQNEenBA+8Zec6cytSEEYO+/E2cMxRg==
   dependencies:
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.8"
-    "@expo/json-file" "^8.2.1"
+    "@expo/config" "^2.5.2"
+    "@expo/image-utils" "^0.2.9"
+    "@expo/json-file" "^8.2.2"
     "@expo/ngrok" "2.4.3"
-    "@expo/osascript" "^2.0.6"
-    "@expo/schemer" "^1.3.0"
+    "@expo/osascript" "^2.0.7"
+    "@expo/schemer" "^1.3.1"
     "@expo/spawn-async" "1.5.0"
-    "@expo/webpack-config" "^0.10.4"
+    "@expo/webpack-config" "^0.10.6"
     analytics-node "3.3.0"
     axios "0.19.0"
     boxen "4.1.0"
@@ -1551,6 +1584,7 @@
     request-promise-native "1.0.5"
     resolve-from "5.0.0"
     semver "5.5.0"
+    serialize-error "^5.0.0"
     slugid "1.1.0"
     slugify "1.3.1"
     source-map-support "0.4.18"
@@ -2721,6 +2755,25 @@
   resolved "https://registry.yarnpkg.com/@types/cli-table/-/cli-table-0.3.0.tgz#f1857156bf5fd115c6a2db260ba0be1f8fc5671c"
   integrity sha512-QnZUISJJXyhyD6L1e5QwXDV/A5i2W1/gl6D6YMc8u0ncPepbv/B4w3S+izVvtAg60m6h+JP09+Y/0zF2mojlFQ==
 
+"@types/color-convert@*":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
+  integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
+"@types/color@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.0.tgz#40f8a6bf2fd86e969876b339a837d8ff1b0a6e30"
+  integrity sha512-5qqtNia+m2I0/85+pd2YzAXaTyKO8j+svirO5aN+XaQJ5+eZ8nx0jPtEWZLxCi50xwYsX10xUHetFzfb1WEs4Q==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -2849,7 +2902,7 @@
     "@types/react" "*"
     "@types/react-native" "*"
 
-"@types/react-native@*", "@types/react-native@^0.60.22":
+"@types/react-native@*":
   version "0.60.23"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.23.tgz#9270f91bbff822a1571feece56cd260f0a1b2831"
   integrity sha512-hLRCWKNni/e6KEXSNtexXCg0u7CnHla6G6yeZYTMOlyG/bLE41GeLxP4dXJw1hyDsXJYN00Wc3Apr2XQ2TW1LA==
@@ -2857,7 +2910,15 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.11":
+"@types/react-native@^0.60.25":
+  version "0.60.25"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.25.tgz#65cb0bf5dd0631079215b63525458e4123c1c90e"
+  integrity sha512-827dIVvSTxSH5uTpsJJH7O4wpRuw0rm3yIzRL3a2yKawA0nyhgC1GPKTXHFIn2GfSdXn1Gty2dJ+k6uDZF3MWQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react@*":
   version "16.9.13"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.13.tgz#b3ea5dd443f4a680599e2abba8cc66f5e1ce0059"
   integrity sha512-LikzRslbiufJYHyzbHSW0GrAiff8QYLMBFeZmSxzCYGXKxi8m/1PHX+rsVOwhr7mJNq+VIu2Dhf7U6mjFERK6w==
@@ -2865,6 +2926,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.16":
+  version "16.9.16"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.16.tgz#4f12515707148b1f53a8eaa4341dae5dfefb066d"
+  integrity sha512-dQ3wlehuBbYlfvRXfF5G+5TbZF3xqgkikK7DWAsQXe2KnzV+kjD4W2ea+ThCrKASZn9h98bjjPzoTYzfRqyBkw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/retry@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -2982,13 +3051,6 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
-"@unimodules/core@~4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@unimodules/core/-/core-4.0.0.tgz#898dafa5a121e7d6d7d4acd9c0c38d12f7da5b19"
-  integrity sha512-lHxRmCG9DK3/aA2lnBKPS32K95NpYE10mZQRp5dycSptgN0DIeWWHuE01SndcSUACGyEP+tDO+DnGo8mhLlt4Q==
-  dependencies:
-    compare-versions "^3.4.0"
-
 "@unimodules/core@~5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@unimodules/core/-/core-5.0.0.tgz#e1e3ca3f91f3d27dbc93c6eebc03a40c711da755"
@@ -2996,15 +3058,6 @@
   dependencies:
     compare-versions "^3.4.0"
 
-"@unimodules/react-native-adapter@~4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@unimodules/react-native-adapter/-/react-native-adapter-4.0.0.tgz#2e02246f6450201d6cb0720f849c7059e8a9bc6d"
-  integrity sha512-zGAyDhqAEWvshdSxc523srP6OAZaSr95Cv5EuxLJbFGcJENHhK8o/qxhwS7/LYTF3LqtOlnSlwQta3v3y6kF4A==
-  dependencies:
-    invariant "^2.2.4"
-    lodash "^4.5.0"
-    prop-types "^15.6.1"
-
 "@unimodules/react-native-adapter@~5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@unimodules/react-native-adapter/-/react-native-adapter-5.0.0.tgz#af9835821a2bf38390b9f09f3231c0b7546ee510"
@@ -3876,7 +3929,7 @@ babel-polyfill@6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-expo@^7.0.0, babel-preset-expo@^7.1.0:
+babel-preset-expo@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/babel-preset-expo/-/babel-preset-expo-7.1.0.tgz#d53ee28fa88c207ba12575f5c3f7753bcb01994e"
   integrity sha512-bdhU3qlivFB3/4SEdVuaKrwUZnLyCD+iFm0M8rRkgOC0EqhJJ/ayFz0Hg/LlS1BiCmdjM1g9rVzBd1KOUv1xJw==
@@ -3889,7 +3942,7 @@ babel-preset-expo@^7.0.0, babel-preset-expo@^7.1.0:
     babel-plugin-react-native-web "^0.11.2"
     metro-react-native-babel-preset "^0.54.1"
 
-babel-preset-expo@~8.0.0:
+babel-preset-expo@^8.0.0, babel-preset-expo@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/babel-preset-expo/-/babel-preset-expo-8.0.0.tgz#08c042363189f2d871381f0d0dbf9644e9f67aea"
   integrity sha512-40UCIE4E+9Xx5K+oEidFHML2+j/WE/ikcC7+3ndWx74MtdmRAtnGecboKRiGUK/vMrHzXIcWPP6/SOnE7zQVgQ==
@@ -5275,10 +5328,10 @@ core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
   integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
 
-core-js@^3.4.1:
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
-  integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
+core-js@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.5.0.tgz#66df8e49be4bd775e6f952a9d083b756ad41c1ed"
+  integrity sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -6555,10 +6608,10 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.6.0:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.1.tgz#269ccccec3ef60ab32358a44d147ac209154b919"
-  integrity sha512-UWzBS79pNcsDSxgxbdjkmzn/B6BhsXMfUaOHnNwyE8nD+Q6pyT96ow2MccVayUTV4yMid4qLhMiQaywctRkBLA==
+eslint@^6.7.2:
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.2.tgz#c17707ca4ad7b2d8af986a33feba71e18a9fecd1"
+  integrity sha512-qMlSWJaCSxDFr8fBPvJM9kJwbazrhNcBU3+DszDW1OlEwKBBRWsJc7NJFelvwQpanHCR14cOLD41x8Eqvo3Nng==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
@@ -6788,25 +6841,11 @@ expect@^24.9.0:
     jest-message-util "^24.9.0"
     jest-regex-util "^24.9.0"
 
-expo-app-loader-provider@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/expo-app-loader-provider/-/expo-app-loader-provider-7.0.0.tgz#9bfff831a204d0a8896e0120bce2209c4304ef03"
-  integrity sha512-C+5zpZN2T7PCj7weLs/ZgAC+y9dvu0VdTXD00Jf9Wo7Pxu/lsLh6ljg9JL91c+2tYDzMEODPNmT+JOUIxAr5zQ==
-
 expo-app-loader-provider@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/expo-app-loader-provider/-/expo-app-loader-provider-8.0.0.tgz#c18ef20a24153f5a0dbb297106ef0bcb5de57180"
   integrity sha512-uMEdstZdm14JW8jfWXBWItIjGPNBH7cLj2pNu5e0pYF21W4j759rGL17NTNWit4UdLZg/zJB/HHRidVwEINfxA==
 
-expo-asset@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-7.0.0.tgz#6d2ba460dd43807f40580199c0b76c508eb1ca63"
-  integrity sha512-MwWrlpzaZqT0NU0V3Wn8oA1pMb7Al49aYAWMPEUZ2UV5NyVAbzYPuS2duIfwX55ivczjJZHpwrhd0hb/3l9ngQ==
-  dependencies:
-    blueimp-md5 "^2.10.0"
-    path-browserify "^1.0.0"
-    url-parse "^1.4.4"
-
 expo-asset@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-8.0.0.tgz#400c7cf8693711ddc87da02d20a7d47bd517afeb"
@@ -6816,20 +6855,20 @@ expo-asset@~8.0.0:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
-expo-cli@^3.8.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.9.1.tgz#82501d4778d70074d6d51903c5b56bc3464a3ae9"
-  integrity sha512-e4yd2F7EsQ7gSklB3vnlhMWK5SMQdwNM0sJE3E86jouO6hfH7J1c3uvsns0gF0qbUyOiKsG+eKYdpuoGnLAdRQ==
+expo-cli@^3.11.1:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/expo-cli/-/expo-cli-3.11.1.tgz#ded8e248e2b08e26cb8e5ed057d9ff1927389251"
+  integrity sha512-efLwUDLhn37+P06sxFzuszgRWssUVJOTlVab/w4hGYi0mYI/0weSHiZggA/NXJfdeLikZrTR7Wk5OChRPHyRiQ==
   dependencies:
-    "@expo/build-tools" "0.1.0-alpha.7"
+    "@expo/build-tools" "0.1.0-alpha.8"
     "@expo/bunyan" "3.0.2"
-    "@expo/config" "^2.5.1"
-    "@expo/dev-tools" "^0.8.1"
-    "@expo/json-file" "^8.2.1"
-    "@expo/package-manager" "^0.0.0"
+    "@expo/config" "^2.5.2"
+    "@expo/dev-tools" "^0.9.2"
+    "@expo/json-file" "^8.2.2"
+    "@expo/package-manager" "^0.0.1"
     "@expo/simple-spinner" "1.0.2"
     "@expo/spawn-async" "1.5.0"
-    "@expo/xdl" "^57.0.1"
+    "@expo/xdl" "57.2.1"
     "@types/cli-table" "^0.3.0"
     "@types/untildify" "^3.0.0"
     ansi-regex "^4.1.0"
@@ -6847,7 +6886,7 @@ expo-cli@^3.8.0:
     enquirer "^2.3.2"
     envinfo "5.10.0"
     es6-error "3.2.0"
-    expo-optimize "^0.0.1"
+    expo-optimize "^0.0.3"
     fs-extra "6.0.1"
     getenv "0.7.0"
     glob "7.1.2"
@@ -6878,13 +6917,6 @@ expo-cli@^3.8.0:
     "@expo/traveling-fastlane-darwin" "1.11.0"
     "@expo/traveling-fastlane-linux" "1.11.0"
 
-expo-constants@~7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-7.0.1.tgz#87be02b6dae5c44a3246537452a0d77af15d46bf"
-  integrity sha512-n9S6lsEfTAhLY+x/Yrtc1rvVUhuEF+CcSWr/reAIGtk35+PYrAKfV4pbetRtqX9tl947bJv7kBQX6jpwYpeIpQ==
-  dependencies:
-    ua-parser-js "^0.7.19"
-
 expo-constants@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-8.0.0.tgz#e2c5a072dacb4263ccfc57dcb4835ca791960d48"
@@ -6897,13 +6929,6 @@ expo-error-recovery@~1.0.0:
   resolved "https://registry.yarnpkg.com/expo-error-recovery/-/expo-error-recovery-1.0.0.tgz#2ca9d59fcd16c5c881af877993731056f2d46afe"
   integrity sha512-xnxciNEpGmwxx8BAE2A9fd9HxtzWtz8p9mikKU+EfWgOXaYD3FJwgbFoVLD2pm4QUarxwOcic76rcwg+0cNnGg==
 
-expo-file-system@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-7.0.0.tgz#ac98233b18774cce299fffd9451f08f21b116564"
-  integrity sha512-ignf5Vf5cPDYO/4HgUkgnL574wMbCNxyazlOvBgV34rLGJzBbFsn++hqC7njr2VTpIIXh2G9vp1+8g6cvsQdqA==
-  dependencies:
-    uuid-js "^0.7.5"
-
 expo-file-system@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-8.0.0.tgz#60b90c8a375308dc85922592a77531a8e0cde6f7"
@@ -6935,19 +6960,12 @@ expo-location@~8.0.0:
   dependencies:
     invariant "^2.2.4"
 
-expo-optimize@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/expo-optimize/-/expo-optimize-0.0.1.tgz#2ab920d22b52bdd4f319300c199345ac600a608c"
-  integrity sha512-EiQ6WnEkFE/mnDMLTbYnQXWw6fN74lJC6qEBrhU/E4+9gsuTWMd8AM0nzx3/KvUkwLAks51D2uKTDKn9llFKqg==
+expo-optimize@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/expo-optimize/-/expo-optimize-0.0.3.tgz#2cff94916ddebc1a9514674551ea06f4f4b639b4"
+  integrity sha512-6j53vpA7jvHkwuO6zaDHIcRW7yCtHznhIXdZFHw/AIbrCQwMNBM8rnfqZvPKpAtqRC8kvfA74nxH5p07BUVNew==
   dependencies:
-    "@expo/config" "^2.5.1"
-    "@expo/image-utils" "^0.2.7"
-    "@expo/json-file" "^8.2.1"
-
-expo-permissions@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-7.0.0.tgz#f4135c3cf8e49c673a9a714459a1eb2b40fe2092"
-  integrity sha512-C+qyVz+pdZO4YpVR2HSC3gsBZg0Qb8brCFgzmDmWcAtgrOiHClaLPdhI2XtQuGh8ubXcKPUGZp++UCEGiG0Jxg==
+    "@expo/image-utils" "^0.2.9"
 
 expo-permissions@~8.0.0:
   version "8.0.0"
@@ -13156,14 +13174,14 @@ react-native-gesture-handler@^1.5.0, react-native-gesture-handler@~1.5.0:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-paper@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.2.1.tgz#8b3f4b8ce36ca471aba3fa7407194afe8595cd35"
-  integrity sha512-PpdKW/NQd/dLeeo17+uC82sF2g236dp4ksJ6L11fUXikGaOQaIiIojHxpWxHHVrXya6ZwXXbHGuyOHY3+XNzfw==
+react-native-paper@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.3.0.tgz#c2a1e9b793b7063aa1848c1ce7db5719912e215a"
+  integrity sha512-YA3thele/g8uLu19IJuZmr1wC54GTlWkyZj0XHtOs8pEaOnUz6roFlSFIRRIo7MmaaAct7XuM8HTlj/PoLaQ8w==
   dependencies:
     "@callstack/react-theme-provider" "^3.0.5"
     color "^3.1.2"
-    react-native-safe-area-view "^0.12.0"
+    react-native-safe-area-view "^0.13.1"
 
 react-native-reanimated@^1.4.0:
   version "1.4.0"
@@ -13175,24 +13193,17 @@ react-native-safe-area-context@^0.6.0:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.6.1.tgz#6886ec1769625ae1d8a0ba8921d99166a0e2e955"
   integrity sha512-027x9zNed2xucJq6WWvA1tyxtNs/D3mcWkTnXy+VX3F8sz8DXktd1X4hG/yqd1XW+okI6lAVAeZYnlCyWLDlSw==
 
-react-native-safe-area-view@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.12.0.tgz#5c312f087300ecf82e8541c3eac25d560e147f22"
-  integrity sha512-UrAXmBC4KNR5K2eczIDZgqceWyKsgG9gmWFerHCvoyApfei8ceBB9u/c//PWCpS5Gt8MRLTmX5jPtzdXo2yNqg==
+react-native-safe-area-view@^0.13.1:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.13.2.tgz#fd8245182cfa3240dcc679b010cff43ad32cecb1"
+  integrity sha512-UEeoHi7HXObKd111RKZa6a+aQdxLHlngfaoM3UBgeDDc+7BU7Vd54DSzFFWDL3lwFhieTSvLh6z89jHDypA9KQ==
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^2.0.0-alpha.11:
-  version "2.0.0-alpha.15"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.15.tgz#40ee432d5f9b6169494a8fd6997add1a8c4b41b3"
-  integrity sha512-Nn4PRFSKLkP0MTXwqOIhMypJ7GMhcU+AZgFJd0DFQhNyU5sLNlKGEzQS6jRY+4MtHJnDXoMOr/o2l9WrI/O3Mg==
-  dependencies:
-    debounce "^1.2.0"
-
-react-native-screens@^2.0.0-alpha.12:
-  version "2.0.0-alpha.17"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.17.tgz#6141234119c844d160cf8b13ea1b81ba005856bd"
-  integrity sha512-iofz5owfGT5K6V9gI3JISrL/dh5yVc5ScLAKqWQgKcbf3yG98ondr4zuwcX6t7G6IfhnDWG7qgkmWBG4u7g3Ww==
+react-native-screens@^2.0.0-alpha.19:
+  version "2.0.0-alpha.19"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.19.tgz#6af901a4061d384d6a6c1b4aae13a9b156e6f17e"
+  integrity sha512-lTzuSQMwyvOcb4pXbNiHkyd1IZRH1e9wMtI8etsF+WPwP+I0K/vdxn3tgSCT5WbX2EyuEArFH3NUfXLmBota8w==
   dependencies:
     debounce "^1.2.0"
 
@@ -13201,36 +13212,36 @@ react-native-tab-view@2.11.0, react-native-tab-view@^2.11.0:
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.11.0.tgz#2e57d1f617ccc88c7f452708804f3409f880b700"
   integrity sha512-vqetlxGO7A8bnqvXcB50MWpRZAImXFrDGz1WCQKdCqe03Ey3ZzENe7yLuWrtBJYlepGfOLAsmCXv+wW82Yfm1w==
 
-react-native-testing-library@^1.9.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/react-native-testing-library/-/react-native-testing-library-1.11.1.tgz#0e2d73991110cf7d7800d86610ad7b7f8a4c9455"
-  integrity sha512-PTwDn1sgegvFqqF1v9zrRUChHqFqp5rWVUjXgkk134wssVhfc2oAuS6kiOvr3w7tLmFzuspxvT5sw0gMrRnDfQ==
+react-native-testing-library@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-testing-library/-/react-native-testing-library-1.12.0.tgz#aa16a2f3033ec742c7e49a5f7bdd46ccd9c83bba"
+  integrity sha512-DbWmlbXQabTsL9QGpdXJduPQdQk+91tmcpAant2lMu3mehkf2DxnfF0q20wogQnLrW+XHy8fCPznrAgQAnH04Q==
   dependencies:
     pretty-format "^24.0.0"
 
-react-native-unimodules@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.6.0.tgz#f62c753705f4b97ba19e2834d8ad3357e204537c"
-  integrity sha512-b563vqelTLtagFLWiI428rUTx4BxWpytlsEC1xcAQdf8chtnVr7QrkRXatiIvJmDAYLL8l+8UxdBW9e0f2rZ9Q==
+react-native-unimodules@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.7.0.tgz#ce4e48898c3ef0b986b87e7421303abf8afc862c"
+  integrity sha512-7tdSIWx5/EhDkEpGYCNaIsiJwluJYsJ0BtvJUVuWliRbN/IBVRc1b/nW4CKKSW/w+fXPel+k3GNlAN0p0S/BiA==
   dependencies:
-    "@unimodules/core" "~4.0.0"
-    "@unimodules/react-native-adapter" "~4.0.0"
+    "@unimodules/core" "~5.0.0"
+    "@unimodules/react-native-adapter" "~5.0.0"
     chalk "^2.4.2"
-    expo-app-loader-provider "~7.0.0"
-    expo-asset "~7.0.0"
-    expo-constants "~7.0.0"
-    expo-file-system "~7.0.0"
-    expo-permissions "~7.0.0"
-    unimodules-barcode-scanner-interface "~4.0.0"
-    unimodules-camera-interface "~4.0.0"
-    unimodules-constants-interface "~4.0.0"
-    unimodules-face-detector-interface "~4.0.0"
-    unimodules-file-system-interface "~4.0.0"
-    unimodules-font-interface "~4.0.0"
-    unimodules-image-loader-interface "~4.0.0"
-    unimodules-permissions-interface "~4.0.0"
-    unimodules-sensors-interface "~4.0.0"
-    unimodules-task-manager-interface "~4.0.0"
+    expo-app-loader-provider "~8.0.0"
+    expo-asset "~8.0.0"
+    expo-constants "~8.0.0"
+    expo-file-system "~8.0.0"
+    expo-permissions "~8.0.0"
+    unimodules-barcode-scanner-interface "~5.0.0"
+    unimodules-camera-interface "~5.0.0"
+    unimodules-constants-interface "~5.0.0"
+    unimodules-face-detector-interface "~5.0.0"
+    unimodules-file-system-interface "~5.0.0"
+    unimodules-font-interface "~5.0.0"
+    unimodules-image-loader-interface "~5.0.0"
+    unimodules-permissions-interface "~5.0.0"
+    unimodules-sensors-interface "~5.0.0"
+    unimodules-task-manager-interface "~5.0.0"
 
 react-native-vector-icons@^6.6.0:
   version "6.6.0"
@@ -14159,6 +14170,13 @@ serialize-error@^2.1.0:
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
   integrity sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=
 
+serialize-error@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-5.0.0.tgz#a7ebbcdb03a5d71a6ed8461ffe0fc1a1afed62ac"
+  integrity sha512-/VtpuyzYf82mHYTtI4QKtwHa79vAdU5OQpNPAmE/0UDdlGT0ZxHwC+J6gXkw29wwoVI8fMPsfcVHOwXtUQYYQA==
+  dependencies:
+    type-fest "^0.8.0"
+
 serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
@@ -15469,7 +15487,7 @@ type-fest@^0.7.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
-type-fest@^0.8.1:
+type-fest@^0.8.0, type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
@@ -15487,10 +15505,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
-  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
+typescript@^3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
+  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
 
 ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
   version "0.7.20"
@@ -15564,101 +15582,51 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
   integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
 
-unimodules-barcode-scanner-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-4.0.0.tgz#69c54ef0d25448dc380de9ca3b0cba3daa2a94c4"
-  integrity sha512-XAW+8s7w/dQ514I/SPfBKHPmbaCOEpYAkdn1aaBoWocVfdvOKf8SqwHSIaP2W/SFUwWNRF4Wqv2HBt1dvuhSSg==
-
 unimodules-barcode-scanner-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-barcode-scanner-interface/-/unimodules-barcode-scanner-interface-5.0.0.tgz#c8965299fb0d4d4c1f323e7c3dd0314eaeeda8c1"
   integrity sha512-8irSCD2UOxojD+3KzrsoGe/TlNOF4NQuCtlhCY5PjDU3SoBAZzSmlLfkz6nYs4iovNila0FZu4vE6msm9Ehdtw==
 
-unimodules-camera-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-camera-interface/-/unimodules-camera-interface-4.0.0.tgz#234c28f4d326ef3e30f15572c07e528557485619"
-  integrity sha512-rEYD3mKarxzgiWWL8J0mPAxzV4i1WI9DsNMRxyV2T7qC/WWIucroZX72O1BkYjUbIKerGmJWeGYbWHheP4/rsA==
-
 unimodules-camera-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-camera-interface/-/unimodules-camera-interface-5.0.0.tgz#980b6ac221deea26badf92ee0baca91c546dc6b1"
   integrity sha512-fe1Q1RZ6daKLtT5M87HdznBAV9qEsuHdPZVUWsLfizCXrHwCcRWErwb4RZoJC20Y11sj+kkLlE4W5fBJDn6/WA==
 
-unimodules-constants-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-constants-interface/-/unimodules-constants-interface-4.0.0.tgz#c71be663a442b43eed773451a4f366a1c47821ac"
-  integrity sha512-FTM64GP+uawURWhuExrsCMebpcu0DdREUCuUmes5qd3/uTM2gqmhbm/ZwSKviH/ar4h630Fdb6P6v9o4MDInbA==
-
 unimodules-constants-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-constants-interface/-/unimodules-constants-interface-5.0.0.tgz#0e224fde9cf809ed7a026672180e3c96dc186f34"
   integrity sha512-s7Fwe3MV6BCj+Sexwfrj9mLAzJlhMfOd/ZM9PNZG10nlTRw8uDxQq0VH1m8NuJqV1Ma2BUmQM7H3lBPe4EysYg==
 
-unimodules-face-detector-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-face-detector-interface/-/unimodules-face-detector-interface-4.0.0.tgz#c68e44d5363d3dfea6f697d983254ac199555074"
-  integrity sha512-ZFzqcNnJkBxvfdKCupvtQUj1yVJkzKivPGV6nydKZc9eJRLUgSXCUWtvXd0vaet1NSQqr2R3r6Ilvj0DzuCzUA==
-
 unimodules-face-detector-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-face-detector-interface/-/unimodules-face-detector-interface-5.0.0.tgz#4d8d63db954b849387e23b84df833945f21c11cc"
   integrity sha512-6VrjHPu429tI54TrGZDQCNIdIXplSwmnJ4jsoVwpubluK+Z4pTRxbEuR3hKelGsvQCUzA38TDD94w7pGMwpe3A==
 
-unimodules-file-system-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-file-system-interface/-/unimodules-file-system-interface-4.0.0.tgz#e8514882a81cd350b69c6026fd52b6d99ba289c9"
-  integrity sha512-dDcKjArDwY3CXLlCL8tf9/JJG25K2lgtAL+560kqrftLu3pi0x5V7JmSDz52pJ4pLd5xL8s1Rzse+rIr5OpM3g==
-
 unimodules-file-system-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-file-system-interface/-/unimodules-file-system-interface-5.0.0.tgz#890cb2c11c55dfccb4abd51cb3b7142bfd15adea"
   integrity sha512-3MRHOigD39geBA6opGkWBoi6nSbFnAr6OWNWiCNN3z1KyFEgeGUFJtTUhzZ/gjsipHubwcWgWBlBSSZKIA7qPQ==
 
-unimodules-font-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-font-interface/-/unimodules-font-interface-4.0.0.tgz#a72d7c75d81dface00c48f523730c15ddf10fbce"
-  integrity sha512-RFD1H405kZy8oYcg7f9Krr+UTUn6EZTcqAb+wRL6Ex9TJmzmxJT6JZ0FsUMezOUEwrdvXRpArH4P1AadHlzzGA==
-
 unimodules-font-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-font-interface/-/unimodules-font-interface-5.0.0.tgz#c9d40f2fe94cc44493f4948d7701def6d2dacd04"
   integrity sha512-S7S5JcOzqpEEt7fmqBkTkps5pg5InQRiu0KBv8txgQ6ZkW/OYjt4j5/fb6IkLB5RWEdm7Ji/xxmJLafRSj2bjA==
 
-unimodules-image-loader-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-image-loader-interface/-/unimodules-image-loader-interface-4.0.0.tgz#92452bfcba5e95b4fc3aba657a5863946d1ccf93"
-  integrity sha512-tv7g1YmZq9ZnG/x9l3qSlpEn93ZuMD+FuQpOZj3/oGDkBlc27vtBSEi8lTySWb9U7UK+bNlHGFqf1lGZcFU1Ug==
-
 unimodules-image-loader-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-image-loader-interface/-/unimodules-image-loader-interface-5.0.0.tgz#59d706367b3df0b0078b1ef510397ff91338256f"
   integrity sha512-HzT+eqp1jgm9/KiJfAlb5p4rykQlMMo6eI4S626vRtFcywCr6yKN7y5vYT5jmSxR2QIWY/jLGrX4DSt9dCbYbg==
 
-unimodules-permissions-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-permissions-interface/-/unimodules-permissions-interface-4.0.0.tgz#c5e044921f5d5867552c991100a5824962fd6b72"
-  integrity sha512-bVZ6JQMO12WvAv6YqcHaPV5KekV7WH606eRiMJq5Qwm2z9yGSM+KaOxOH/n2LVcYckForphsCLf58OGVUtM65Q==
-
 unimodules-permissions-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-permissions-interface/-/unimodules-permissions-interface-5.0.0.tgz#567f3506875befa1f35a64654cf40a2ce9ae4036"
   integrity sha512-ULtTRsGPSkXm1dELq0Eoq7RCReDYhu71NH2iWnnhmg8MZLykBInHw0bgcd0Fe7IYlRK3VXy8elldAIpFf3OKdw==
 
-unimodules-sensors-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-sensors-interface/-/unimodules-sensors-interface-4.0.0.tgz#7f8250b732f7aa0560e04537bea547f304f45c0b"
-  integrity sha512-O7l+N2DLwviTc6gz/ptV7a930Sdo30AvzQLEJPHfqj4e9fCdbrHNrcPqiq0CLqHYYIsdpSDpC6wCWmepLaAgJQ==
-
 unimodules-sensors-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-sensors-interface/-/unimodules-sensors-interface-5.0.0.tgz#42803532a95d9b6f13b4c08846d39a39144b3d7b"
   integrity sha512-ilmeamfmbADXgq595VpJd+5tJLebfbwqMgwVxQ6/EX1niJkHgRk9iloYqx5QRKXwscwbGepIWXjMIv1/DNShQQ==
 
-unimodules-task-manager-interface@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/unimodules-task-manager-interface/-/unimodules-task-manager-interface-4.0.0.tgz#2cf1949ef041ebbd6d9a32d799d1640e1d8f03d7"
-  integrity sha512-c7x5hgEtT+oIVd37TBn2jxlTw2+Bgb55XZ2Md0AV5NCjeRlKw2bIBPwUvSdI1iAziSQOIGOImNaaIUo3L3zW3w==
-
 unimodules-task-manager-interface@~5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/unimodules-task-manager-interface/-/unimodules-task-manager-interface-5.0.0.tgz#a43b573d319dd84ee526d5eb77b540b3ce5d50e0"