Use RNGH buttons

2026-03-06 22:39:41 +08:00 · 2018-10-16 13:21:56 -07:00
parent ccfbaedb9f
commit ffae3efe42
11 changed files with 312 additions and 130 deletions
--- a/examples/NavigationPlayground/App.js
+++ b/examples/NavigationPlayground/App.js
@@ -1,6 +1,9 @@
 import { Platform } from 'react-native';
 import { useScreens } from 'react-native-screens';
-useScreens();
+
+if (Platform.OS === 'android') {
+  //  useScreens();
+}

 import App from './js/App';
 export default App;
--- a/examples/NavigationPlayground/js/App.js
+++ b/examples/NavigationPlayground/js/App.js
@@ -11,11 +11,14 @@ import {
  Platform,
  ScrollView,
  StyleSheet,
-  TouchableOpacity,
  Text,
  StatusBar,
  View,
 } from 'react-native';
+import {
+  RectButton,
+  NativeViewGestureHandler,
+} from 'react-native-gesture-handler';
 import { SafeAreaView, createStackNavigator } from 'react-navigation';
 import { createAppContainer } from '@react-navigation/native';
 import { Assets as StackAssets } from 'react-navigation-stack';
@@ -237,84 +240,91 @@ class MainScreen extends React.Component<any, State> {

    return (
      <View style={{ flex: 1 }}>
-        <Animated.ScrollView
-          style={{ flex: 1 }}
-          scrollEventThrottle={1}
-          onScroll={Animated.event(
-            [
-              {
-                nativeEvent: { contentOffset: { y: this.state.scrollY } },
-              },
-            ],
-            { useNativeDriver: true }
-          )}
-        >
-          <Animated.View
-            style={[
-              styles.backgroundUnderlay,
-              {
-                transform: [
-                  { scale: backgroundScale },
-                  { translateY: backgroundTranslateY },
-                ],
-              },
-            ]}
-          />
-          <Animated.View
-            style={{ opacity, transform: [{ scale }, { translateY }] }}
+        <NativeViewGestureHandler>
+          <Animated.ScrollView
+            style={{ flex: 1 }}
+            scrollEventThrottle={1}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: { contentOffset: { y: this.state.scrollY } },
+                },
+              ],
+              { useNativeDriver: true }
+            )}
          >
-            <SafeAreaView
-              style={styles.bannerContainer}
-              forceInset={{ top: 'always', bottom: 'never' }}
+            <Animated.View
+              style={[
+                styles.backgroundUnderlay,
+                {
+                  transform: [
+                    { scale: backgroundScale },
+                    { translateY: backgroundTranslateY },
+                  ],
+                },
+              ]}
+            />
+            <Animated.View
+              style={{ opacity, transform: [{ scale }, { translateY }] }}
            >
-              <View style={styles.banner}>
-                <Image
-                  source={require('./assets/NavLogo.png')}
-                  style={styles.bannerImage}
-                />
-                <Text style={styles.bannerTitle}>
-                  React Navigation Examples
-                </Text>
+              <SafeAreaView
+                style={styles.bannerContainer}
+                forceInset={{ top: 'always', bottom: 'never' }}
+              >
+                <View style={styles.banner}>
+                  <Image
+                    source={require('./assets/NavLogo.png')}
+                    style={styles.bannerImage}
+                  />
+                  <Text style={styles.bannerTitle}>
+                    React Navigation Examples
+                  </Text>
+                </View>
+              </SafeAreaView>
+            </Animated.View>
+
+            <SafeAreaView
+              forceInset={{ bottom: 'always', horizontal: 'never' }}
+            >
+              <View style={{ backgroundColor: '#fff' }}>
+                {Object.keys(ExampleRoutes).map((routeName: string) => (
+                  <RectButton
+                    key={routeName}
+                    underlayColor="#ccc"
+                    activeOpacity={0.3}
+                    onPress={() => {
+                      let route = ExampleRoutes[routeName];
+                      if (route.screen || route.path || route.params) {
+                        const { path, params, screen } = route;
+                        const { router } = screen;
+                        const action =
+                          path &&
+                          router.getActionForPathAndParams(path, params);
+                        navigation.navigate(routeName, {}, action);
+                      } else {
+                        navigation.navigate(routeName);
+                      }
+                    }}
+                  >
+                    <SafeAreaView
+                      style={styles.itemContainer}
+                      forceInset={{ veritcal: 'never', bottom: 'never' }}
+                    >
+                      <View style={styles.item}>
+                        <Text style={styles.title}>
+                          {ExampleInfo[routeName].name}
+                        </Text>
+                        <Text style={styles.description}>
+                          {ExampleInfo[routeName].description}
+                        </Text>
+                      </View>
+                    </SafeAreaView>
+                  </RectButton>
+                ))}
              </View>
            </SafeAreaView>
