chore: publish

- @react-navigation/bottom-tabs@5.11.3
 - @react-navigation/compat@5.3.11
 - @react-navigation/core@5.15.0
 - @react-navigation/devtools@5.1.19
 - @react-navigation/drawer@5.11.5
 - @react-navigation/material-bottom-tabs@5.3.11
 - @react-navigation/material-top-tabs@5.3.11
 - @react-navigation/native@5.9.0
 - @react-navigation/routers@5.7.0
 - @react-navigation/stack@5.13.0

.github/ISSUE_TEMPLATE/config.yml

@@ -14,7 +14,7 @@ contact_links:
     about: Ask and answer questions using the react-navigation label.
   - name: Reactiflux
     url: https://www.reactiflux.com/
-    about: Chat with other community members in the react-navigation channel.
+    about: Chat with other community members in the help-react-native channel.
   - name: Write an RFC
     url: https://github.com/react-navigation/rfcs
     about: Write a RFC if you have ideas for how to implement a feature request.

.github/workflows/check-repro.yml

@@ -0,0 +1,48 @@
+name: Check for repro
+on:
+  issues:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+
+jobs:
+  check-repro:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const user = context.payload.sender.login;
+            const body = context.payload.comment
+              ? context.payload.comment.body
+              : context.payload.issue.body;
+
+            const regex = new RegExp(
+              `https?:\\/\\/((github\\.com\\/${user}\\/[^/]+\\/?[\\s\\n]+)|(snack\\.expo\\.io\\/.+))`,
+              'gm'
+            );
+
+            if (!regex.test(body)) {
+              return;
+            }
+
+            await github.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['repro provided'],
+            });
+
+            try {
+              await github.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: 'needs repro',
+              });
+            } catch (error) {
+              if (!/Label does not exist/.test(error.message)) {
+                throw error;
+              }
+            }

.github/workflows/expo-preview.yml

@@ -45,7 +45,7 @@ jobs:
         run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"
 
       - name: Comment on PR
-        uses: actions/github-script@v2
+        uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |

.github/workflows/first-pull-request.yml

@@ -0,0 +1,45 @@
+name: First pull request
+on: pull_request
+
+jobs:
+  welcome:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            // Get a list of all issues created by the PR opener
+            // See: https://octokit.github.io/rest.js/#pagination
+            const creator = context.payload.sender.login;
+            const opts = github.issues.listForRepo.endpoint.merge({
+              ...context.issue,
+              creator,
+              state: 'all'
+            });
+
+            const issues = await github.paginate(opts);
+
+            for (const issue of issues) {
+              if (issue.number === context.issue.number) {
+                continue;
+              }
+
+              if (issue.pull_request) {
+                return ;// Creator is already a contributor.
+              }
+            }
+
+            await github.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['first pull request'],
+            });
+
+            await github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "Hey ${creator}! Thanks for opening the pull request. If you haven't already, make sure to read our [contribution guidelines](https://github.com/react-navigation/react-navigation/blob/main/CONTRIBUTING.md)."
+            });

.github/workflows/triage.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'needs more info'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'needs repro'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -38,7 +38,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'question'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -46,14 +46,14 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question or an issue unrelated to this library. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel.\n\nIf you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information."
+              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question or an issue unrelated to this library. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#help-react-native` channel.\n\nIf you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information."
             })
 
   feature-request:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'feature-request'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -68,7 +68,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-screens'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -83,7 +83,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-reanimated'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -98,7 +98,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-gesture-handler'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
@@ -113,7 +113,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-safe-area-context'
     steps:
-      - uses: actions/github-script@v2
+      - uses: actions/github-script@v3
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |

example/metro.config.js

@@ -8,12 +8,15 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(root, 'packages');
 
-const workspaces = fs
 // List all packages under `packages/`
+const workspaces = fs
   .readdirSync(packages)
-  // Ignore hidden files such as .DS_Store
+  .map((p) => path.join(packages, p))
-  .filter((p) => !p.startsWith('.'))
+  .filter(
-  .map((p) => path.join(packages, p));
+    (p) =>
+      fs.statSync(p).isDirectory() &&
+      fs.existsSync(path.join(p, 'package.json'))
+  );
 
 // Get the list of dependencies for all packages in the monorepo
 const modules = ['@expo/vector-icons']