-          </Animated.View>
-
-          <SafeAreaView forceInset={{ bottom: 'always', horizontal: 'never' }}>
-            <View style={{ backgroundColor: '#fff' }}>
-              {Object.keys(ExampleRoutes).map((routeName: string) => (
-                <TouchableOpacity
-                  key={routeName}
-                  onPress={() => {
-                    let route = ExampleRoutes[routeName];
-                    if (route.screen || route.path || route.params) {
-                      const { path, params, screen } = route;
-                      const { router } = screen;
-                      const action =
-                        path && router.getActionForPathAndParams(path, params);
-                      navigation.navigate(routeName, {}, action);
-                    } else {
-                      navigation.navigate(routeName);
-                    }
-                  }}
-                >
-                  <SafeAreaView
-                    style={styles.itemContainer}
-                    forceInset={{ veritcal: 'never', bottom: 'never' }}
-                  >
-                    <View style={styles.item}>
-                      <Text style={styles.title}>
-                        {ExampleInfo[routeName].name}
-                      </Text>
-                      <Text style={styles.description}>
-                        {ExampleInfo[routeName].description}
-                      </Text>
-                    </View>
-                  </SafeAreaView>
-                </TouchableOpacity>
-              ))}
-            </View>
-          </SafeAreaView>
-        </Animated.ScrollView>
+          </Animated.ScrollView>
+        </NativeViewGestureHandler>
        <StatusBar barStyle="light-content" />
        <Animated.View
          style={[styles.statusBarUnderlay, { opacity: underlayOpacity }]}
@@ -357,7 +367,6 @@ const styles = StyleSheet.create({
    paddingVertical: 12,
  },
  itemContainer: {
-    backgroundColor: '#fff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ddd',
  },
--- a/examples/NavigationPlayground/js/CustomTabs.js
+++ b/examples/NavigationPlayground/js/CustomTabs.js
@@ -9,9 +9,9 @@ import {
  StyleSheet,
  StatusBar,
  Text,
-  TouchableOpacity,
  View,
 } from 'react-native';
+import { BorderlessButton } from 'react-native-gesture-handler';
 import { createNavigator, SafeAreaView, TabRouter } from 'react-navigation';
 import { createAppContainer } from '@react-navigation/native';
 import SampleText from './SampleText';
@@ -49,13 +49,13 @@ const CustomTabBar = ({ navigation }) => {
  return (
    <SafeAreaView style={styles.tabContainer}>
      {routes.map(route => (
-        <TouchableOpacity
+        <BorderlessButton
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
-        </TouchableOpacity>
+        </BorderlessButton>
      ))}
    </SafeAreaView>
  );
--- a/examples/NavigationPlayground/js/SimpleStack.js
+++ b/examples/NavigationPlayground/js/SimpleStack.js
@@ -60,7 +60,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
      'missing action creators for StackNavigator'
    );
    return (
-      <SafeAreaView>
+      <SafeAreaView forceInset={{ top: 'never' }}>
        <SampleText>{banner}</SampleText>
        <Button
          onPress={() => push('Profile', { name: 'Jane' })}
--- a/examples/NavigationPlayground/js/StackWithTranslucentHeader.js
+++ b/examples/NavigationPlayground/js/StackWithTranslucentHeader.js
@@ -234,14 +234,12 @@ const StackWithTranslucentHeader = createStackNavigator(
  },
  {
    headerTransitionPreset: 'uikit',
-
    // You can leave this out if you don't want the card shadow to
    // be visible through the header
    transitionConfig: () => ({
      headerBackgroundInterpolator:
        HeaderStyleInterpolator.forBackgroundWithTranslation,
    }),
-
    defaultNavigationOptions: {
      headerTransparent: true,
      headerStyle: {
--- a/examples/NavigationPlayground/js/commonComponents/Button.js
+++ b/examples/NavigationPlayground/js/commonComponents/Button.js
@@ -0,0 +1,165 @@
+import React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import { BorderlessButton, RectButton } from 'react-native-gesture-handler';
+
+const invariant = require('fbjs/lib/invariant');
+
+type ButtonProps = $ReadOnly<{|
+  /**
+   * Text to display inside the button
+   */
+  title: string,
+
+  /**
+   * Handler to be called when the user taps the button
+   */
+  onPress: (event?: any) => mixed,
+
+  /**
+   * Color of the text (iOS), or background color of the button (Android)
+   */
+  color?: ?string,
+
+  /**
+   * TV preferred focus (see documentation for the View component).
+   */
+  hasTVPreferredFocus?: ?boolean,
+
+  /**
+   * Text to display for blindness accessibility features
+   */
+  accessibilityLabel?: ?string,
+
+  /**
+   * If true, disable all interactions for this component.
+   */
+  disabled?: ?boolean,
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+|}>;
+
+/**
+ * A basic button component that should render nicely on any platform. Supports
+ * a minimal level of customization.
+ *
+ * <center><img src="img/buttonExample.png"></img></center>
+ *
+ * If this button doesn't look right for your app, you can build your own
+ * button using [TouchableOpacity](docs/touchableopacity.html)
+ * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
+ * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
+ * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
+ *
+ * Example usage:
+ *
+ * ```
+ * import { Button } from 'react-native';
+ * ...
+ *
+ * <Button
+ *   onPress={onPressLearnMore}
+ *   title="Learn More"
+ *   color="#841584"
+ *   accessibilityLabel="Learn more about this purple button"
+ * />
+ * ```
+ *
+ */
+
+export default class Button extends React.Component<ButtonProps> {
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      onPress,
+      title,
+      hasTVPreferredFocus,
+      disabled,
+      testID,
+    } = this.props;
+    const buttonStyles = [styles.button];
+    const textStyles = [styles.text];
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({ color: color });
+      } else {
+        buttonStyles.push({ backgroundColor: color });
+      }
+    }
+    const accessibilityStates = [];
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+      accessibilityStates.push('disabled');
+    }
+    invariant(
+      typeof title === 'string',
+      'The title prop of a Button must be a string'
+    );
+    const formattedTitle =
+      Platform.OS === 'android' ? title.toUpperCase() : title;
+    const Touchable = Platform.OS === 'android' ? RectButton : BorderlessButton;
+    return (
+      <Touchable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityStates={accessibilityStates}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+      >
+        <View style={buttonStyles}>
+          <Text style={textStyles} disabled={disabled}>
+            {formattedTitle}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    ios: {},
+    android: {
+      elevation: 4,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
+      backgroundColor: '#2196F3',
+      borderRadius: 2,
+    },
+  }),
+  text: {
+    textAlign: 'center',
+    padding: 8,
+    ...Platform.select({
+      ios: {
+        // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
+        color: '#007AFF',
+        fontSize: 18,
+      },
+      android: {
+        color: 'white',
+        fontWeight: '500',
+      },
+    }),
+  },
+  buttonDisabled: Platform.select({
+    ios: {},
+    android: {
+      elevation: 0,
+      backgroundColor: '#dfdfdf',
+    },
+  }),
+  textDisabled: Platform.select({
+    ios: {
+      color: '#cdcdcd',
+    },
+    android: {
+      color: '#a1a1a1',
+    },
+  }),
+});
--- a/examples/NavigationPlayground/js/commonComponents/ButtonWithMargin.js
+++ b/examples/NavigationPlayground/js/commonComponents/ButtonWithMargin.js
@@ -1,9 +1,10 @@
-import { Button as RNButton, StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform } from 'react-native';
+import BaseButton from './Button';
 import React from 'react';

 export const Button = props => (
  <View style={styles.margin}>
-    <RNButton {...props} />
+    <BaseButton {...props} />
  </View>
 );