@@ -68,14 +71,9 @@ module.exports = {
     enhanceMiddleware: (middleware) => {
       return (req, res, next) => {
         // When an asset is imported outside the project root, it has wrong path on Android
-        // This happens for the back button in stack, so we fix the path to correct one
+        // So we fix the path to correct one
-        const assets = '/packages/stack/src/views/assets';
+        if (/\/packages\/.+\.png\?.+$/.test(req.url)) {
-
+          req.url = `/assets/../${req.url}`;
-        if (req.url.startsWith(assets)) {
-          req.url = req.url.replace(
-            assets,
-            '/assets/../packages/stack/src/views/assets'
-          );
         }
 
         return middleware(req, res, next);

example/src/index.tsx

@@ -9,13 +9,13 @@ import {
   Linking,
   LogBox,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
   DarkTheme as PaperDarkTheme,
-  Appbar,
   List,
   Divider,
   Text,
@@ -28,10 +28,7 @@ import {
   PathConfigMap,
   NavigationContainerRef,
 } from '@react-navigation/native';
-import {
+import { createDrawerNavigator } from '@react-navigation/drawer';
-  createDrawerNavigator,
-  DrawerScreenProps,
-} from '@react-navigation/drawer';
 import {
   createStackNavigator,
   StackScreenProps,
@@ -65,8 +62,7 @@ if (Platform.OS !== 'web') {
 enableScreens();
 
 type RootDrawerParamList = {
-  Root: undefined;
+  Examples: undefined;
-  Another: undefined;
 };
 
 const SCREENS = {
@@ -231,9 +227,6 @@ export default function App() {
           // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
           prefixes: LinkingPrefixes,
           config: {
-            screens: {
-              Root: {
-                path: '',
             initialRouteName: 'Home',
             screens: Object.keys(SCREENS).reduce<PathConfigMap>(
               (acc, name) => {
@@ -269,13 +262,15 @@ export default function App() {
                 return acc;
               },
               {
-                    Home: '',
+                Home: {
+                  screens: {
+                    Examples: '',
+                  },
+                },
                 NotFound: '*',
               }
             ),
           },
-            },
-          },
         }}
         fallback={<Text>Loading…</Text>}
         documentTitle={{
@@ -283,17 +278,6 @@ export default function App() {
             `${options?.title ?? route?.name} - React Navigation Example`,
         }}
       >
-        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
-          <Drawer.Screen
-            name="Root"
-            options={{
-              title: 'Examples',
-              drawerIcon: ({ size, color }) => (
-                <MaterialIcons size={size} color={color} name="folder" />
-              ),
-            }}
-          >
-            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
         <Stack.Navigator
           screenOptions={{
             headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
@@ -301,16 +285,21 @@ export default function App() {
         >
           <Stack.Screen
             name="Home"
+            options={{
+              headerShown: false,
+            }}
+          >
+            {() => (
+              <Drawer.Navigator
+                drawerType={isLargeScreen ? 'permanent' : undefined}
+                screenOptions={{ headerShown: true }}
+              >
+                <Drawer.Screen
+                  name="Examples"
                   options={{
                     title: 'Examples',
-                    headerLeft: isLargeScreen
+                    drawerIcon: ({ size, color }) => (
-                      ? undefined
+                      <MaterialIcons size={size} color={color} name="folder" />
-                      : () => (
-                          <Appbar.Action
-                            color={theme.colors.text}
-                            icon="menu"
-                            onPress={() => navigation.toggleDrawer()}
-                          />
                     ),
                   }}
                 >
@@ -318,6 +307,7 @@ export default function App() {
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
+                      <SafeAreaView edges={['right', 'bottom', 'left']}>
                         <SettingsItem
                           label="Right to left"
                           value={I18nManager.isRTL}
@@ -336,7 +326,9 @@ export default function App() {
                               theme.dark ? 'light' : 'dark'
                             );
 
-                          setTheme((t) => (t.dark ? DefaultTheme : DarkTheme));
+                            setTheme((t) =>
+                              t.dark ? DefaultTheme : DarkTheme
+                            );
                           }}
                         />
                         <Divider />
@@ -350,28 +342,27 @@ export default function App() {
                             />
                           )
                         )}
+                      </SafeAreaView>
                     </ScrollView>
                   )}
+                </Drawer.Screen>
+              </Drawer.Navigator>
+            )}
           </Stack.Screen>
           <Stack.Screen
             name="NotFound"
             component={NotFound}
             options={{ title: 'Oops!' }}
           />
-                {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
+          {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map((name) => (
-                  (name) => (
             <Stack.Screen
               key={name}
               name={name}
               getComponent={() => SCREENS[name].component}
               options={{ title: SCREENS[name].title }}
             />
-                  )
+          ))}
-                )}
         </Stack.Navigator>
-            )}
-          </Drawer.Screen>
-        </Drawer.Navigator>
       </NavigationContainer>
     </PaperProvider>
   );

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.11.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.2...@react-navigation/bottom-tabs@5.11.3) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+
+
+
+## [5.11.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.1...@react-navigation/bottom-tabs@5.11.2) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.0...@react-navigation/bottom-tabs@5.11.1) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.7...@react-navigation/bottom-tabs@5.11.0) (2020-11-09)
+
+
+### Features
+
+* add a hook to get bottom tab bar height ([e08c91f](https://github.com/react-navigation/react-navigation/commit/e08c91ff0a3df13dc6e6096a3e95f60722e6946b)), closes [#8037](https://github.com/react-navigation/react-navigation/issues/8037) [#8536](https://github.com/react-navigation/react-navigation/issues/8536)
+* add a tabBarBadgeStyle option to customize the badge ([6ac4d40](https://github.com/react-navigation/react-navigation/commit/6ac4d40140189a29d857c4d1203bced6929f7baf))
+
+
+
+
+
 ## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.6...@react-navigation/bottom-tabs@5.10.7) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.10.7",
+  "version": "5.11.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,8 +40,7 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/native": "^5.8.7",
     "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -49,6 +48,7 @@
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
     "typescript": "^4.0.3"
@@ -60,7 +60,7 @@
     "react-native-safe-area-context": ">= 0.6.0",
     "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/bottom-tabs/src/index.tsx

@@ -9,6 +9,13 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
 export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
 
+/**
+ * Utilities
+ */
+export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+
+export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+
 /**
  * Types
  */

packages/bottom-tabs/src/types.tsx

@@ -109,6 +109,12 @@ export type BottomTabNavigationOptions = {
    */
   tabBarBadge?: number | string;
 
+  /**
+   * Custom style for the tab bar badge.
+   * You can specify a background color or text color here.
+   */
+  tabBarBadgeStyle?: StyleProp<TextStyle>;
+
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
    * It's recommended to set this if you don't have a label for the tab.

packages/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default React.createContext<((height: number) => void) | undefined>(
+  undefined
+);

packages/bottom-tabs/src/utils/BottomTabBarHeightContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number | undefined>(undefined);

packages/bottom-tabs/src/utils/useBottomTabBarHeight.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+
+export default function useFloatingBottomTabBarHeight() {
+  const height = React.useContext(BottomTabBarHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?"
+    );
+  }
+
+  return height;
+}

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

@@ -5,20 +5,25 @@ import {
   StyleSheet,
   Platform,
   LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import {
   NavigationContext,
   NavigationRouteContext,
+  TabNavigationState,
+  ParamListBase,
   CommonActions,
   useTheme,
   useLinkBuilder,
 } from '@react-navigation/native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import { useSafeArea, EdgeInsets } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
 import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import type { BottomTabBarProps } from '../types';
+import type { BottomTabBarProps, LabelPosition } from '../types';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -31,13 +36,93 @@ const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 const useNativeDriver = Platform.OS !== 'web';
 
+type Options = {
+  state: TabNavigationState<ParamListBase>;
+  layout: { height: number; width: number };
+  dimensions: { height: number; width: number };
+  tabStyle: StyleProp<ViewStyle>;
+  labelPosition: LabelPosition | undefined;
+  adaptive: boolean | undefined;
+};
+
+const shouldUseHorizontalLabels = ({
+  state,
+  layout,
+  dimensions,
+  adaptive = true,
+  labelPosition,
+  tabStyle,
+}: Options) => {
+  if (labelPosition) {
+    return labelPosition === 'beside-icon';
+  }
+
+  if (!adaptive) {
+    return false;
+  }
+
+  if (layout.width >= 768) {
+    // Screen size matches a tablet
+    let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
+
+    const flattenedStyle = StyleSheet.flatten(tabStyle);
+
+    if (flattenedStyle) {
+      if (typeof flattenedStyle.width === 'number') {
+        maxTabItemWidth = flattenedStyle.width;
+      } else if (typeof flattenedStyle.maxWidth === 'number') {
+        maxTabItemWidth = flattenedStyle.maxWidth;
+      }
+    }
+
+    return state.routes.length * maxTabItemWidth <= layout.width;
+  } else {
+    return dimensions.width > dimensions.height;
+  }
+};
+
+const getPaddingBottom = (insets: EdgeInsets) =>
+  Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+
+export const getTabBarHeight = ({
+  dimensions,
+  insets,
+  style,
+  ...rest
+}: Options & {
+  insets: EdgeInsets;
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) => {
+  // @ts-ignore
+  const customHeight = StyleSheet.flatten(style)?.height;
+
+  if (typeof customHeight === 'number') {
+    return customHeight;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({ dimensions, ...rest });
+  const paddingBottom = getPaddingBottom(insets);
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  }
+
+  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+};
+
 export default function BottomTabBar({
   state,
   navigation,
   descriptors,
   activeBackgroundColor,
   activeTintColor,
-  adaptive = true,
+  adaptive,
   allowFontScaling,
   inactiveBackgroundColor,
   inactiveTintColor,
@@ -60,6 +145,8 @@ export default function BottomTabBar({
   const dimensions = useWindowDimensions();
   const isKeyboardShown = useIsKeyboardShown();
 
+  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+
   const shouldShowTabBar =
     focusedOptions.tabBarVisible !== false &&
     !(keyboardHidesTabBar && isKeyboardShown);
@@ -120,11 +207,19 @@ export default function BottomTabBar({
     width: dimensions.width,
   });
 
-  const isLandscape = () => dimensions.width > dimensions.height;
-
   const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
+    const topBorderWidth =
+      // @ts-ignore
+      StyleSheet.flatten([styles.tabBar, style])?.borderTopWidth;
+
+    onHeightChange?.(
+      height +
+        paddingBottom +
+        (typeof topBorderWidth === 'number' ? topBorderWidth : 0)
+    );
+
     setLayout((layout) => {
       if (height === layout.height && width === layout.width) {
         return layout;
@@ -138,34 +233,6 @@ export default function BottomTabBar({
   };
 
   const { routes } = state;
-  const shouldUseHorizontalLabels = () => {
-    if (labelPosition) {
-      return labelPosition === 'beside-icon';
-    }
-
-    if (!adaptive) {
-      return false;
-    }
-
-    if (layout.width >= 768) {
-      // Screen size matches a tablet
-      let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
-
-      const flattenedStyle = StyleSheet.flatten(tabStyle);
-
-      if (flattenedStyle) {
-        if (typeof flattenedStyle.width === 'number') {
-          maxTabItemWidth = flattenedStyle.width;
-        } else if (typeof flattenedStyle.maxWidth === 'number') {
-          maxTabItemWidth = flattenedStyle.maxWidth;
-        }
-      }
-
-      return routes.length * maxTabItemWidth <= layout.width;
-    } else {
-      return isLandscape();
-    }
-  };
 
   const defaultInsets = useSafeArea();
 
@@ -176,22 +243,26 @@ export default function BottomTabBar({
     left: safeAreaInsets?.left ?? defaultInsets.left,
   };
 
-  const paddingBottom = Math.max(
+  const paddingBottom = getPaddingBottom(insets);
-    insets.bottom - Platform.select({ ios: 4, default: 0 }),
+  const tabBarHeight = getTabBarHeight({
-    0
+    state,
-  );
+    insets,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+    style,
+  });
 
-  const getDefaultTabBarHeight = () => {
+  const hasHorizontalLabels = shouldUseHorizontalLabels({
-    if (
+    state,
-      Platform.OS === 'ios' &&
+    dimensions,
-      !Platform.isPad &&
+    layout,
-      isLandscape() &&
+    adaptive,
-      shouldUseHorizontalLabels()
+    labelPosition,
-    ) {
+    tabStyle,
-      return COMPACT_TABBAR_HEIGHT;
+  });
-    }
-    return DEFAULT_TABBAR_HEIGHT;
-  };
 
   return (
     <Animated.View
@@ -218,7 +289,7 @@ export default function BottomTabBar({
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
-          height: getDefaultTabBarHeight() + paddingBottom,
+          height: tabBarHeight,
           paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
@@ -276,7 +347,7 @@ export default function BottomTabBar({
                 <BottomTabItem
                   route={route}
                   focused={focused}
-                  horizontal={shouldUseHorizontalLabels()}
+                  horizontal={hasHorizontalLabels}
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
@@ -290,6 +361,7 @@ export default function BottomTabBar({
                   button={options.tabBarButton}
                   icon={options.tabBarIcon}
                   badge={options.tabBarBadge}
+                  badgeStyle={options.tabBarBadgeStyle}
                   label={label}
                   showLabel={showLabel}
                   labelStyle={labelStyle}

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

@@ -47,6 +47,10 @@ type Props = {
    * Text to show in a badge on the tab icon.
    */
   badge?: number | string;
+  /**
+   * Custom style for the badge.
+   */
+  badgeStyle?: StyleProp<TextStyle>;
   /**
    * URL to use for the link to the tab.
    */
@@ -122,6 +126,7 @@ export default function BottomTabBarItem({
   label,
   icon,
   badge,
+  badgeStyle,
   to,
   button = ({
     children,
@@ -235,6 +240,7 @@ export default function BottomTabBarItem({
         route={route}
         horizontal={horizontal}
         badge={badge}
+        badgeStyle={badgeStyle}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import {
   NavigationHelpersContext,
@@ -9,9 +15,13 @@ import {
 } from '@react-navigation/native';
 import { ScreenContainer } from 'react-native-screens';
 
-import SafeAreaProviderCompat from './SafeAreaProviderCompat';
+import SafeAreaProviderCompat, {
+  initialSafeAreaInsets,
+} from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
-import BottomTabBar from './BottomTabBar';
+import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
 import type {
   BottomTabNavigationConfig,
   BottomTabDescriptorMap,
@@ -27,6 +37,7 @@ type Props = BottomTabNavigationConfig & {
 
 type State = {
   loaded: string[];
+  tabBarHeight: number;
 };
 
 function SceneContent({
@@ -67,9 +78,28 @@ export default class BottomTabView extends React.Component<Props, State> {
     };
   }
 
-  state: State = {
+  constructor(props: Props) {
-    loaded: [this.props.state.routes[this.props.state.index].key],
+    super(props);
+
+    const { state, tabBarOptions } = this.props;
+
+    const dimensions = Dimensions.get('window');
+    const tabBarHeight = getTabBarHeight({
+      state,
+      dimensions,
+      layout: { width: dimensions.width, height: 0 },
+      insets: initialSafeAreaInsets,
+      adaptive: tabBarOptions?.adaptive,
+      labelPosition: tabBarOptions?.labelPosition,
+      tabStyle: tabBarOptions?.tabStyle,
+      style: tabBarOptions?.style,
+    });
+
+    this.state = {
+      loaded: [state.routes[state.index].key],
+      tabBarHeight: tabBarHeight,
     };
+  }
 
   private renderTabBar = () => {
     const {
@@ -87,6 +117,16 @@ export default class BottomTabView extends React.Component<Props, State> {
     });
   };
 
+  private handleTabBarHeightChange = (height: number) => {
+    this.setState((state) => {
+      if (state.tabBarHeight !== height) {
+        return { tabBarHeight: height };
+      }
+
+      return null;
+    });
+  };
+
   render() {
     const {
       state,
@@ -97,7 +137,7 @@ export default class BottomTabView extends React.Component<Props, State> {
       sceneContainerStyle,
     } = this.props;
     const { routes } = state;
-    const { loaded } = this.state;
+    const { loaded, tabBarHeight } = this.state;
 
     return (
       <NavigationHelpersContext.Provider value={navigation}>
@@ -133,13 +173,19 @@ export default class BottomTabView extends React.Component<Props, State> {
                       isFocused={isFocused}
                       style={sceneContainerStyle}
                     >
+                      <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                         {descriptor.render()}
+                      </BottomTabBarHeightContext.Provider>
                     </SceneContent>
                   </ResourceSavingScene>
                 );
               })}
             </ScreenContainer>
+            <BottomTabBarHeightCallbackContext.Provider
+              value={this.handleTabBarHeightChange}
+            >
               {this.renderTabBar()}
+            </BottomTabBarHeightCallbackContext.Provider>
           </View>
         </SafeAreaProviderCompat>
       </NavigationHelpersContext.Provider>

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

@@ -16,34 +16,38 @@ type Props = {
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingScene extends React.Component<Props> {
+export default function ResourceSavingScene({
-  render() {
+  isVisible,
+  children,
+  style,
+  ...rest
+}: Props) {
   // react-native-screens is buggy on web
   if (screensEnabled?.() && Platform.OS !== 'web') {
-      const { isVisible, ...rest } = this.props;
-
     if (shouldUseActivityState) {
       return (
         // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen activityState={isVisible ? 2 : 0} {...rest} />
+        <Screen activityState={isVisible ? 2 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
       );
     } else {
       return (
         // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen active={isVisible ? 1 : 0} {...rest} />
+        <Screen active={isVisible ? 1 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
       );
     }
   }
 
-    const { isVisible, children, style, ...rest } = this.props;
-
   return (
     <View
+      // @ts-expect-error: hidden exists on web, but not in React Native
+      hidden={!isVisible}
       style={[
         styles.container,
-          Platform.OS === 'web'
+        Platform.OS === 'web' ? { display: isVisible ? 'flex' : 'none' } : null,
-            ? { display: isVisible ? 'flex' : 'none' }
-            : null,
         style,
       ]}
       collapsable={false}
@@ -55,13 +59,20 @@ export default class ResourceSavingScene extends React.Component<Props> {
       pointerEvents={isVisible ? 'auto' : 'none'}
       {...rest}
     >
-        <View style={isVisible ? styles.attached : styles.detached}>
+      <View
+        style={
+          Platform.OS === 'web'
+            ? null
+            : isVisible
+            ? styles.attached
+            : styles.detached
+        }
+      >
         {children}
       </View>
     </View>
   );
 }
-}
 
 const styles = StyleSheet.create({
   container: {

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

@@ -12,7 +12,7 @@ import {
 // The provider component for safe area initializes asynchornously
 // Until the insets are available, there'll be blank screen
 // To avoid the blank screen, we specify some initial values
-const initialSafeAreaInsets = {
+export const initialSafeAreaInsets = {
   // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type { Route } from '@react-navigation/native';
 import Badge from './Badge';
 
@@ -7,6 +13,7 @@ type Props = {
   route: Route<string>;
   horizontal: boolean;
   badge?: string | number;
+  badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: string;
@@ -22,6 +29,7 @@ type Props = {
 export default function TabBarIcon({
   horizontal,
   badge,
+  badgeStyle,
   activeOpacity,
   inactiveOpacity,
   activeTintColor,
@@ -56,6 +64,7 @@ export default function TabBarIcon({
         style={[
           styles.badge,
           horizontal ? styles.badgeHorizontal : styles.badgeVertical,
+          badgeStyle,
         ]}
         size={(size * 3) / 4}
       >

packages/compat/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.10...@react-navigation/compat@5.3.11) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.9...@react-navigation/compat@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.8...@react-navigation/compat@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.7...@react-navigation/compat@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.6...@react-navigation/compat@5.3.7) (2020-11-08)
 
 **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.3.7",
+  "version": "5.3.11",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,17 +31,17 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/native": "^5.8.7",
     "@types/react": "^16.9.53",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/core/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.15.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.4...@react-navigation/core@5.15.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* print an error when passing a second argument to useFocusEffect ([2317633](https://github.com/react-navigation/react-navigation/commit/23176336528f98924d19f321d41cb70f13300edd))
+
+
+### Features
+
+* add a way to specify an unique ID for screens ([b19f76b](https://github.com/react-navigation/react-navigation/commit/b19f76bfffe623759e67d925bfd067c753a453bf))
+
+
+
+
+
+## [5.14.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.3...@react-navigation/core@5.14.4) (2020-11-20)
+
+
+### Bug Fixes
+
+* fix incorrect state change events in independent nested container ([95b2599](https://github.com/react-navigation/react-navigation/commit/95b2599877f5ceedf753e399e0586bb4af54cb87)), closes [#9080](https://github.com/react-navigation/react-navigation/issues/9080)
+
+
+
+
+
+## [5.14.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.2...@react-navigation/core@5.14.3) (2020-11-10)
+
+
+### Bug Fixes
+
+* improve the error message for incorrect screen configuration ([8f764d8](https://github.com/react-navigation/react-navigation/commit/8f764d8b0809604716d5d92ea33cc1beee02e804))
+
+
+
+
+
+## [5.14.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.1...@react-navigation/core@5.14.2) (2020-11-09)
+
+
+### Bug Fixes
+
+* throw if the same pattern resolves to multiple screens ([48b2e77](https://github.com/react-navigation/react-navigation/commit/48b2e777307908e8b3fcb49d8555b610dc0e38f2))
+
+
+
+
+
 ## [5.14.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.0...@react-navigation/core@5.14.1) (2020-11-08)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.14.1",
+  "version": "5.15.0",
   "keywords": [
     "react",
     "react-native",
@@ -35,26 +35,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.6.1",
+    "@react-navigation/routers": "^5.7.0",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.15",
     "query-string": "^6.13.6",
     "react-is": "^16.13.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-is": "^16.7.1",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "react-test-renderer": "~16.13.1",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/core/src/BaseNavigationContainer.tsx

@@ -8,9 +8,11 @@ import {
   NavigationAction,
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
+import UnhandledActionContext from './UnhandledActionContext';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import NavigationStateContext from './NavigationStateContext';
-import UnhandledActionContext from './UnhandledActionContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import NavigationContext from './NavigationContext';
 import { ScheduleUpdateContext } from './useScheduleUpdate';
 import useChildListeners from './useChildListeners';
 import useKeyedChildListeners from './useKeyedChildListeners';
@@ -397,7 +399,7 @@ const BaseNavigationContainer = React.forwardRef(
       []
     );
 
-    return (
+    let element = (
       <ScheduleUpdateContext.Provider value={scheduleContext}>
         <NavigationBuilderContext.Provider value={builderContext}>
           <NavigationStateContext.Provider value={context}>
@@ -410,6 +412,19 @@ const BaseNavigationContainer = React.forwardRef(
         </NavigationBuilderContext.Provider>
       </ScheduleUpdateContext.Provider>
     );
+
+    if (independent) {
+      // We need to clear any existing contexts for nested independent container to work correctly
+      element = (
+        <NavigationRouteContext.Provider value={undefined}>
+          <NavigationContext.Provider value={undefined}>
+            {element}
+          </NavigationContext.Provider>
+        </NavigationRouteContext.Provider>
+      );
+    }
+
+    return element;
   }
 );
 

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

@@ -757,3 +757,67 @@ it('invokes the unhandled action listener with the unhandled action', () => {
     type: 'NAVIGATE',
   });
 });
+
+it('works with state change events in independent nested container', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const onStateChange = jest.fn();
+
+  render(
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <BaseNavigationContainer
+              independent
+              ref={ref}
+              onStateChange={onStateChange}
+            >
+              <TestNavigator>
+                <Screen name="qux">{() => null}</Screen>
+                <Screen name="lex">{() => null}</Screen>
+              </TestNavigator>
+            </BaseNavigationContainer>
+          )}
+        </Screen>
+        <Screen name="bar">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  act(() => ref.current?.navigate('lex'));
+
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: '15',
+    routeNames: ['qux', 'lex'],
+    routes: [
+      { key: 'qux', name: 'qux' },
+      { key: 'lex', name: 'lex' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 1,
+    key: '15',
+    routeNames: ['qux', 'lex'],
+    routes: [
+      { key: 'qux', name: 'qux' },
+      { key: 'lex', name: 'lex' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+});

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

@@ -2673,6 +2673,47 @@ it('uses nearest parent wildcard match for unmatched paths', () => {
   );
 });
 
+it('throws if two screens map to the same pattern', () => {
+  const path = '/bar/42/baz/test';
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: 'baz',
+              },
+            },
+            Bax: '/bar/:id/baz',
+          },
+        },
+      },
+    })
+  ).toThrow(
+    "Found conflicting screens with the same pattern. The pattern 'bar/:id/baz' resolves to both 'Foo > Bax' and 'Foo > Bar > Baz'. Patterns must be unique and cannot resolve to more than one screen."
+  );
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: '',
+              },
+            },
+          },
+        },
+      },
+    })
+  ).not.toThrow();
+});
+
 it('throws if wildcard is specified with legacy config', () => {
   const path = '/bar/42/baz/test';
   const config = {

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

@@ -1462,6 +1462,51 @@ it('throws when Screen is not the direct children', () => {
   );
 });
 
+it('throws when undefined component is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const Undefined = undefined;
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Undefined name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  spy.mockRestore();
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'undefined' for the screen 'foo')"
+  );
+});
+
+it('throws when a tag is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <screen name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'screen' for the screen 'foo')"
+  );
+});
+
 it('throws when a React Element is not the direct children', () => {
   const TestNavigator = (props: any) => {
     useNavigationBuilder(MockRouter, props);

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

@@ -239,3 +239,135 @@ it('runs cleanup when component is unmounted', () => {
   expect(focusEffect).toBeCalledTimes(1);
   expect(focusEffectCleanup).toBeCalledTimes(1);
 });
+
+it('prints error when a dependency array is passed', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => {}, []);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "You passed a second argument to 'useFocusEffect', but it only accepts one argument."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect returns a value', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => 42);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up. You returned '42'."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect returns null', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => null);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up. You returned 'null'. If your effect does not require clean-up, return 'undefined' (or nothing)."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect is an async function', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(async () => {});
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up.\n\nIt looks like you wrote 'useFocusEffect(async () => ...)' or returned a Promise."
+  );
+
+  spy.mockRestore();
+});

packages/core/src/getPathFromState.tsx

@@ -239,6 +239,10 @@ export default function getPathFromState(
 // Object.fromEntries is not available in older iOS versions
 const fromEntries = <K extends string, V>(entries: (readonly [K, V])[]) =>
   entries.reduce((acc, [k, v]) => {
+    if (acc.hasOwnProperty(k)) {
+      throw new Error(`A value for key '${k}' already exists in the object.`);
+    }
+
     acc[k] = v;
     return acc;
   }, {} as Record<K, V>);

packages/core/src/getStateFromPath.tsx

@@ -33,6 +33,11 @@ type ResultState = PartialState<NavigationState> & {
   state?: ResultState;
 };
 
+type ParsedRoute = {
+  name: string;
+  params?: Record<string, any> | undefined;
+};
+
 /**
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
@@ -119,6 +124,12 @@ export default function getStateFromPath(
       // - the most exhaustive ones are always at the beginning
       // - patterns with wildcard are always at the end
 
+      // If 2 patterns are same, move the one with less route names up
+      // This is an error state, so it's only useful for consistent error messages
+      if (a.pattern === b.pattern) {
+        return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
+      }
+
       // If one of the patterns starts with the other, it's more exhaustive
       // So move it up
       if (a.pattern.startsWith(b.pattern)) {
@@ -155,6 +166,35 @@ export default function getStateFromPath(
       return bWildcardIndex - aWildcardIndex;
     });
 
+  // Check for duplicate patterns in the config
+  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
+    if (acc[config.pattern]) {
+      const a = acc[config.pattern].routeNames;
+      const b = config.routeNames;
+
+      // It's not a problem if the path string omitted from a inner most screen
+      // For example, it's ok if a path resolves to `A > B > C` or `A > B`
+      const intersects =
+        a.length > b.length
+          ? b.every((it, i) => a[i] === it)
+          : a.every((it, i) => b[i] === it);
+
+      if (!intersects) {
+        throw new Error(
+          `Found conflicting screens with the same pattern. The pattern '${
+            config.pattern
+          }' resolves to both '${a.join(' > ')}' and '${b.join(
+            ' > '
+          )}'. Patterns must be unique and cannot resolve to more than one screen.`
+        );
+      }
+    }
+
+    return Object.assign(acc, {
+      [config.pattern]: config,
+    });
+  }, {});
+
   if (remaining === '/') {
     // We need to add special handling of empty path so navigation to empty path also works
     // When handling empty path, we should only look at the root level config
@@ -189,7 +229,7 @@ export default function getStateFromPath(
   if (legacy === false) {
     // If we're not in legacy mode,, we match the whole path against the regex instead of segments
     // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-    const { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+    const { routes, remainingPath } = matchAgainstConfigs(
       remaining,
       configs.map((c) => ({
         ...c,
@@ -198,39 +238,30 @@ export default function getStateFromPath(
       }))
     );
 
-    if (routeNames !== undefined) {
+    if (routes !== undefined) {
       // This will always be empty if full path matched
+      current = createNestedStateObject(routes, initialRoutes);
       remaining = remainingPath;
-      current = createNestedStateObject(
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
       result = current;
     }
   } else {
     // In legacy mode, we divide the path into segments and match piece by piece
     // This preserves the legacy behaviour, but we should remove it in next major
     while (remaining) {
-      let { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+      let { routes, remainingPath } = matchAgainstConfigs(remaining, configs);
-        remaining,
-        configs
-      );
 
       remaining = remainingPath;
 
       // If we hadn't matched any segments earlier, use the path as route name
-      if (routeNames === undefined) {
+      if (routes === undefined) {
         const segments = remaining.split('/');
 
-        routeNames = [decodeURIComponent(segments[0])];
+        routes = [{ name: decodeURIComponent(segments[0]) }];
         segments.shift();
         remaining = segments.join('/');
       }
 
-      const state = createNestedStateObject(
+      const state = createNestedStateObject(routes, initialRoutes);
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
 
       if (current) {
         // The state should be nested inside the deepest route we parsed before
@@ -274,8 +305,7 @@ const joinPaths = (...paths: string[]): string =>
     .join('/');
 
 const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
-  let routeNames: string[] | undefined;
+  let routes: ParsedRoute[] | undefined;
-  let allParams: Record<string, any> | undefined;
   let remainingPath = remaining;
 
   // Go through all configs, and see if the next path segment matches our regex
@@ -288,29 +318,48 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      routeNames = [...config.routeNames];
+      const matchedParams = config.pattern
+        ?.split('/')
+        .filter((p) => p.startsWith(':'))
+        .reduce<Record<string, any>>(
+          (acc, p, i) =>
+            Object.assign(acc, {
+              // The param segments appear every second item starting from 2 in the regex match result
+              [p]: match![(i + 1) * 2].replace(/\//, ''),
+            }),
+          {}
+        );
 
-      const paramPatterns = config.pattern
+      routes = config.routeNames.map((name) => {
-        .split('/')
+        const config = configs.find((c) => c.screen === name);
-        .filter((p) => p.startsWith(':'));
+        const params = config?.path
+          ?.split('/')
+          .filter((p) => p.startsWith(':'))
+          .reduce<Record<string, any>>((acc, p) => {
+            const value = matchedParams[p];
 
-      if (paramPatterns.length) {
+            if (value) {
-        allParams = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
+              const key = p.replace(/^:/, '').replace(/\?$/, '');
-          const value = match![(i + 1) * 2].replace(/\//, ''); // The param segments appear every second item starting from 2 in the regex match result
+              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
-
+            }
-          acc[p] = value;
 
             return acc;
           }, {});
+
+        if (params && Object.keys(params).length) {
+          return { name, params };
         }
 
+        return { name };
+      });
+
       remainingPath = remainingPath.replace(match[1], '');
 
       break;
     }
   }
 
-  return { routeNames, allParams, remainingPath };
+  return { routes, remainingPath };
 };
 
 const createNormalizedConfigs = (
@@ -473,57 +522,48 @@ const findInitialRoute = (
 // it is the end of state and if there is initialRoute for this level
 const createStateObject = (
   initialRoute: string | undefined,
-  routeName: string,
+  route: ParsedRoute,
-  params: Record<string, any> | undefined,
   isEmpty: boolean
 ): InitialState => {
   if (isEmpty) {
     if (initialRoute) {
       return {
         index: 1,
-        routes: [{ name: initialRoute }, { name: routeName as string, params }],
+        routes: [{ name: initialRoute }, route],
       };
     } else {
       return {
-        routes: [{ name: routeName as string, params }],
+        routes: [route],
       };
     }
   } else {
     if (initialRoute) {
       return {
         index: 1,
-        routes: [
+        routes: [{ name: initialRoute }, { ...route, state: { routes: [] } }],
-          { name: initialRoute },
-          { name: routeName as string, params, state: { routes: [] } },
-        ],
       };
     } else {
       return {
-        routes: [{ name: routeName as string, params, state: { routes: [] } }],
+        routes: [{ ...route, state: { routes: [] } }],
       };
     }
   }
 };
 
 const createNestedStateObject = (
-  routes: { name: string; params?: object }[],
+  routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[]
 ) => {
   let state: InitialState;
-  let route = routes.shift() as { name: string; params?: object };
+  let route = routes.shift() as ParsedRoute;
   let initialRoute = findInitialRoute(route.name, initialRoutes);
 
-  state = createStateObject(
+  state = createStateObject(initialRoute, route, routes.length === 0);
-    initialRoute,
-    route.name,
-    route.params,
-    routes.length === 0
-  );
 
   if (routes.length > 0) {
     let nestedState = state;
 
-    while ((route = routes.shift() as { name: string; params?: object })) {
+    while ((route = routes.shift() as ParsedRoute)) {
       initialRoute = findInitialRoute(route.name, initialRoutes);
 
       const nestedStateIndex =
@@ -531,8 +571,7 @@ const createNestedStateObject = (
 
       nestedState.routes[nestedStateIndex].state = createStateObject(
         initialRoute,
-        route.name,
+        route,
-        route.params,
         routes.length === 0
       );
 
@@ -546,46 +585,6 @@ const createNestedStateObject = (
   return state;
 };
 
-const createRouteObjects = (
-  configs: RouteConfig[],
-  routeNames: string[],
-  allParams?: Record<string, any>
-) =>
-  routeNames.map((name) => {
-    const config = configs.find((c) => c.screen === name);
-
-    let params: object | undefined;
-
-    if (allParams && config?.path) {
-      const pattern = config.path;
-
-      if (pattern) {
-        const paramPatterns = pattern
-          .split('/')
-          .filter((p) => p.startsWith(':'));
-
-        if (paramPatterns.length) {
-          params = paramPatterns.reduce<Record<string, any>>((acc, p) => {
-            const key = p.replace(/^:/, '').replace(/\?$/, '');
-            const value = allParams![p];
-
-            if (value) {
-              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
-            }
-
-            return acc;
-          }, {});
-        }
-      }
-    }
-
-    if (params && Object.keys(params).length) {
-      return { name, params };
-    }
-
-    return { name };
-  });
-
 const findFocusedRoute = (state: InitialState) => {
   let current: InitialState | undefined = state;
 

packages/core/src/types.tsx

@@ -388,6 +388,14 @@ export type RouteConfig<
         navigation: any;
       }) => ScreenListeners<State, EventMap>);
 
+  /**
+   * Function to return an unique ID for this screen.
+   * Receives an object with the route params.
+   * For a given screen name, there will always be only one screen corresponding to an ID.
+   * If `undefined` is returned, it acts same as no `getId` being specified.
+   */
+  getId?: ({ params }: { params: ParamList[RouteName] }) => string | undefined;
+
   /**
    * Initial params object for the route.
    */

packages/core/src/useFocusEffect.tsx

@@ -13,6 +13,20 @@ type EffectCallback = () => undefined | void | (() => void);
 export default function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  if (arguments[1] !== undefined) {
+    const message =
+      "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " +
+      "If you want to pass a dependency array, you can use 'React.useCallback':\n\n" +
+      'useFocusEffect(\n' +
+      '  React.useCallback(() => {\n' +
+      '    // Your code here\n' +
+      '  }, [depA, depB])\n' +
+      ');\n\n' +
+      'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+
+    console.error(message);
+  }
+
   React.useEffect(() => {
     let isFocused = false;
     let cleanup: undefined | void | (() => void);
@@ -45,10 +59,10 @@ export default function useFocusEffect(effect: EffectCallback) {
             '    }\n\n' +
             '    fetchData();\n' +
             '  }, [someId])\n' +
-            '};\n\n' +
+            ');\n\n' +
             'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
         } else {
-          message += ` You returned: '${JSON.stringify(destroy)}'`;
+          message += ` You returned '${JSON.stringify(destroy)}'.`;
         }
 
         console.error(message);

packages/core/src/useNavigationBuilder.tsx

@@ -7,6 +7,7 @@ import {
   ParamListBase,
   Router,
   RouterFactory,
+  RouterConfigOptions,
   PartialState,
   NavigationAction,
   Route,
@@ -90,10 +91,17 @@ const getRouteConfigsFromChildren = <
     }
 
     throw new Error(
-      `A navigator can only contain 'Screen' components as its direct children (found '${
+      `A navigator can only contain 'Screen' components as its direct children (found ${
-        // @ts-expect-error: child can be any type and we're accessing it safely, but TS doesn't understand it
+        React.isValidElement(child)
-        child.type?.name ? child.type.name : String(child)
+          ? `'${
-      }'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
+              typeof child.type === 'string' ? child.type : child.type?.name
+            }'${
+              child.props?.name ? ` for the screen '${child.props.name}'` : ''
+            }`
+          : typeof child === 'object'
+          ? JSON.stringify(child)
+          : `'${String(child)}'`
+      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
     );
   }, []);
 
@@ -250,6 +258,15 @@ export default function useNavigationBuilder<
     },
     {}
   );
+  const routeGetIdList = routeNames.reduce<
+    RouterConfigOptions['routeGetIdList']
+  >(
+    (acc, curr) =>
+      Object.assign(acc, {
+        [curr]: screens[curr].getId,
+      }),
+    {}
+  );
 
   if (!routeNames.length) {
     throw new Error(
@@ -290,6 +307,7 @@ export default function useNavigationBuilder<
         router.getInitialState({
           routeNames,
           routeParamList,
+          routeGetIdList,
         }),
         true,
       ];
@@ -300,6 +318,7 @@ export default function useNavigationBuilder<
           {
             routeNames,
             routeParamList,
+            routeGetIdList,
           }
         ),
         false,
@@ -329,6 +348,7 @@ export default function useNavigationBuilder<
     nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
+      routeGetIdList,
     });
   }
 
@@ -365,6 +385,7 @@ export default function useNavigationBuilder<
       ? router.getStateForAction(nextState, action, {
           routeNames,
           routeParamList,
+          routeGetIdList,
         })
       : null;
 
@@ -373,6 +394,7 @@ export default function useNavigationBuilder<
         ? router.getRehydratedState(updatedState, {
             routeNames,
             routeParamList,
+            routeGetIdList,
           })
         : nextState;
   }
@@ -494,6 +516,7 @@ export default function useNavigationBuilder<
     routerConfigOptions: {
       routeNames,
       routeParamList,
+      routeGetIdList,
     },
     emitter,
   });

packages/core/src/useNavigationHelpers.tsx

@@ -78,6 +78,7 @@ export default function useNavigationHelpers<
           router.getStateForAction(state, CommonActions.goBack() as Action, {
             routeNames: state.routeNames,
             routeParamList: {},
+            routeGetIdList: {},
           }) !== null ||
           parentNavigationHelpers?.canGoBack() ||
           false

packages/devtools/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.18...@react-navigation/devtools@5.1.19) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.17...@react-navigation/devtools@5.1.18) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.16...@react-navigation/devtools@5.1.17) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.15...@react-navigation/devtools@5.1.16) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
 ## [5.1.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.14...@react-navigation/devtools@5.1.15) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "5.1.15",
+  "version": "5.1.19",
   "keywords": [
     "react",
     "react-native",
@@ -36,22 +36,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.14.1",
+    "@react-navigation/core": "^5.15.0",
     "deep-equal": "^2.0.4"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^16.9.53",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/drawer/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.11.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.4...@react-navigation/drawer@5.11.5) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+
+
+
+## [5.11.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.3...@react-navigation/drawer@5.11.4) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.11.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.2...@react-navigation/drawer@5.11.3) (2020-11-16)
+
+
+### Bug Fixes
+
+* hide drawer's header by default ([794339e](https://github.com/react-navigation/react-navigation/commit/794339eeed7c0d3b0e8b1752e494fbb4608ddfad))
+
+
+
+
+
+## [5.11.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.1...@react-navigation/drawer@5.11.2) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.0...@react-navigation/drawer@5.11.1) (2020-11-09)
+
+
+### Bug Fixes
+
+* provide correct context to drawe header ([18bbd17](https://github.com/react-navigation/react-navigation/commit/18bbd177d91ccc4308516208a8b9f1a34ca5cc41))
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.7...@react-navigation/drawer@5.11.0) (2020-11-09)
+
+
+### Bug Fixes
+
+* try fixing drawer blink on Android ([5217245](https://github.com/react-navigation/react-navigation/commit/52172453dfb71822c2fb0f5947d00bac4a840d07))
+
+
+### Features
+
+* add a getIsDrawerOpenFromState utility to drawer ([5bd682f](https://github.com/react-navigation/react-navigation/commit/5bd682f0bf6b28a95fb3e7fc9e1974057a877cb0))
+* add option to show a header in drawer navigator screens ([dbe961b](https://github.com/react-navigation/react-navigation/commit/dbe961ba5bb243e8da4d889c3c7dd6ed1de287c4))
+
+
+
+
+
 ## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.6...@react-navigation/drawer@5.10.7) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.10.7",
+  "version": "5.11.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,14 +45,14 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/native": "^5.8.7",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
@@ -68,7 +68,7 @@
     "react-native-safe-area-context": ">= 0.6.0",
     "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/drawer/src/index.tsx

@@ -17,6 +17,7 @@ export { default as DrawerContentScrollView } from './views/DrawerContentScrollV
  */
 export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
 
+export { default as getIsDrawerOpenFromState } from './utils/getIsDrawerOpenFromState';
 export { default as useIsDrawerOpen } from './utils/useIsDrawerOpen';
 
 /**

packages/drawer/src/types.tsx

@@ -18,6 +18,8 @@ export type Scene = {
   color?: string;
 };
 
+export type Layout = { width: number; height: number };
+
 export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   /**
    * Position of the drawer on the screen. Defaults to `left`.
@@ -94,12 +96,95 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   detachInactiveScreens?: boolean;
 };
 
-export type DrawerNavigationOptions = {
+export type DrawerHeaderOptions = {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to scene `title`.
+   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?:
+    | string
+    | ((props: {
+        /**
+         * 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.
+         */
+        children?: string;
+        /**
+         * Style object for the title element.
+         */
+        style?: StyleProp<TextStyle>;
+      }) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
+  /**
+   * Style object for the title component.
+   */
+  headerTitleStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
+   */
+  headerTitleAllowFontScaling?: boolean;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Accessibility label for the header left button.
+   */
+  headerLeftAccessibilityLabel?: string;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  headerPressColorAndroid?: string;
+  /**
+   * Tint color for the header.
+   */
+  headerTintColor?: string;
+  /**
+   * Style object for the header. You can specify a custom background color here, for example.
+   */
+  headerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * By default, it uses the top value from the safe area insets of the device.
+   * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+   */
+  headerStatusBarHeight?: number;
+};
+
+export type DrawerNavigationOptions = DrawerHeaderOptions & {
   /**
    * Title text for the screen.
    */
   title?: string;
 
+  /**
+   * Function that given `HeaderProps` returns a React Element to display as a header.
+   */
+  header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. The header is not shown by default.
+   * Setting this to `true` shows the header.
+   */
+  headerShown?: boolean;
+
   /**
    * Title string of a screen displayed in the drawer
    * or a function that given { focused: boolean, color: string } returns a React.Node
@@ -187,6 +272,20 @@ export type DrawerContentOptions = {
   style?: StyleProp<ViewStyle>;
 };
 
+export type DrawerHeaderProps = {
+  /**
+   * Layout of the screen.
+   */
+  layout: Layout;
+  /**
+   * Object representing the current scene, such as the route object and descriptor.
+   */
+  scene: {
+    route: Route<string>;
+    descriptor: DrawerDescriptor;
+  };
+};
+
 export type DrawerNavigationEventMap = {
   /**
    * Event which fires when the drawer opens.

packages/drawer/src/utils/getIsDrawerOpenFromState.tsx

@@ -0,0 +1,16 @@
+import type {
+  DrawerNavigationState,
+  ParamListBase,
+} from '@react-navigation/native';
+
+export default function getIsDrawerOpenFromState(
+  state: DrawerNavigationState<ParamListBase>
+): boolean {
+  if (state.history == null) {
+    throw new Error(
+      "Couldn't find the drawer status in the state object. Is it a valid state object of drawer navigator?"
+    );
+  }
+
+  return state.history.some((it) => it.type === 'drawer');
+}

packages/drawer/src/views/Drawer.tsx

@@ -57,9 +57,10 @@ const DIRECTION_LEFT = 1;
 const DIRECTION_RIGHT = -1;
 
 const SWIPE_DISTANCE_THRESHOLD_DEFAULT = 60;
-
 const SWIPE_DISTANCE_MINIMUM = 5;
 
+const DEFAULT_DRAWER_WIDTH = '80%';
+
 const SPRING_CONFIG = {
   stiffness: 1000,
   damping: 500,
@@ -202,7 +203,8 @@ export default class DrawerView extends React.Component<Props> {
 
   private getDrawerWidth = (): number => {
     const { drawerStyle, dimensions } = this.props;
-    const { width } = StyleSheet.flatten(drawerStyle);
+    const { width = DEFAULT_DRAWER_WIDTH } =
+      StyleSheet.flatten(drawerStyle) || {};
 
     if (typeof width === 'string' && width.endsWith('%')) {
       // Try to calculate width if a percentage is given
@@ -246,7 +248,7 @@ export default class DrawerView extends React.Component<Props> {
   private containerWidth = new Value<number>(this.props.dimensions.width);
   private drawerWidth = new Value<number>(this.initialDrawerWidth);
   private drawerOpacity = new Value<number>(
-    this.initialDrawerWidth || this.props.drawerType === 'permanent' ? 1 : 0
+    this.props.drawerType === 'permanent' ? 1 : 0
   );
   private drawerPosition = new Value<number>(
     this.props.drawerPosition === 'right' ? DIRECTION_RIGHT : DIRECTION_LEFT
@@ -730,7 +732,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     bottom: 0,
-    width: '80%',
+    width: DEFAULT_DRAWER_WIDTH,
   },
   content: {
     flex: 1,

packages/drawer/src/views/DrawerView.tsx

@@ -10,6 +10,8 @@ import {
 import { ScreenContainer } from 'react-native-screens';
 import {
   NavigationHelpersContext,
+  NavigationContext,
+  NavigationRouteContext,
   DrawerNavigationState,
   DrawerActions,
   useTheme,
@@ -19,16 +21,19 @@ import {
 import { GestureHandlerRootView } from './GestureHandler';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
+import Header from './Header';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
 import DrawerOpenContext from '../utils/DrawerOpenContext';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
+import getIsDrawerOpenFromState from '../utils/getIsDrawerOpenFromState';
 import type {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
   DrawerContentComponentProps,
+  DrawerHeaderProps,
 } from '../types';
 
 type Props = DrawerNavigationConfig & {
@@ -90,7 +95,7 @@ export default function DrawerView({
 
   const { colors } = useTheme();
 
-  const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
+  const isDrawerOpen = getIsDrawerOpenFromState(state);
 
   const handleDrawerOpen = React.useCallback(() => {
     navigation.dispatch({
@@ -169,6 +174,11 @@ export default function DrawerView({
             return null;
           }
 
+          const {
+            header = (props: DrawerHeaderProps) => <Header {...props} />,
+            headerShown = false,
+          } = descriptor.options;
+
           return (
             <ResourceSavingScene
               key={route.key}
@@ -176,6 +186,16 @@ export default function DrawerView({
               isVisible={isFocused}
               enabled={detachInactiveScreens}
             >
+              {headerShown ? (
+                <NavigationContext.Provider value={descriptor.navigation}>
+                  <NavigationRouteContext.Provider value={route}>
+                    {header({
+                      layout: dimensions,
+                      scene: { route, descriptor },
+                    })}
+                  </NavigationRouteContext.Provider>
+                </NavigationContext.Provider>
+              ) : null}
               {descriptor.render()}
             </ResourceSavingScene>
           );

packages/drawer/src/views/Header.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { Text, View, Image, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerActions, useTheme } from '@react-navigation/native';
+import TouchableItem from './TouchableItem';
+import type { Layout, DrawerHeaderProps } from '../types';
+
+export const getDefaultHeaderHeight = (
+  layout: Layout,
+  statusBarHeight: number
+): number => {
+  const isLandscape = layout.width > layout.height;
+
+  let headerHeight;
+
+  if (Platform.OS === 'ios') {
+    if (isLandscape && !Platform.isPad) {
+      headerHeight = 32;
+    } else {
+      headerHeight = 44;
+    }
+  } else if (Platform.OS === 'android') {
+    headerHeight = 56;
+  } else {
+    headerHeight = 64;
+  }
+
+  return headerHeight + statusBarHeight;
+};
+
+export default function HeaderSegment({ scene, layout }: DrawerHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+
+  const {
+    title,
+    headerTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft,
+    headerLeftAccessibilityLabel,
+    headerRight,
+    headerTitleAllowFontScaling,
+    headerTitleStyle,
+    headerTintColor,
+    headerPressColorAndroid,
+    headerStyle,
+    headerStatusBarHeight = insets.top,
+  } = scene.descriptor.options;
+
+  const currentTitle =
+    typeof headerTitle !== 'function' && headerTitle !== undefined
+      ? headerTitle
+      : title !== undefined
+      ? title
+      : scene.route.name;
+
+  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+
+  const leftButton = headerLeft ? (
+    headerLeft({ tintColor: headerTintColor })
+  ) : (
+    <TouchableItem
+      accessible
+      accessibilityRole="button"
+      accessibilityComponentType="button"
+      accessibilityLabel={headerLeftAccessibilityLabel}
+      accessibilityTraits="button"
+      delayPressIn={0}
+      onPress={() =>
+        scene.descriptor.navigation.dispatch(DrawerActions.toggleDrawer())
+      }
+      style={styles.touchable}
+      pressColor={headerPressColorAndroid}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+      borderless
+    >
+      <Image
+        style={[
+          styles.icon,
+          headerTintColor ? { tintColor: headerTintColor } : null,
+        ]}
+        source={require('./assets/toggle-drawer-icon.png')}
+        fadeDuration={0}
+      />
+    </TouchableItem>
+  );
+  const rightButton = headerRight
+    ? headerRight({ tintColor: headerTintColor })
+    : null;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[
+        {
+          height: defaultHeight,
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        styles.container,
+        headerStyle,
+      ]}
+    >
+      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+      <View pointerEvents="box-none" style={styles.content}>
+        {leftButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.left, { left: insets.left }]}
+          >
+            {leftButton}
+          </View>
+        ) : null}
+        <View
+          pointerEvents="box-none"
+          style={[
+            headerTitleAlign === 'left'
+              ? {
+                  position: 'absolute',
+                  left: (leftButton ? 72 : 16) + insets.left,
+                  right: (rightButton ? 72 : 16) + insets.right,
+                }
+              : {
+                  marginHorizontal:
+                    (leftButton ? 32 : 16) +
+                    Math.max(insets.left, insets.right),
+                },
+          ]}
+        >
+          {typeof headerTitle === 'function' ? (
+            headerTitle({
+              children: currentTitle,
+              allowFontScaling: headerTitleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: headerTitleStyle,
+            })
+          ) : (
+            <Text
+              accessibilityRole="header"
+              aria-level="1"
+              numberOfLines={1}
+              allowFontScaling={headerTitleAllowFontScaling}
+              style={[
+                styles.title,
+                { color: headerTintColor ?? colors.text },
+                styles.title,
+                headerTitleStyle,
+              ]}
+            >
+              {currentTitle}
+            </Text>
+          )}
+        </View>
+        {rightButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.right, { right: insets.right }]}
+          >
+            {rightButton}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowOpacity: 0.85,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth,
+        },
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+    }),
+    zIndex: 1,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+      fontWeight: '600',
+    },
+    android: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    default: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+  }),
+  icon: {
+    height: 24,
+    width: 24,
+    margin: 3,
+    resizeMode: 'contain',
+  },
+  touchable: {
+    marginHorizontal: 11,
+  },
+  left: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  right: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+});

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -16,29 +16,35 @@ type Props = {
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingScene extends React.Component<Props> {
+export default function ResourceSavingScene({
-  render() {
+  isVisible,
+  children,
+  style,
+  ...rest
+}: Props) {
   // react-native-screens is buggy on web
   if (screensEnabled?.() && Platform.OS !== 'web') {
-      const { isVisible, ...rest } = this.props;
-
     if (shouldUseActivityState) {
       return (
         // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen activityState={isVisible ? 2 : 0} {...rest} />
+        <Screen activityState={isVisible ? 2 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
       );
     } else {
       return (
         // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen active={isVisible ? 1 : 0} {...rest} />
+        <Screen active={isVisible ? 1 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
       );
     }
   }
 
-    const { isVisible, children, style, ...rest } = this.props;
-
   return (
     <View
+      // @ts-expect-error: hidden exists on web, but not in React Native
+      hidden={!isVisible}
       style={[
         styles.container,
         Platform.OS === 'web'
@@ -55,13 +61,20 @@ export default class ResourceSavingScene extends React.Component<Props> {
       pointerEvents={isVisible ? 'auto' : 'none'}
       {...rest}
     >
-        <View style={isVisible ? styles.attached : styles.detached}>
+      <View
+        style={
+          Platform.OS === 'web'
+            ? null
+            : isVisible
+            ? styles.attached
+            : styles.detached
+        }
+      >
         {children}
       </View>
     </View>
   );
 }
-}
 
 const styles = StyleSheet.create({
   container: {

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.10...@react-navigation/material-bottom-tabs@5.3.11) (2021-01-14)
+
+
+### Bug Fixes
+
+* handle fallback for MaterialCommunityIcons better ([26074a2](https://github.com/react-navigation/react-navigation/commit/26074a28f768ba01743e2ca3b3cb9873a04c9d9c))
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.9...@react-navigation/material-bottom-tabs@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.8...@react-navigation/material-bottom-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.7...@react-navigation/material-bottom-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.6...@react-navigation/material-bottom-tabs@5.3.7) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.3.7",
+  "version": "5.3.11",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,8 +41,7 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/native": "^5.8.7",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
@@ -50,6 +49,7 @@
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-paper": "^4.2.0",
     "react-native-vector-icons": "^7.0.0",
     "typescript": "^4.0.3"
@@ -61,7 +61,7 @@
     "react-native-paper": ">= 3.0.0",
     "react-native-vector-icons": ">= 6.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform } from 'react-native';
+import { Text, StyleSheet, Platform } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
 import {
   NavigationHelpersContext,
@@ -28,24 +28,25 @@ type Scene = { route: { key: string } };
 
 // Optionally require vector-icons referenced from react-native-paper:
 // https://github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14
-let MaterialCommunityIcons: any;
+let MaterialCommunityIcons: React.ComponentType<React.ComponentProps<
+  typeof import('react-native-vector-icons/MaterialCommunityIcons').default
+>>;
 
 try {
   // Optionally require vector-icons
   MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
     .default;
 } catch (e) {
-  // @ts-expect-error
-  if (global.__expo?.Icon?.MaterialCommunityIcons) {
-    // Snack doesn't properly bundle vector icons from sub-path
-    // Use icons from the __expo global if available
-    // @ts-expect-error
-    MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons;
-  } else {
   let isErrorLogged = false;
 
   // Fallback component for icons
-    MaterialCommunityIcons = () => {
+  MaterialCommunityIcons = ({
+    name,
+    color,
+    size,
+    selectionColor: _,
+    ...rest
+  }) => {
     if (!isErrorLogged) {
       if (
         !/(Cannot find module|Module not found|Cannot resolve module)/.test(
@@ -56,17 +57,20 @@ try {
       }
 
       console.warn(
-          `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons' could not be loaded.`,
+        `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
-          `To remove this warning, try installing 'react-native-vector-icons' or use another method.`
+        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://reactnavigation.org/docs/material-bottom-tab-navigator/#tabbaricon.`
       );
 
       isErrorLogged = true;
     }
 
-      return null;
+    return (
+      <Text {...rest} style={[styles.icon, { color, fontSize: size }]}>
+        □
+      </Text>
+    );
   };
 }
-}
 
 function MaterialBottomTabViewInner({
   state,

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.10...@react-navigation/material-top-tabs@5.3.11) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.9...@react-navigation/material-top-tabs@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.8...@react-navigation/material-top-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.7...@react-navigation/material-top-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.6...@react-navigation/material-top-tabs@5.3.7) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.3.7",
+  "version": "5.3.11",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -44,14 +44,14 @@
     "color": "^3.1.3"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/native": "^5.8.7",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-tab-view": "^2.15.2",
@@ -65,7 +65,7 @@
     "react-native-reanimated": ">= 1.0.0",
     "react-native-tab-view": ">= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/native/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.9.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.10...@react-navigation/native@5.9.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* support sync getInitialURL in native useLinking ([b26b907](https://github.com/react-navigation/react-navigation/commit/b26b90706fe0a0d914d4a868df1310d2dc3a7623))
+
+
+### Features
+
+* expose getActionForState in linking ([c9a5d45](https://github.com/react-navigation/react-navigation/commit/c9a5d4532406c6bfdac0c675a3fe4db5430e9a55))
+
+
+
+
+
+## [5.8.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.9...@react-navigation/native@5.8.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.8...@react-navigation/native@5.8.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.7...@react-navigation/native@5.8.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.8.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.6...@react-navigation/native@5.8.7) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.8.7",
+  "version": "5.9.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,12 +37,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.14.1",
+    "@react-navigation/core": "^5.15.0",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.15"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
@@ -51,13 +50,14 @@
     "react": "~16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/native/src/LinkingContext.tsx

@@ -5,4 +5,6 @@ const LinkingContext = React.createContext<{
   options: LinkingOptions | undefined;
 }>({ options: undefined });
 
+LinkingContext.displayName = 'LinkingContext';
+
 export default LinkingContext;

packages/native/src/theming/ThemeContext.tsx

@@ -4,4 +4,6 @@ import type { Theme } from '../types';
 
 const ThemeContext = React.createContext<Theme>(DefaultTheme);
 
+ThemeContext.displayName = 'ThemeContext';
+
 export default ThemeContext;

packages/native/src/types.tsx

@@ -1,6 +1,7 @@
 import type {
   getStateFromPath as getStateFromPathDefault,
   getPathFromState as getPathFromStateDefault,
+  getActionFromState as getActionFromStateDefault,
   PathConfigMap,
   Route,
 } from '@react-navigation/core';
@@ -66,7 +67,11 @@ export type LinkingOptions = {
    * }
    * ```
    */
-  getInitialURL?: () => Promise<string | null | undefined>;
+  getInitialURL?: () =>
+    | string
+    | null
+    | undefined
+    | Promise<string | null | undefined>;
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
@@ -90,11 +95,18 @@ export type LinkingOptions = {
   ) => undefined | void | (() => void);
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
+   * This state object will be passed as `initialState` for initial URL,
+   * and converted to an action object to `dispatch` for subsequent URLs.
    */
   getStateFromPath?: typeof getStateFromPathDefault;
+  /**
+   * Custom function to convert the state object to an action to dispatch (advanced).
+   * By default, the state is converted to a `NAVIGATE` action.
+   */
+  getActionFromState?: typeof getActionFromStateDefault;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
-   * Only applicable on Web.
+   * Used for creating links for navigation, primarily useful on Web.
    */
   getPathFromState?: typeof getPathFromStateDefault;
 };

packages/native/src/useLinking.native.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 import {
-  getActionFromState,
+  getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
   NavigationContainerRef,
 } from '@react-navigation/core';
-import type { LinkingOptions } from './types';
 import escapeStringRegexp from 'escape-string-regexp';
+import type { LinkingOptions } from './types';
+
+type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 let isUsingLinking = false;
 
@@ -33,6 +35,7 @@ export default function useLinking(
       return () => Linking.removeEventListener('url', callback);
     },
     getStateFromPath = getStateFromPathDefault,
+    getActionFromState = getActionFromStateDefault,
   }: LinkingOptions
 ) {
   React.useEffect(() => {
@@ -66,6 +69,7 @@ export default function useLinking(
   const configRef = React.useRef(config);
   const getInitialURLRef = React.useRef(getInitialURL);
   const getStateFromPathRef = React.useRef(getStateFromPath);
+  const getActionFromStateRef = React.useRef(getActionFromState);
 
   React.useEffect(() => {
     enabledRef.current = enabled;
@@ -73,7 +77,8 @@ export default function useLinking(
     configRef.current = config;
     getInitialURLRef.current = getInitialURL;
     getStateFromPathRef.current = getStateFromPath;
-  }, [config, enabled, prefixes, getInitialURL, getStateFromPath]);
+    getActionFromStateRef.current = getActionFromState;
+  });
 
   const extractPathFromURL = React.useCallback((url: string) => {
     for (const prefix of prefixesRef.current) {
@@ -93,19 +98,39 @@ export default function useLinking(
     return undefined;
   }, []);
 
-  const getInitialState = React.useCallback(async () => {
+  const getInitialState = React.useCallback(() => {
-    if (!enabledRef.current) {
+    let state: ResultState | undefined;
-      return undefined;
-    }
 
-    const url = await getInitialURLRef.current();
+    if (enabledRef.current) {
+      const url = getInitialURLRef.current();
+
+      if (url != null && typeof url !== 'string') {
+        return url.then((url) => {
           const path = url ? extractPathFromURL(url) : null;
 
-    if (path) {
+          return path
-      return getStateFromPathRef.current(path, configRef.current);
+            ? getStateFromPathRef.current(path, configRef.current)
-    } else {
+            : undefined;
-      return undefined;
+        });
       }
+
+      const path = url ? extractPathFromURL(url) : null;
+
+      state = path
+        ? getStateFromPathRef.current(path, configRef.current)
+        : undefined;
+    }
+
+    const thenable = {
+      then(onfulfilled?: (state: ResultState | undefined) => void) {
+        return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
+      },
+      catch() {
+        return thenable;
+      },
+    };
+
+    return thenable as PromiseLike<ResultState | undefined>;
   }, [extractPathFromURL]);
 
   React.useEffect(() => {
@@ -134,7 +159,10 @@ export default function useLinking(
             return;
           }
 
-          const action = getActionFromState(state, configRef.current);
+          const action = getActionFromStateRef.current(
+            state,
+            configRef.current
+          );
 
           if (action !== undefined) {
             try {

packages/native/src/useLinking.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import {
   getStateFromPath as getStateFromPathDefault,
   getPathFromState as getPathFromStateDefault,
+  getActionFromState as getActionFromStateDefault,
   NavigationContainerRef,
   NavigationState,
-  getActionFromState,
 } from '@react-navigation/core';
 import { nanoid } from 'nanoid/non-secure';
 import ServerContext from './ServerContext';
@@ -134,7 +134,7 @@ const createMemoryHistory = () => {
       // - There's history to go back, `history.go` is called, and `popstate` fires
       // - `history.go` is called multiple times, we need to resolve on respective `popstate`
       // - No history to go back, but `history.go` was called, browser has no API to detect it
-      return new Promise((resolve, reject) => {
+      return new Promise<void>((resolve, reject) => {
         const done = (interrupted?: boolean) => {
           clearTimeout(timer);
 
@@ -293,6 +293,7 @@ export default function useLinking(
     config,
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
+    getActionFromState = getActionFromStateDefault,
   }: LinkingOptions
 ) {
   React.useEffect(() => {
@@ -323,14 +324,16 @@ export default function useLinking(
   const enabledRef = React.useRef(enabled);
   const configRef = React.useRef(config);
   const getStateFromPathRef = React.useRef(getStateFromPath);
+  const getActionFromStateRef = React.useRef(getActionFromState);
   const getPathFromStateRef = React.useRef(getPathFromState);
 
   React.useEffect(() => {
     enabledRef.current = enabled;
     configRef.current = config;
     getStateFromPathRef.current = getStateFromPath;
+    getActionFromStateRef.current = getActionFromState;
     getPathFromStateRef.current = getPathFromState;
-  }, [config, enabled, getPathFromState, getStateFromPath]);
+  });
 
   const server = React.useContext(ServerContext);
 
@@ -349,7 +352,6 @@ export default function useLinking(
       }
     }
 
-    // Make it a thenable to keep consistent with the native impl
     const thenable = {
       then(onfulfilled?: (state: ResultState | undefined) => void) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
@@ -412,7 +414,10 @@ export default function useLinking(
         }
 
         if (index > previousIndex) {
-          const action = getActionFromState(state, configRef.current);
+          const action = getActionFromStateRef.current(
+            state,
+            configRef.current
+          );
 
           if (action !== undefined) {
             try {

packages/routers/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.2...@react-navigation/routers@5.7.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* consider openByDefault prop when rehydrating drawer state ([#9099](https://github.com/react-navigation/react-navigation/issues/9099)) ([2ad61a6](https://github.com/react-navigation/react-navigation/commit/2ad61a67357242fc4663ecad62ab311facbaf1be))
+
+
+### Features
+
+* add a new backBehavior: firstRoute for TabRouter ([3c87419](https://github.com/react-navigation/react-navigation/commit/3c874191ffbd24b953ded5b62f606c4cc47e5651))
+* add a way to specify an unique ID for screens ([b19f76b](https://github.com/react-navigation/react-navigation/commit/b19f76bfffe623759e67d925bfd067c753a453bf))
+
+
+
+
+
+## [5.6.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.1...@react-navigation/routers@5.6.2) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 ## [5.6.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.0...@react-navigation/routers@5.6.1) (2020-11-08)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "keywords": [
     "react",
     "react-native",
@@ -39,11 +39,11 @@
     "nanoid": "^3.1.15"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "del-cli": "^3.0.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/routers/src/DrawerRouter.tsx

@@ -75,7 +75,7 @@ const isDrawerOpen = (
   state:
     | DrawerNavigationState<ParamListBase>
     | PartialState<DrawerNavigationState<ParamListBase>>
-) => Boolean(state.history?.find((it) => it.type === 'drawer'));
+) => Boolean(state.history?.some((it) => it.type === 'drawer'));
 
 const openDrawer = (
   state: DrawerNavigationState<ParamListBase>
@@ -120,8 +120,12 @@ export default function DrawerRouter({
 
     type: 'drawer',
 
-    getInitialState({ routeNames, routeParamList }) {
+    getInitialState({ routeNames, routeParamList, routeGetIdList }) {
-      let state = router.getInitialState({ routeNames, routeParamList });
+      let state = router.getInitialState({
+        routeNames,
+        routeParamList,
+        routeGetIdList,
+      });
 
       if (openByDefault) {
         state = openDrawer(state);
@@ -135,7 +139,10 @@ export default function DrawerRouter({
       };
     },
 
-    getRehydratedState(partialState, { routeNames, routeParamList }) {
+    getRehydratedState(
+      partialState,
+      { routeNames, routeParamList, routeGetIdList }
+    ) {
       if (partialState.stale === false) {
         return partialState;
       }
@@ -143,9 +150,10 @@ export default function DrawerRouter({
       let state = router.getRehydratedState(partialState, {
         routeNames,
         routeParamList,
+        routeGetIdList,
       });
 
-      if (isDrawerOpen(partialState)) {
+      if (partialState.history ? isDrawerOpen(partialState) : openByDefault) {
         state = openDrawer(state);
       }
 

packages/routers/src/StackRouter.tsx

@@ -258,6 +258,9 @@ export default function StackRouter(options: StackRouterOptions) {
 
         case 'PUSH':
           if (state.routeNames.includes(action.payload.name)) {
+            const getId = options.routeGetIdList[action.payload.name];
+            const id = getId?.({ params: action.payload.params });
+
             const route =
               action.payload.name && action.payload.key
                 ? state.routes.find(
@@ -265,15 +268,17 @@ export default function StackRouter(options: StackRouterOptions) {
                       route.name === action.payload.name &&
                       route.key === action.payload.key
                   )
+                : id
+                ? state.routes.find(
+                    (route) => id === getId?.({ params: route.params })
+                  )
                 : undefined;
 
             let routes: Route<string>[];
 
             if (route) {
               routes = state.routes.filter((r) => r.key !== route.key);
-              routes.push(
+              routes.push({
-                action.payload.params
-                  ? {
                 ...route,
                 params:
                   action.payload.params !== undefined
@@ -282,17 +287,13 @@ export default function StackRouter(options: StackRouterOptions) {
                         ...action.payload.params,
                       }
                     : route.params,
-                    }
+              });
-                  : route
-              );
             } else {
               routes = [
                 ...state.routes,
                 {
                   key:
-                    action.payload.key === undefined
+                    action.payload.key ?? `${action.payload.name}-${nanoid()}`,
-                      ? `${action.payload.name}-${nanoid()}`
-                      : action.payload.key,
                   name: action.payload.name,
                   params:
                     routeParamList[action.payload.name] !== undefined
@@ -355,7 +356,19 @@ export default function StackRouter(options: StackRouterOptions) {
             // If the route already exists, navigate to that
             let index = -1;
 
-            if (
+            const getId =
+              // `getId` and `key` can't be used together
+              action.payload.key === undefined &&
+              action.payload.name !== undefined
+                ? options.routeGetIdList[action.payload.name]
+                : undefined;
+            const id = getId?.({ params: action.payload.params });
+
+            if (id) {
+              index = state.routes.findIndex(
+                (route) => id === getId?.({ params: route.params })
+              );
+            } else if (
               (state.routes[state.index].name === action.payload.name &&
                 action.payload.key === undefined) ||
               state.routes[state.index].key === action.payload.key
@@ -383,18 +396,27 @@ export default function StackRouter(options: StackRouterOptions) {
             }
 
             if (index === -1 && action.payload.name !== undefined) {
-              return router.getStateForAction(
+              const routes = [
-                state,
+                ...state.routes,
                 {
-                  type: 'PUSH',
+                  key:
-                  payload: {
+                    action.payload.key ?? `${action.payload.name}-${nanoid()}`,
-                    key: action.payload.key,
                   name: action.payload.name,
-                    params: action.payload.params,
+                  params:
+                    routeParamList[action.payload.name] !== undefined
+                      ? {
+                          ...routeParamList[action.payload.name],
+                          ...action.payload.params,
+                        }
+                      : action.payload.params,
                 },
-                },
+              ];
-                options
+
-              );
+              return {
+                ...state,
+                routes,
+                index: routes.length - 1,
+              };
             }
 
             const route = state.routes[index];

packages/routers/src/TabRouter.tsx

@@ -17,7 +17,12 @@ export type TabActionType = {
   target?: string;
 };
 
-export type BackBehavior = 'initialRoute' | 'order' | 'history' | 'none';
+export type BackBehavior =
+  | 'initialRoute'
+  | 'firstRoute'
+  | 'history'
+  | 'order'
+  | 'none';
 
 export type TabRouterOptions = DefaultRouterOptions & {
   backBehavior?: BackBehavior;
@@ -74,13 +79,21 @@ const getRouteHistory = (
         history.unshift({ type: TYPE_ROUTE, key: routes[i - 1].key });
       }
       break;
+    case 'firstRoute':
+      if (index !== 0) {
+        history.unshift({
+          type: TYPE_ROUTE,
+          key: routes[0].key,
+        });
+      }
+      break;
     case 'initialRoute':
       initialRouteIndex = routes.findIndex(
         (route) => route.name === initialRouteName
       );
       initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;
 
-      if (initialRouteIndex !== index) {
+      if (index !== initialRouteIndex) {
         history.unshift({
           type: TYPE_ROUTE,
           key: routes[initialRouteIndex].key,

packages/routers/src/__tests__/DrawerRouter.test.tsx

@@ -4,6 +4,7 @@ import {
   DrawerActions,
   DrawerNavigationState,
   ParamListBase,
+  RouterConfigOptions,
 } from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
@@ -18,6 +19,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 1,
@@ -44,6 +46,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -60,15 +63,43 @@ it('gets initial state from route names and params without initialRouteName', ()
   });
 });
 
-it('gets rehydrated state from partial state', () => {
+it('gets initial state from route names and params with openByDefault', () => {
-  const router = DrawerRouter({});
+  const router = DrawerRouter({ openByDefault: true });
 
-  const options = {
+  expect(
+    router.getInitialState({
       routeNames: ['bar', 'baz', 'qux'],
       routeParamList: {
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
+    })
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ type: 'route', key: 'bar-test' }, { type: 'drawer' }],
+    stale: false,
+    type: 'drawer',
+  });
+});
+
+it('gets rehydrated state from partial state', () => {
+  const router = DrawerRouter({});
+
+  const options: RouterConfigOptions = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+    routeGetIdList: {},
   };
 
   expect(
@@ -218,15 +249,87 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
 
+it('respects openByDefault when rehydrating', () => {
+  const router = DrawerRouter({ openByDefault: true });
+
+  const options: RouterConfigOptions = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 0,
+        key: 'drawer-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ key: 'bar-test', type: 'route' }, { type: 'drawer' }],
+    stale: false,
+    type: 'drawer',
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 0,
+        key: 'drawer-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        history: [{ type: 'route', key: 'bar-test' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ type: 'route', key: 'bar-test' }],
+    stale: false,
+    type: 'drawer',
+  });
+});
+
 it('handles navigate action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -265,9 +368,10 @@ it('handles navigate action', () => {
 
 it('handles navigate action with open drawer', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -306,9 +410,10 @@ it('handles navigate action with open drawer', () => {
 
 it('handles open drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -361,9 +466,10 @@ it('handles open drawer action', () => {
 
 it('handles close drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -419,9 +525,10 @@ it('handles close drawer action', () => {
 
 it('handles toggle drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/__tests__/StackRouter.test.tsx

@@ -1,4 +1,9 @@
-import { CommonActions, StackRouter, StackActions } from '..';
+import {
+  CommonActions,
+  StackRouter,
+  StackActions,
+  RouterConfigOptions,
+} from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
 
@@ -12,6 +17,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -33,6 +39,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -47,12 +54,13 @@ it('gets initial state from route names and params without initialRouteName', ()
 it('gets rehydrated state from partial state', () => {
   const router = StackRouter({});
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {
       baz: { answer: 42 },
       qux: { name: 'Jane' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -136,6 +144,7 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
@@ -163,6 +172,7 @@ it('gets state on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -195,6 +205,7 @@ it('gets state on route names change', () => {
         routeParamList: {
           baz: { name: 'John' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -228,6 +239,7 @@ it('gets state on route names change with initialRouteName', () => {
         routeParamList: {
           baz: { name: 'John' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -242,9 +254,10 @@ it('gets state on route names change with initialRouteName', () => {
 
 it('handles navigate action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -427,11 +440,139 @@ it('handles navigate action', () => {
   });
 });
 
-it('handles go back action', () => {
+it('ensures unique ID for navigate', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.fux,
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate('bar', { foo: 'b' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'b' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate({
+        key: 'test',
+        name: 'bar',
+        params: { foo: 'a' },
+      }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+});
+
+it('handles go back action', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -477,9 +618,10 @@ it('handles go back action', () => {
 
 it('handles pop action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -650,9 +792,10 @@ it('handles pop action', () => {
 
 it('handles pop to top action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -684,9 +827,10 @@ it('handles pop to top action', () => {
 
 it('replaces focused screen with replace', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -722,9 +866,10 @@ it('replaces focused screen with replace', () => {
 
 it('replaces active screen with replace', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -763,9 +908,10 @@ it('replaces active screen with replace', () => {
 
 it("doesn't handle replace if source key isn't present", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -794,9 +940,10 @@ it("doesn't handle replace if source key isn't present", () => {
 
 it("doesn't handle replace if screen to replace with isn't present", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -824,11 +971,12 @@ it("doesn't handle replace if screen to replace with isn't present", () => {
 
 it('handles push action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {
       baz: { foo: 21 },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -895,6 +1043,100 @@ it('handles push action', () => {
       options
     )
   ).toBe(null);
+});
+
+it('ensures unique ID for push', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.fux,
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      StackActions.push('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      StackActions.push('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      StackActions.push('bar', { foo: 'b' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'b' } },
+    ],
+  });
 
   expect(
     router.getStateForAction(
@@ -964,57 +1206,12 @@ it('handles push action', () => {
   });
 });
 
-it('changes index on focus change', () => {
-  const router = StackRouter({});
-
-  expect(
-    router.getStateForRouteFocus(
-      {
-        index: 2,
-        key: 'stack-test',
-        routeNames: ['bar', 'baz', 'qux'],
-        routes: [
-          { key: 'bar-0', name: 'bar' },
-          { key: 'baz-0', name: 'baz' },
-          { key: 'qux-0', name: 'qux' },
-        ],
-        stale: false,
-        type: 'stack',
-      },
-      'baz-0'
-    )
-  ).toEqual({
-    index: 1,
-    key: 'stack-test',
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-0', name: 'bar' },
-      { key: 'baz-0', name: 'baz' },
-    ],
-    stale: false,
-    type: 'stack',
-  });
-
-  const state = {
-    index: 0,
-    key: 'stack-test',
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-0', name: 'bar' },
-      { key: 'baz-0', name: 'baz' },
-    ],
-    stale: false as const,
-    type: 'stack' as const,
-  };
-
-  expect(router.getStateForRouteFocus(state, 'qux-0')).toEqual(state);
-});
-
 it('merges params on navigate to an existing screen', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -1077,11 +1274,12 @@ it('merges params on navigate to an existing screen', () => {
 
 it("doesn't merge params on navigate to an existing screen if merge: false", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {
       baz: { foo: 12 },
     },
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/__tests__/TabRouter.test.tsx

@@ -4,6 +4,7 @@ import {
   TabActions,
   TabNavigationState,
   ParamListBase,
+  RouterConfigOptions,
 } from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
@@ -18,6 +19,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 1,
@@ -44,6 +46,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -63,12 +66,13 @@ it('gets initial state from route names and params without initialRouteName', ()
 it('gets rehydrated state from partial state', () => {
   const router = TabRouter({});
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {
       baz: { answer: 42 },
       qux: { name: 'Jane' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -241,6 +245,7 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
@@ -248,9 +253,10 @@ it("doesn't rehydrate state if it's not stale", () => {
 it('restores correct history on rehydrating with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -289,9 +295,10 @@ it('restores correct history on rehydrating with backBehavior: order', () => {
 it('restores correct history on rehydrating with backBehavior: history', () => {
   const router = TabRouter({ backBehavior: 'history' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -323,12 +330,16 @@ it('restores correct history on rehydrating with backBehavior: history', () => {
   });
 });
 
-it('restores correct history on rehydrating with backBehavior: initialRoute', () => {
+it('restores correct history on rehydrating with backBehavior: firstRoute', () => {
-  const router = TabRouter({ backBehavior: 'initialRoute' });
+  const router = TabRouter({
+    backBehavior: 'firstRoute',
+    initialRouteName: 'bar',
+  });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -363,12 +374,57 @@ it('restores correct history on rehydrating with backBehavior: initialRoute', ()
   });
 });
 
+it('restores correct history on rehydrating with backBehavior: initialRoute', () => {
+  const router = TabRouter({
+    backBehavior: 'initialRoute',
+    initialRouteName: 'bar',
+  });
+
+  const options: RouterConfigOptions = {
+    routeNames: ['foo', 'bar', 'baz', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 2,
+        routes: [
+          { key: 'foo-0', name: 'foo' },
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-0', name: 'baz' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    key: 'tab-test',
+    index: 2,
+    routeNames: ['foo', 'bar', 'baz', 'qux'],
+    routes: [
+      { key: 'foo-0', name: 'foo' },
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+      { key: 'qux-0', name: 'qux' },
+    ],
+    history: [
+      { key: 'bar-0', type: 'route' },
+      { key: 'baz-0', type: 'route' },
+    ],
+    stale: false,
+    type: 'tab',
+  });
+});
+
 it('restores correct history on rehydrating with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -424,6 +480,7 @@ it('gets state on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -458,6 +515,7 @@ it('gets state on route names change', () => {
       {
         routeNames: ['foo', 'fiz'],
         routeParamList: {},
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -498,6 +556,7 @@ it('preserves focused route on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -540,6 +599,7 @@ it('falls back to first route if route is removed on route names change', () =>
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -559,9 +619,10 @@ it('falls back to first route if route is removed on route names change', () =>
 
 it('handles navigate action', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -649,9 +710,10 @@ it('handles navigate action', () => {
 
 it('handles jump to action', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -690,9 +752,10 @@ it('handles jump to action', () => {
 
 it('handles back action with backBehavior: history', () => {
   const router = TabRouter({ backBehavior: 'history' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -776,9 +839,10 @@ it('handles back action with backBehavior: history', () => {
 
 it('handles back action with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -847,9 +911,10 @@ it('handles back action with backBehavior: order', () => {
 
 it('handles back action with backBehavior: initialRoute', () => {
   const router = TabRouter({ backBehavior: 'initialRoute' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -919,9 +984,10 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
     initialRouteName: 'baz',
   });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -987,9 +1053,10 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
 
 it('handles back action with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -1007,9 +1074,10 @@ it('handles back action with backBehavior: none', () => {
 
 it('updates route key history on navigate and jump to', () => {
   const router = TabRouter({ backBehavior: 'history' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state: TabNavigationState<ParamListBase> = {
@@ -1110,9 +1178,10 @@ it('updates route key history on focus change', () => {
 
 it('merges params on navigate to an existing screen', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -1193,6 +1262,7 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
     routeParamList: {
       qux: { color: 'indigo' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -1235,6 +1305,17 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
       { type: 'route', key: 'bar' },
     ],
   });
+});
+
+it('merges params on navigate to an existing screen if merge: true', () => {
+  const router = TabRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {
+      qux: { color: 'indigo' },
+    },
+    routeGetIdList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -1323,9 +1404,10 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
 
 it('merges params on jump to an existing screen', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/types.tsx

@@ -132,6 +132,11 @@ export type RouterFactory<
 export type RouterConfigOptions = {
   routeNames: string[];
   routeParamList: ParamListBase;
+  routeGetIdList: Record<
+    string,
+    | ((options: { params?: Record<string, any> }) => string | undefined)
+    | undefined
+  >;
 };
 
 export type Router<

packages/stack/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.13.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.8...@react-navigation/stack@5.13.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+### Features
+
+* export TransitionPreset for custom TransitionPresets ([#9173](https://github.com/react-navigation/react-navigation/issues/9173)) ([9633c4d](https://github.com/react-navigation/react-navigation/commit/9633c4d35fe2f9cb4f37a7629872e436a4528238))
+
+
+
+
+
+## [5.12.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.7...@react-navigation/stack@5.12.8) (2020-11-21)
+
+
+### Bug Fixes
+
+* force dismiss keyboard if there was no gesture ([3e069b7](https://github.com/react-navigation/react-navigation/commit/3e069b718d60f5381957f2d3838ee04ee9384779)), closes [#9078](https://github.com/react-navigation/react-navigation/issues/9078)
+
+
+
+
+
+## [5.12.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.6...@react-navigation/stack@5.12.7) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [5.12.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.5...@react-navigation/stack@5.12.6) (2020-11-10)
+
+
+### Bug Fixes
+
+* make sure inactive screen don't increase scroll area on web ([da35085](https://github.com/react-navigation/react-navigation/commit/da35085f1e3440f26eea800c892c88aec64d072f))
+
+
+
+
+
+## [5.12.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.4...@react-navigation/stack@5.12.5) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 ## [5.12.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.3...@react-navigation/stack@5.12.4) (2020-11-08)
 
 

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.12.4",
+  "version": "5.13.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -44,9 +44,8 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.8.7",
+    "@react-navigation/native": "^5.9.0",
     "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -54,6 +53,7 @@
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
@@ -68,7 +68,7 @@
     "react-native-safe-area-context": ">= 0.6.0",
     "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/stack/src/index.tsx

@@ -61,4 +61,5 @@ export type {
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
   StackHeaderStyleInterpolator,
+  TransitionPreset,
 } from './types';

packages/stack/src/views/KeyboardManager.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { TextInput, Platform, Keyboard } from 'react-native';
+import { TextInput, Keyboard, HostComponent } from 'react-native';
 
 type Props = {
   enabled: boolean;
   children: (props: {
     onPageChangeStart: () => void;
-    onPageChangeConfirm: () => void;
+    onPageChangeConfirm: (force: boolean) => void;
     onPageChangeCancel: () => void;
   }) => React.ReactNode;
 };
 
+type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
+
 export default class KeyboardManager extends React.Component<Props> {
   componentWillUnmount() {
     this.clearKeyboardTimeout();
@@ -17,7 +19,7 @@ export default class KeyboardManager extends React.Component<Props> {
 
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
-  private previouslyFocusedTextInput: any | null = null;
+  private previouslyFocusedTextInput: InputRef = undefined;
   private startTimestamp: number = 0;
   private keyboardTimeout: any;
 
@@ -35,7 +37,8 @@ export default class KeyboardManager extends React.Component<Props> {
 
     this.clearKeyboardTimeout();
 
-    const input: any = TextInput.State.currentlyFocusedInput
+    // @ts-expect-error: blurTextInput accepts both number and ref, but types say only ref
+    const input: InputRef = TextInput.State.currentlyFocusedInput
       ? TextInput.State.currentlyFocusedInput()
       : TextInput.State.currentlyFocusedField();
 
@@ -49,25 +52,30 @@ export default class KeyboardManager extends React.Component<Props> {
     this.startTimestamp = Date.now();
   };
 
-  private handlePageChangeConfirm = () => {
+  private handlePageChangeConfirm = (force: boolean) => {
     if (!this.props.enabled) {
       return;
     }
 
     this.clearKeyboardTimeout();
 
+    if (force) {
+      // Always dismiss input, even if we don't have a ref to it
+      // We might not have the ref if onPageChangeStart was never called
+      // This can happen if page change was not from a gesture
+      Keyboard.dismiss();
+    } else {
       const input = this.previouslyFocusedTextInput;
 
       if (input) {
-      if (Platform.OS === 'android') {
+        // Dismiss the keyboard only if an input was a focused before
-        Keyboard.dismiss();
+        // This makes sure we don't dismiss input on going back and focusing an input
-      } else {
         TextInput.State.blurTextInput(input);
       }
     }
 
     // Cleanup the ID on successful page change
-    this.previouslyFocusedTextInput = null;
+    this.previouslyFocusedTextInput = undefined;
   };
 
   private handlePageChangeCancel = () => {
@@ -91,11 +99,11 @@ export default class KeyboardManager extends React.Component<Props> {
       if (Date.now() - this.startTimestamp < 100) {
         this.keyboardTimeout = setTimeout(() => {
           TextInput.State.focusTextInput(input);
-          this.previouslyFocusedTextInput = null;
+          this.previouslyFocusedTextInput = undefined;
         }, 100);
       } else {
         TextInput.State.focusTextInput(input);
-        this.previouslyFocusedTextInput = null;
+        this.previouslyFocusedTextInput = undefined;
       }
     }
   };

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

@@ -41,7 +41,7 @@ type Props = ViewProps & {
   gestureDirection: GestureDirection;
   onOpen: () => void;
   onClose: () => void;
-  onTransitionStart?: (props: { closing: boolean }) => void;
+  onTransition?: (props: { closing: boolean; gesture: boolean }) => void;
   onGestureBegin?: () => void;
   onGestureCanceled?: () => void;
   onGestureEnd?: () => void;
@@ -178,7 +178,7 @@ export default class Card extends React.Component<Props> {
       transitionSpec,
       onOpen,
       onClose,
-      onTransitionStart,
+      onTransition,
     } = this.props;
 
     const toValue = this.getAnimateToValue({
@@ -198,7 +198,7 @@ export default class Card extends React.Component<Props> {
 
     clearTimeout(this.pendingGestureCallback);
 
-    onTransitionStart?.({ closing });
+    onTransition?.({ closing, gesture: velocity !== undefined });
     animation(gesture, {
       ...spec.config,
       velocity,

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

@@ -46,7 +46,7 @@ type Props = TransitionPreset & {
   ) => void;
   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -116,42 +116,58 @@ function CardContainer({
   scene,
   transitionSpec,
 }: Props) {
-  React.useEffect(() => {
-    onPageChangeConfirm?.();
-  }, [active, onPageChangeConfirm]);
-
   const handleOpen = () => {
-    onTransitionEnd?.({ route: scene.route }, false);
+    const { route } = scene;
-    onOpenRoute({ route: scene.route });
+
+    onTransitionEnd?.({ route }, false);
+    onOpenRoute({ route });
   };
 
   const handleClose = () => {
-    onTransitionEnd?.({ route: scene.route }, true);
+    const { route } = scene;
-    onCloseRoute({ route: scene.route });
+
+    onTransitionEnd?.({ route }, true);
+    onCloseRoute({ route });
   };
 
   const handleGestureBegin = () => {
+    const { route } = scene;
+
     onPageChangeStart?.();
-    onGestureStart?.({ route: scene.route });
+    onGestureStart?.({ route });
   };
 
   const handleGestureCanceled = () => {
+    const { route } = scene;
+
     onPageChangeCancel?.();
-    onGestureCancel?.({ route: scene.route });
+    onGestureCancel?.({ route });
   };
 
   const handleGestureEnd = () => {
-    onGestureEnd?.({ route: scene.route });
+    const { route } = scene;
+
+    onGestureEnd?.({ route });
   };
 
-  const handleTransitionStart = ({ closing }: { closing: boolean }) => {
+  const handleTransition = ({
-    if (active && closing) {
+    closing,
-      onPageChangeConfirm?.();
+    gesture,
+  }: {
+    closing: boolean;
+    gesture: boolean;
+  }) => {
+    const { route } = scene;
+
+    if (!gesture) {
+      onPageChangeConfirm?.(true);
+    } else if (active && closing) {
+      onPageChangeConfirm?.(false);
     } else {
       onPageChangeCancel?.();
     }
 
-    onTransitionStart?.({ route: scene.route }, closing);
+    onTransitionStart?.({ route }, closing);
   };
 
   const insets = {
@@ -201,7 +217,7 @@ function CardContainer({
       overlay={cardOverlay}
       overlayEnabled={cardOverlayEnabled}
       shadowEnabled={cardShadowEnabled}
-      onTransitionStart={handleTransitionStart}
+      onTransition={handleTransition}
       onGestureBegin={handleGestureBegin}
       onGestureCanceled={handleGestureCanceled}
       onGestureEnd={handleGestureEnd}
@@ -216,7 +232,14 @@ function CardContainer({
       pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
       containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
       contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-      style={StyleSheet.absoluteFill}
+      style={[
+        {
+          // This is necessary to avoid unfocused larger pages increasing scroll area
+          // The issue can be seen on the web when a smaller screen is pushed over a larger one
+          overflow: active ? undefined : 'hidden',
+        },
+        StyleSheet.absoluteFill,
+      ]}
     >
       <View style={styles.container}>
         <View style={styles.scene}>

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

@@ -4,6 +4,7 @@ import {
   StyleSheet,
   LayoutChangeEvent,
   Dimensions,
+  Platform,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import type {
@@ -65,7 +66,7 @@ type Props = {
   ) => void;
   onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -398,7 +399,7 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureCancel,
       // Enable on new versions of `react-native-screens`
       // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
-      detachInactiveScreens = shouldUseActivityState,
+      detachInactiveScreens = Platform.OS === 'web' || shouldUseActivityState,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;

yarn.lock

@@ -21,6 +21,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.1.tgz#d7386a689aa0ddf06255005b4b991988021101a0"
   integrity sha512-725AQupWJZ8ba0jbKceeFblZTY90McUBWMwHhkFQ9q1zKPJ95GUktljFcgcsIVwRnTnRKlcYzfiNImg5G9m6ZQ==
 
+"@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
+  integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
+
 "@babel/core@7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -43,7 +48,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.7.5":
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.5", "@babel/core@^7.7.5":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
   integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
@@ -65,6 +70,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
+  integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.10"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.5"
+    "@babel/parser" "^7.12.10"
+    "@babel/template" "^7.12.7"
+    "@babel/traverse" "^7.12.10"
+    "@babel/types" "^7.12.10"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.12.1", "@babel/generator@^7.5.0", "@babel/generator@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468"
@@ -74,6 +100,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.12.10":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
+  integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==
+  dependencies:
+    "@babel/types" "^7.12.11"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
@@ -81,6 +116,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-annotate-as-pure@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
+  integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==
+  dependencies:
+    "@babel/types" "^7.12.10"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
@@ -98,6 +140,15 @@
     "@babel/helper-module-imports" "^7.12.1"
     "@babel/types" "^7.12.1"
 
+"@babel/helper-builder-react-jsx-experimental@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.11.tgz#a39616d7e4cf8f9da1f82b5fc3ee1f7406beeb11"
+  integrity sha512-4oGVOekPI8dh9JphkPXC68iIuP6qp/RPbaPmorRmEFbRAHZjSqxPjqHudn18GVDPgCuFM/KdFXc63C17Ygfa9w==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.12.10"
+    "@babel/helper-module-imports" "^7.12.5"
+    "@babel/types" "^7.12.11"
+
 "@babel/helper-builder-react-jsx@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
@@ -116,6 +167,16 @@
     browserslist "^4.12.0"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz#cb470c76198db6a24e9dbc8987275631e5d29831"
+  integrity sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==
+  dependencies:
+    "@babel/compat-data" "^7.12.5"
+    "@babel/helper-validator-option" "^7.12.1"
+    browserslist "^4.14.5"
+    semver "^5.5.0"
+
 "@babel/helper-create-class-features-plugin@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
@@ -189,6 +250,13 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
+"@babel/helper-module-imports@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
+  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+  dependencies:
+    "@babel/types" "^7.12.5"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
@@ -268,11 +336,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
+"@babel/helper-validator-identifier@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+
 "@babel/helper-validator-option@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
   integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
 
+"@babel/helper-validator-option@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f"
+  integrity sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw==
+
 "@babel/helper-wrap-function@^7.10.4":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
@@ -292,6 +370,15 @@
     "@babel/traverse" "^7.12.1"
     "@babel/types" "^7.12.1"
 
+"@babel/helpers@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.5.tgz#1a1ba4a768d9b58310eda516c449913fe647116e"
+  integrity sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.5"
+    "@babel/types" "^7.12.5"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
@@ -320,6 +407,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd"
   integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==
 
+"@babel/parser@^7.12.10", "@babel/parser@^7.12.7":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
+  integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
+
 "@babel/plugin-external-helpers@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.12.1.tgz#df474775860b3b8bdfeaedd45596cd2c7f36a2be"
@@ -336,7 +428,7 @@
     "@babel/helper-remap-async-to-generator" "^7.12.1"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.10.1", "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.4.4":
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.4.4":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
   integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
@@ -409,6 +501,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-proposal-numeric-separator@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz#8bf253de8139099fea193b297d23a9d406ef056b"
+  integrity sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
@@ -435,6 +535,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz#e02f0ea1b5dc59d401ec16fb824679f683d3303c"
+  integrity sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-private-methods@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
@@ -614,6 +723,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-block-scoping@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz#83ae92a104dbb93a7d6c6dd1844f351083c46b4f"
+  integrity sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
@@ -790,30 +906,30 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-development@^7.12.1":
+"@babel/plugin-transform-react-jsx-development@^7.12.7":
-  version "7.12.1"
+  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.1.tgz#0b8f8cd531dcf7991f1e5f2c10a2a4f1cfc78e36"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.11.tgz#078aa7e1f5f75a68ee9598ebed90000fcb11092f"
-  integrity sha512-IilcGWdN1yNgEGOrB96jbTplRh+V2Pz1EoEwsKsHfX1a/L40cUYuD71Zepa7C+ujv7kJIxnDftWeZbKNEqZjCQ==
+  integrity sha512-5MvsGschXeXJsbzQGR/BH89ATMzCsM7rx95n+R7/852cGoK2JgMbacDw/A9Pmrfex4tArdMab0L5SBV4SB/Nxg==
   dependencies:
-    "@babel/helper-builder-react-jsx-experimental" "^7.12.1"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.11"
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.12.1":
+"@babel/plugin-transform-react-jsx-self@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.1.tgz#ef43cbca2a14f1bd17807dbe4376ff89d714cf28"
   integrity sha512-FbpL0ieNWiiBB5tCldX17EtXgmzeEZjFrix72rQYeq9X6nUK38HCaxexzVQrZWXanxKJPKVVIU37gFjEQYkPkA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.12.1":
+"@babel/plugin-transform-react-jsx-source@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.1.tgz#d07de6863f468da0809edcf79a1aa8ce2a82a26b"
   integrity sha512-keQ5kBfjJNRc6zZN1/nVHCd6LLIHq4aUKcVnvE/2l+ZZROSbqoiGFRtT5t3Is89XJxBQaP7NLZX2jgGHdZvvFQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.12.1":
+"@babel/plugin-transform-react-jsx@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.1.tgz#c2d96c77c2b0e4362cc4e77a43ce7c2539d478cb"
   integrity sha512-RmKejwnT0T0QzQUzcbP5p1VWlpnP8QHtdhEtLG55ZDQnJNalbF3eeDyu3dnGKvGzFIQiBzFhBYTwvv435p9Xpw==
@@ -823,6 +939,16 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-jsx" "^7.12.1"
 
+"@babel/plugin-transform-react-jsx@^7.12.10":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.11.tgz#09a7319195946b0ddc09f9a5f01346f2cb80dfdd"
+  integrity sha512-5nWOw6mTylaFU72BdZfa0dP1HsGdY3IMExpxn8LBE8dNmkQjB+W+sR+JwIdtbzkPvVuFviT3zyNbSUkuVTVxbw==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.11"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
+
 "@babel/plugin-transform-react-pure-annotations@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
@@ -878,6 +1004,13 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/helper-regex" "^7.10.4"
 
+"@babel/plugin-transform-sticky-regex@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz#560224613ab23987453948ed21d0b0b193fa7fad"
+  integrity sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
@@ -892,6 +1025,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-typeof-symbol@^7.12.10":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz#de01c4c8f96580bd00f183072b0d0ecdcf0dec4b"
+  integrity sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-typescript@^7.12.1", "@babel/plugin-transform-typescript@^7.5.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
@@ -916,7 +1056,79 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.1"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/preset-env@^7.10.2", "@babel/preset-env@^7.4.4", "@babel/preset-env@^7.6.3":
+"@babel/preset-env@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.11.tgz#55d5f7981487365c93dbbc84507b1c7215e857f9"
+  integrity sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==
+  dependencies:
+    "@babel/compat-data" "^7.12.7"
+    "@babel/helper-compilation-targets" "^7.12.5"
+    "@babel/helper-module-imports" "^7.12.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.11"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.7"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.7"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.11"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.7"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.10"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.12.11"
+    core-js-compat "^3.8.0"
+    semver "^5.5.0"
+
+"@babel/preset-env@^7.4.4", "@babel/preset-env@^7.6.3":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
   integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
@@ -988,7 +1200,7 @@
     core-js-compat "^3.6.2"
     semver "^5.5.0"
 
-"@babel/preset-flow@^7.10.1":
+"@babel/preset-flow@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940"
   integrity sha512-UAoyMdioAhM6H99qPoKvpHMzxmNVXno8GYU/7vZmGaHk6/KqfDYL1W0NxszVbJ2EP271b7e6Ox+Vk2A9QsB3Sw==
@@ -1007,20 +1219,27 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.10.1":
+"@babel/preset-react@^7.12.10":
-  version "7.12.1"
+  version "7.12.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.10.tgz#4fed65f296cbb0f5fb09de6be8cddc85cc909be9"
-  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
+  integrity sha512-vtQNjaHRl4DUpp+t+g4wvTHsLQuye+n0H/wsXIZRn69oz/fvNC7gQ4IK73zGJBaxvHoxElDvnYCthMcT7uzFoQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-transform-react-display-name" "^7.12.1"
-    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.10"
-    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.7"
-    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
-    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
-"@babel/preset-typescript@^7.10.1", "@babel/preset-typescript@^7.3.3":
+"@babel/preset-typescript@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.7.tgz#fc7df8199d6aae747896f1e6c61fc872056632a3"
+  integrity sha512-nOoIqIqBmHBSEgBXWR4Dv/XBehtIFcw9PqZw6rFYuKrzsZmOQm3PR5siLBnKZFEsDb03IegG8nSjU/iXXXYRmw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+
+"@babel/preset-typescript@^7.3.3":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
   integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
@@ -1062,6 +1281,15 @@
     "@babel/parser" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/template@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
+  integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.12.7"
+    "@babel/types" "^7.12.7"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4", "@babel/traverse@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.1.tgz#941395e0c5cc86d5d3e75caa095d3924526f0c1e"
@@ -1077,6 +1305,21 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5":
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a"
+  integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.10"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.12.10"
+    "@babel/types" "^7.12.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.9.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
@@ -1086,6 +1329,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.5", "@babel/types@^7.12.7":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce"
+  integrity sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -3331,36 +3583,6 @@
   dependencies:
     deep-assign "^3.0.0"
 
-"@react-native-community/bob@^0.16.2":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@react-native-community/bob/-/bob-0.16.2.tgz#9102b0160e70084fa1b75403a80dec332647c950"
-  integrity sha512-gHEGXOfEHlIX8meXHbjpVvGJbfKFFpomgPUdGBwPwFb7Di4EIXC97ru6ONhOruwth1YVfZtGabk4oDiDvz/RHg==
-  dependencies:
-    "@babel/core" "^7.10.2"
-    "@babel/plugin-proposal-class-properties" "^7.10.1"
-    "@babel/preset-env" "^7.10.2"
-    "@babel/preset-flow" "^7.10.1"
-    "@babel/preset-react" "^7.10.1"
-    "@babel/preset-typescript" "^7.10.1"
-    browserslist "^4.12.0"
-    chalk "^4.1.0"
-    cosmiconfig "^6.0.0"
-    cross-spawn "^7.0.3"
-    dedent "^0.7.0"
-    del "^5.1.0"
-    ejs "^3.1.3"
-    fs-extra "^9.0.1"
-    github-username "^5.0.1"
-    glob "^7.1.6"
-    inquirer "^7.0.4"
-    is-git-dirty "^1.0.0"
-    json5 "^2.1.3"
-    validate-npm-package-name "^3.0.0"
-    which "^2.0.2"
-    yargs "^15.3.1"
-  optionalDependencies:
-    jetifier "^1.6.6"
-
 "@react-native-community/cli-debugger-ui@^4.9.0":
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz#4177764ba69243c97aa26829d59d9501acb2bd71"
@@ -5559,6 +5781,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.8.5:
     escalade "^3.1.0"
     node-releases "^1.1.61"
 
+browserslist@^4.14.5, browserslist@^4.15.0, browserslist@^4.16.0:
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.0.tgz#410277627500be3cb28a1bfe037586fbedf9488b"
+  integrity sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==
+  dependencies:
+    caniuse-lite "^1.0.30001165"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.621"
+    escalade "^3.1.1"
+    node-releases "^1.1.67"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5870,6 +6103,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001135:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001151.tgz#1ddfde5e6fff02aad7940b4edb7d3ac76b0cb00b"
   integrity sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==
 
+caniuse-lite@^1.0.30001165:
+  version "1.0.30001168"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001168.tgz#6fcd098c139d003b9bd484cbb9ca26cb89907f9a"
+  integrity sha512-P2zmX7swIXKu+GMMR01TWa4csIKELTNnZKc+f1CjebmZJQtTAEXmpQSoKVJVVcvPGAA0TEYTOUp3VehavZSFPQ==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -6112,11 +6350,6 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
   integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
 
-cli-width@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
-  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
-
 clipboardy@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
@@ -6152,6 +6385,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -6266,7 +6508,7 @@ color@^3.0.0, color@^3.1.2, color@^3.1.3:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-colorette@^1.0.7:
+colorette@^1.0.7, colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
   integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
@@ -6677,6 +6919,14 @@ core-js-compat@^3.6.2:
     browserslist "^4.8.5"
     semver "7.0.0"
 
+core-js-compat@^3.8.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.1.tgz#8d1ddd341d660ba6194cbe0ce60f4c794c87a36e"
+  integrity sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==
+  dependencies:
+    browserslist "^4.15.0"
+    semver "7.0.0"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -6707,17 +6957,6 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
 cosmiconfig@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
@@ -7711,7 +7950,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^3.1.3:
+ejs@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.5.tgz#aed723844dc20acb4b170cd9ab1017e476a0d93b"
   integrity sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==
@@ -7723,6 +7962,11 @@ electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.571:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.583.tgz#47a9fde74740b1205dba96db2e433132964ba3ee"
   integrity sha512-L9BwLwJohjZW9mQESI79HRzhicPk1DFgM+8hOCfGgGCFEcA3Otpv7QK6SGtYoZvfQfE3wKLh0Hd5ptqUFv3gvQ==
 
+electron-to-chromium@^1.3.621:
+  version "1.3.628"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.628.tgz#be5a14ddf3a455de876274c84de0926439a287a7"
+  integrity sha512-fmhO4YGo/kapy+xL9Eq/cZwDASaTHZu3psIFYo4yc+RY1LzbZr84xjKlDImDrlrmWhOxsrDi98nX097U/xK/cQ==
+
 elliptic@^6.5.3:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
@@ -7944,7 +8188,7 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-escalade@^3.1.0:
+escalade@^3.1.0, escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
@@ -8298,32 +8542,6 @@ exec-sh@^0.3.2:
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
   integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
 
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^0.6.1:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.6.3.tgz#57b69a594f081759c69e5370f0d17b9cb11658fe"
-  integrity sha1-V7aaWU8IF1nGnlNw8NF7nLEWWP4=
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -8378,6 +8596,21 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 exeunt@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/exeunt/-/exeunt-1.1.0.tgz#af72db6f94b3cb75e921aee375d513049843d284"
@@ -9426,7 +9659,7 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -10432,7 +10665,7 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
@@ -10619,25 +10852,6 @@ inquirer@^6.2.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^7.0.4:
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
-  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-width "^3.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.19"
-    mute-stream "0.0.8"
-    run-async "^2.4.0"
-    rxjs "^6.6.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-
 internal-ip@4.3.0, internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -10687,6 +10901,14 @@ is-absolute-url@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
   integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
@@ -10887,21 +11109,21 @@ is-generator-function@^1.0.7:
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.7.tgz#d2132e529bb0000a7f80794d4bdf5cd5e5813522"
   integrity sha512-YZc5EwyO4f2kWCax7oegfuSr9mFz1ZvieNYBEjmukLxgXfBUbxAWGVF7GZf0zidYtoBl3WvC07YK0wT76a+Rtw==
 
-is-git-dirty@^1.0.0:
+is-git-dirty@^2.0.1:
-  version "1.0.0"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-git-dirty/-/is-git-dirty-1.0.0.tgz#cd58f329ea826bd4d5388f1ef90459fe947e3b96"
+  resolved "https://registry.yarnpkg.com/is-git-dirty/-/is-git-dirty-2.0.1.tgz#29ca82fb0924ccbeaa0bae08de217546df593012"
-  integrity sha512-Qg7kqQ99B++ucplBiYvSahvPxQD63979CMv3TSJ66ZjjjulkPh4InXPAf//ZO1cq7W4d+pjGdObwS2LvXnldTQ==
+  integrity sha512-zn3CNLDbSR+y7+VDDw7/SwTRRuECn4OpAyelo5MDN+gVxdzM8SUDd51ZwPIOxhljED44Riu0jiiNtC8w0bcLdA==
   dependencies:
-    execa "^0.10.0"
+    execa "^4.0.3"
-    is-git-repository "^1.1.1"
+    is-git-repository "^2.0.0"
 
-is-git-repository@^1.1.1:
+is-git-repository@^2.0.0:
-  version "1.1.1"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-git-repository/-/is-git-repository-1.1.1.tgz#c68e4b7a806422349aaec488973a90558d7e9be0"
+  resolved "https://registry.yarnpkg.com/is-git-repository/-/is-git-repository-2.0.0.tgz#fa036007fe9697198c2c89dac4dd8304a6101e1c"
-  integrity sha1-xo5LeoBkIjSarsSIlzqQVY1+m+A=
+  integrity sha512-HDO50CG5suIAcmqG4F1buqVXEZRPn+RaXIn9pFKq/947FBo2bCRwK7ZluEVZOy99a4IQyqsjbKEpAiOXCccOHQ==
   dependencies:
-    execa "^0.6.1"
+    execa "^4.0.3"
-    path-is-absolute "^1.0.1"
+    is-absolute "^1.0.0"
 
 is-glob@^2.0.0:
   version "2.0.1"
@@ -11068,6 +11290,13 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
 
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
+  dependencies:
+    is-unc-path "^1.0.0"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -11146,6 +11375,13 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
+  dependencies:
+    unc-path-regex "^0.1.2"
+
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@@ -11173,7 +11409,7 @@ is-windows@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
   integrity sha1-3hqm1j6indJIc3tp8f+LgALSEIw=
 
-is-windows@^1.0.0, is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -13787,6 +14023,11 @@ node-releases@^1.1.52, node-releases@^1.1.61:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.64.tgz#71b4ae988e9b1dd7c1ffce58dd9e561752dfebc5"
   integrity sha512-Iec8O9166/x2HRMJyLLLWkd0sFFLrFNy+Xf+JQfSQsdBJzPcHpNl3JQ9gD4j+aJxmCa25jNsIbM4bmACtSbkSg==
 
+node-releases@^1.1.67:
+  version "1.1.67"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
+  integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
+
 node-stream-zip@^1.9.1:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.11.3.tgz#223892620b4889bce9782b256a76682631c507be"
@@ -14774,7 +15015,7 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
+path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
@@ -15532,6 +15773,14 @@ prompts@^2.0.1, prompts@^2.3.0, prompts@^2.3.2:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
+prompts@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
+  integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
@@ -15869,6 +16118,36 @@ react-native-appearance@~0.3.3:
     invariant "^2.2.4"
     use-subscription "^1.0.0"
 
+react-native-builder-bob@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/react-native-builder-bob/-/react-native-builder-bob-0.17.0.tgz#2655426c7eb47c90f6f7e653bcda3c67f9480beb"
+  integrity sha512-0+5sSED2fedu5E12SemmjCwy7BrFWcOaVl5dVSRr3njlo0Z59oNiL+6s0cdhLqtaSEVuhEU+9RbE8ns+3vlaww==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/preset-env" "^7.12.11"
+    "@babel/preset-flow" "^7.12.1"
+    "@babel/preset-react" "^7.12.10"
+    "@babel/preset-typescript" "^7.12.7"
+    browserslist "^4.16.0"
+    chalk "^4.1.0"
+    cosmiconfig "^7.0.0"
+    cross-spawn "^7.0.3"
+    dedent "^0.7.0"
+    del "^6.0.0"
+    ejs "^3.1.5"
+    fs-extra "^9.0.1"
+    github-username "^5.0.1"
+    glob "^7.1.6"
+    is-git-dirty "^2.0.1"
+    json5 "^2.1.3"
+    prompts "^2.4.0"
+    validate-npm-package-name "^3.0.0"
+    which "^2.0.2"
+    yargs "^16.2.0"
+  optionalDependencies:
+    jetifier "^1.6.6"
+
 react-native-gesture-handler@~1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.7.0.tgz#0ef74a5ba836832e497dc49eb1ce58baa6c617e5"
@@ -16627,7 +16906,7 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-run-async@^2.2.0, run-async@^2.4.0:
+run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
@@ -16668,7 +16947,7 @@ rxjs@^5.4.3, rxjs@^5.5.2:
   dependencies:
     symbol-observable "1.0.1"
 
-rxjs@^6.4.0, rxjs@^6.5.3, rxjs@^6.6.0:
+rxjs@^6.4.0, rxjs@^6.5.3:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
   integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
@@ -17080,7 +17359,7 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-sisteransi@^1.0.4:
+sisteransi@^1.0.4, sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
@@ -18439,6 +18718,11 @@ umask@^1.1.0:
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
   integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
+unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
+
 undefsafe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
@@ -19459,6 +19743,15 @@ wrap-ansi@^6.0.0, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -19668,6 +19961,11 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
+y18n@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
+  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
@@ -19683,7 +19981,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.7.2:
+yaml@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
@@ -19712,6 +20010,11 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
 yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -19745,7 +20048,7 @@ yargs@^14.2.0, yargs@^14.2.2:
     y18n "^4.0.0"
     yargs-parser "^15.0.1"
 
-yargs@^15.0.2, yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
+yargs@^15.0.2, yargs@^15.1.0, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
   integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
@@ -19762,6 +20065,19 @@ yargs@^15.0.2, yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"