--- a/examples/NavigationPlayground/package.json
+++ b/examples/NavigationPlayground/package.json
@@ -8,9 +8,10 @@
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "flow",
-    "postinstall": "rm -rf node_modules/react-native-screens"
+    "postinstall": "rm -rf node_modules/react-native-screens && rm -rf node_modules/react-native-gesture-handler"
  },
  "dependencies": {
+    "@react-navigation/core": "3.0.0-alpha.6",
    "expo": "^30.0.0",
    "invariant": "^2.2.4",
    "react": "16.3.1",
--- a/examples/NavigationPlayground/yarn.lock
+++ b/examples/NavigationPlayground/yarn.lock
@@ -516,15 +516,16 @@
    pouchdb-collections "^1.0.1"
    tiny-queue "^0.2.1"

-"@react-navigation/core@^3.0.0-alpha.4":
-  version "3.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.0.0-alpha.4.tgz#0167a8352e867ebd09e444aac42b315f569fb81d"
-  integrity sha512-kj9PzNadCjPYU1NGzNrg6eb3KDTNECUzWL38Ef7yHwhNG6U62AbedLD8VtuSZHGAEFXnI68hhnuoIe+9f6aJ8w==
+"@react-navigation/core@3.0.0-alpha.6", "@react-navigation/core@^3.0.0-alpha.4":
+  version "3.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.0.0-alpha.6.tgz#9224bad5519d895936f97cd22363fe887e47d73e"
+  integrity sha512-TrdSsJTOD9CvuohhNe3TMH8xVwCcFINyX+dp8ZVUOP9sl+vJMdx7gIJwGc6k4OeNiX4gDJ69yCvFiwz/kGsp0Q==
  dependencies:
    create-react-context "^0.2.3"
    hoist-non-react-statics "^3.0.1"
-    path-to-regexp "^2.4.0"
+    path-to-regexp "^1.7.0"
    query-string "^6.2.0"
+    react-lifecycles-compat "^3.0.4"

 "@react-navigation/native@^3.0.0-alpha.5":
  version "3.0.0-alpha.5"
@@ -2377,9 +2378,9 @@ eslint-plugin-react-native-globals@^0.1.1:
  integrity sha512-9aEPf1JEpiTjcFAmmyw8eiIXmcNZOqaZyHO77wgm0/dWfT/oxC1SrIq8ET38pMxHYrcB6Uew+TzUVsBeczF88g==

 eslint-plugin-react-native@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.3.0.tgz#77135f1b9d69058c5612777aac90d9cd6d35af33"
-  integrity sha512-+Td4JX9POuhNDQdIxlzgcD0RDBmA1kB6dTnOCORtN/cDa2vUyIpGLuVkVvgrnUOizsgD7uhniomTpynRcjIvFQ==
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.5.0.tgz#78a5d6aadb11f85d1b114488d1fddfa2bf4fc1fb"
+  integrity sha512-L0qwiBQbG3MVMQk4XVCyyX+9nqJjr9YUmqpJ98Gb+uAmD+xlxT33rDL9ZBQgzMzBxDcUW6WiPcll8j9uXpyLyQ==
  dependencies:
    eslint-plugin-react-native-globals "^0.1.1"

@@ -3700,6 +3701,11 @@ is-windows@^1.0.2:
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==

+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -5205,10 +5211,12 @@ path-parse@^1.0.5:
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==

-path-to-regexp@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
-  integrity sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"

 path-type@^1.0.0:
  version "1.1.0"
@@ -5534,16 +5542,11 @@ react-native-safe-module@^1.1.0:
  dependencies:
    dedent "^0.6.0"

-react-native-screens@^1.0.0-alpha.14:
+react-native-screens@^1.0.0-alpha.14, react-native-screens@^1.0.0-alpha.5:
  version "1.0.0-alpha.15"
  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.15.tgz#5b5a0041310b46f12048fda1908d52e7290ec18f"
  integrity sha512-S2OM/ieD+Krk+0/Z2Vz2rTUWYud5hJgCRZqXRtqEfMgEcGI4FBopXp7mwXCGbA2PFLjZwZSwLlsZ6RX30WnjRw==

-react-native-screens@^1.0.0-alpha.5:
-  version "1.0.0-alpha.14"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.14.tgz#fe3ccdcec7be8e1ada090c34a7f8951337adf653"
-  integrity sha512-SXVl5dnN5ZgV7jF2NdqScp91qW3QOZipBPp8f0CpAtb/ucEQkteiQnTGb4BNS5OvpMVi1UNw4BXWhUsKRPqzPw==
-
 react-native-svg@6.2.2:
  version "6.2.2"
  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-6.2.2.tgz#5803cddce374a542b4468c38a2474fca32080685"
@@ -5660,10 +5663,10 @@ react-navigation-material-bottom-tabs@1.0.0-alpha.0:
    prop-types "^15.6.0"
    react-navigation-tabs "^1.0.0-alpha"

-react-navigation-stack@1.0.0-alpha.17:
-  version "1.0.0-alpha.17"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.17.tgz#d06a5bd97087e8427f7ba8effdad0f65fbc3bdc0"
-  integrity sha512-aQ1nE69U9bTl4Nb2AvWQJ2kyYL1F3e+V7PYvU/pxPVhJe2Tk7G9UO4adc4/kFJCFpKE2952s0de6TbAJXcEayw==
+react-navigation-stack@1.0.0-alpha.18:
+  version "1.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.18.tgz#671d992b891ce42b5746a3a5c964d70e816f482e"
+  integrity sha512-9KVWydg0FIyKwMApQhQzIZ84leP5LYAT//7XfKjLYPjj1p1vgJRq1Qtu1jpAYHkVE2dr3SDKJBCQ30of193wLg==
  dependencies:
    "@react-navigation/core" "^3.0.0-alpha.4"
    "@react-navigation/native" "^3.0.0-alpha.5"
@@ -6309,19 +6312,18 @@ sprintf-js@~1.0.2:
  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=

 sshpk@^1.7.0:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
-  integrity sha1-xvxhZIo9nE52T9P8306hBeSSupg=
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.1.tgz#b79a089a732e346c6e0714830f36285cd38191a2"
+  integrity sha512-mSdgNUaidk+dRU5MhYtN9zebdzF2iG0cNPWy8HG+W8y+fT1JnSkh0fzzpjOa0L7P8i1Rscz38t0h4gPcKz43xA==
  dependencies:
    asn1 "~0.2.3"
    assert-plus "^1.0.0"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-    safer-buffer "^2.0.2"
-  optionalDependencies:
    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
    tweetnacl "~0.14.0"

 stack-utils@^1.0.1:
--- a/package.json
+++ b/package.json
@@ -34,10 +34,10 @@
    "react-native": "*"
  },
  "dependencies": {
-    "@react-navigation/core": "^3.0.0-alpha.4",
+    "@react-navigation/core": "3.0.0-alpha.6",
    "@react-navigation/native": "^3.0.0-alpha.5",
    "react-navigation-drawer": "1.0.0-alpha.4",
-    "react-navigation-stack": "1.0.0-alpha.17",
+    "react-navigation-stack": "1.0.0-alpha.18",
    "react-navigation-tabs": "1.0.0-alpha.2"
  },
  "devDependencies": {
--- a/yarn.lock
+++ b/yarn.lock
@@ -54,15 +54,16 @@
    node-fetch "^2.1.1"
    url-template "^2.0.8"

-"@react-navigation/core@^3.0.0-alpha.4":
-  version "3.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.0.0-alpha.4.tgz#0167a8352e867ebd09e444aac42b315f569fb81d"
-  integrity sha512-kj9PzNadCjPYU1NGzNrg6eb3KDTNECUzWL38Ef7yHwhNG6U62AbedLD8VtuSZHGAEFXnI68hhnuoIe+9f6aJ8w==
+"@react-navigation/core@3.0.0-alpha.6", "@react-navigation/core@^3.0.0-alpha.4":
+  version "3.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.0.0-alpha.6.tgz#9224bad5519d895936f97cd22363fe887e47d73e"
+  integrity sha512-TrdSsJTOD9CvuohhNe3TMH8xVwCcFINyX+dp8ZVUOP9sl+vJMdx7gIJwGc6k4OeNiX4gDJ69yCvFiwz/kGsp0Q==
  dependencies:
    create-react-context "^0.2.3"
    hoist-non-react-statics "^3.0.1"
-    path-to-regexp "^2.4.0"
+    path-to-regexp "^1.7.0"
    query-string "^6.2.0"
+    react-lifecycles-compat "^3.0.4"

 "@react-navigation/native@^3.0.0-alpha.5":
  version "3.0.0-alpha.5"
@@ -6260,10 +6261,12 @@ path-parse@^1.0.5:
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==

-path-to-regexp@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
-  integrity sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"

 path-type@^1.0.0:
  version "1.1.0"
@@ -6725,10 +6728,10 @@ react-navigation-drawer@1.0.0-alpha.4:
    "@react-navigation/core" "^3.0.0-alpha.4"
    "@react-navigation/native" "^3.0.0-alpha.5"

-react-navigation-stack@1.0.0-alpha.17:
-  version "1.0.0-alpha.17"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.17.tgz#d06a5bd97087e8427f7ba8effdad0f65fbc3bdc0"
-  integrity sha512-aQ1nE69U9bTl4Nb2AvWQJ2kyYL1F3e+V7PYvU/pxPVhJe2Tk7G9UO4adc4/kFJCFpKE2952s0de6TbAJXcEayw==
+react-navigation-stack@1.0.0-alpha.18:
+  version "1.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.0.0-alpha.18.tgz#671d992b891ce42b5746a3a5c964d70e816f482e"
+  integrity sha512-9KVWydg0FIyKwMApQhQzIZ84leP5LYAT//7XfKjLYPjj1p1vgJRq1Qtu1jpAYHkVE2dr3SDKJBCQ30of193wLg==
  dependencies:
    "@react-navigation/core" "^3.0.0-alpha.4"
    "@react-navigation/native" "^3.0.0-alpha.5"