refactor: simplify API for useLinkBuilder

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

@@ -51,7 +51,7 @@ export default function BottomTabBar({
   tabStyle,
 }: Props) {
   const { colors } = useTheme();
-  const buildLink = useLinkBuilder({ navigation });
+  const buildLink = useLinkBuilder();
 
   const [dimensions, setDimensions] = React.useState(() => {
     const { height = 0, width = 0 } = Dimensions.get('window');

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

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { TabNavigationState, useTheme } from '@react-navigation/native';
+import {
+  NavigationHelpersContext,
+  TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
@@ -91,44 +95,46 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   render() {
-    const { state, descriptors, lazy } = this.props;
+    const { state, descriptors, navigation, lazy } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
     return (
-      <SafeAreaProviderCompat>
-        <View style={styles.container}>
-          <ScreenContainer style={styles.pages}>
-            {routes.map((route, index) => {
-              const descriptor = descriptors[route.key];
-              const { unmountOnBlur } = descriptor.options;
-              const isFocused = state.index === index;
+      <NavigationHelpersContext.Provider value={navigation}>
+        <SafeAreaProviderCompat>
+          <View style={styles.container}>
+            <ScreenContainer style={styles.pages}>
+              {routes.map((route, index) => {
+                const descriptor = descriptors[route.key];
+                const { unmountOnBlur } = descriptor.options;
+                const isFocused = state.index === index;
 
-              if (unmountOnBlur && !isFocused) {
-                return null;
-              }
+                if (unmountOnBlur && !isFocused) {
+                  return null;
+                }
 
-              if (lazy && !loaded.includes(index) && !isFocused) {
-                // Don't render a screen if we've never navigated to it
-                return null;
-              }
+                if (lazy && !loaded.includes(index) && !isFocused) {
+                  // Don't render a screen if we've never navigated to it
+                  return null;
+                }
 
-              return (
-                <ResourceSavingScene
-                  key={route.key}
-                  style={StyleSheet.absoluteFill}
-                  isVisible={isFocused}
-                >
-                  <SceneContent isFocused={isFocused}>
-                    {descriptor.render()}
-                  </SceneContent>
-                </ResourceSavingScene>
-              );
-            })}
-          </ScreenContainer>
-          {this.renderTabBar()}
-        </View>
-      </SafeAreaProviderCompat>
+                return (
+                  <ResourceSavingScene
+                    key={route.key}
+                    style={StyleSheet.absoluteFill}
+                    isVisible={isFocused}
+                  >
+                    <SceneContent isFocused={isFocused}>
+                      {descriptor.render()}
+                    </SceneContent>
+                  </ResourceSavingScene>
+                );
+              })}
+            </ScreenContainer>
+            {this.renderTabBar()}
+          </View>
+        </SafeAreaProviderCompat>
+      </NavigationHelpersContext.Provider>
     );
   }
 }

packages/core/src/NavigationHelpersContext.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ParamListBase } from '@react-navigation/routers';
+import { NavigationHelpers } from './types';
+
+/**
+ * Context which holds the navigation helpers of the parent navigator.
+ * Navigators should use this context in their view component.
+ */
+const NavigationHelpersContext = React.createContext<
+  NavigationHelpers<ParamListBase> | undefined
+>(undefined);
+
+export default NavigationHelpersContext;

packages/core/src/index.tsx

@@ -3,6 +3,7 @@ export * from '@react-navigation/routers';
 export { default as BaseNavigationContainer } from './BaseNavigationContainer';
 export { default as createNavigatorFactory } from './createNavigatorFactory';
 
+export { default as NavigationHelpersContext } from './NavigationHelpersContext';
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';
 

packages/drawer/src/views/DrawerItemList.tsx

@@ -32,7 +32,7 @@ export default function DrawerItemList({
   itemStyle,
   labelStyle,
 }: Props) {
-  const buildLink = useLinkBuilder({ navigation });
+  const buildLink = useLinkBuilder();
 
   return (state.routes.map((route, i) => {
     const focused = i === state.index;

packages/drawer/src/views/DrawerView.tsx

@@ -16,6 +16,7 @@ import {
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import {
+  NavigationHelpersContext,
   DrawerNavigationState,
   DrawerActions,
   useTheme,
@@ -201,59 +202,61 @@ export default function DrawerView({
   const { gestureEnabled, swipeEnabled } = descriptors[activeKey].options;
 
   return (
-    <GestureHandlerWrapper style={styles.content}>
-      <SafeAreaProviderCompat>
-        <DrawerGestureContext.Provider value={drawerGestureRef}>
-          <DrawerOpenContext.Provider value={isDrawerOpen}>
-            <Drawer
-              open={isDrawerOpen}
-              gestureEnabled={gestureEnabled}
-              swipeEnabled={swipeEnabled}
-              onOpen={handleDrawerOpen}
-              onClose={handleDrawerClose}
-              onGestureRef={(ref) => {
-                // @ts-ignore
-                drawerGestureRef.current = ref;
-              }}
-              gestureHandlerProps={gestureHandlerProps}
-              drawerType={drawerType}
-              drawerPosition={drawerPosition}
-              sceneContainerStyle={[
-                { backgroundColor: colors.background },
-                sceneContainerStyle,
-              ]}
-              drawerStyle={[
-                {
-                  width: getDefaultDrawerWidth(dimensions),
-                  backgroundColor: colors.card,
-                },
-                drawerType === 'permanent' &&
-                  (drawerPosition === 'left'
-                    ? {
-                        borderRightColor: colors.border,
-                        borderRightWidth: StyleSheet.hairlineWidth,
-                      }
-                    : {
-                        borderLeftColor: colors.border,
-                        borderLeftWidth: StyleSheet.hairlineWidth,
-                      }),
-                drawerStyle,
-              ]}
-              overlayStyle={{ backgroundColor: overlayColor }}
-              swipeEdgeWidth={edgeWidth}
-              swipeDistanceThreshold={minSwipeDistance}
-              hideStatusBar={hideStatusBar}
-              statusBarAnimation={statusBarAnimation}
-              renderDrawerContent={renderNavigationView}
-              renderSceneContent={renderContent}
-              keyboardDismissMode={keyboardDismissMode}
-              drawerPostion={drawerPosition}
-              dimensions={dimensions}
-            />
-          </DrawerOpenContext.Provider>
-        </DrawerGestureContext.Provider>
-      </SafeAreaProviderCompat>
-    </GestureHandlerWrapper>
+    <NavigationHelpersContext.Provider value={navigation}>
+      <GestureHandlerWrapper style={styles.content}>
+        <SafeAreaProviderCompat>
+          <DrawerGestureContext.Provider value={drawerGestureRef}>
+            <DrawerOpenContext.Provider value={isDrawerOpen}>
+              <Drawer
+                open={isDrawerOpen}
+                gestureEnabled={gestureEnabled}
+                swipeEnabled={swipeEnabled}
+                onOpen={handleDrawerOpen}
+                onClose={handleDrawerClose}
+                onGestureRef={(ref) => {
+                  // @ts-ignore
+                  drawerGestureRef.current = ref;
+                }}
+                gestureHandlerProps={gestureHandlerProps}
+                drawerType={drawerType}
+                drawerPosition={drawerPosition}
+                sceneContainerStyle={[
+                  { backgroundColor: colors.background },
+                  sceneContainerStyle,
+                ]}
+                drawerStyle={[
+                  {
+                    width: getDefaultDrawerWidth(dimensions),
+                    backgroundColor: colors.card,
+                  },
+                  drawerType === 'permanent' &&
+                    (drawerPosition === 'left'
+                      ? {
+                          borderRightColor: colors.border,
+                          borderRightWidth: StyleSheet.hairlineWidth,
+                        }
+                      : {
+                          borderLeftColor: colors.border,
+                          borderLeftWidth: StyleSheet.hairlineWidth,
+                        }),
+                  drawerStyle,
+                ]}
+                overlayStyle={{ backgroundColor: overlayColor }}
+                swipeEdgeWidth={edgeWidth}
+                swipeDistanceThreshold={minSwipeDistance}
+                hideStatusBar={hideStatusBar}
+                statusBarAnimation={statusBarAnimation}
+                renderDrawerContent={renderNavigationView}
+                renderSceneContent={renderContent}
+                keyboardDismissMode={keyboardDismissMode}
+                drawerPostion={drawerPosition}
+                dimensions={dimensions}
+              />
+            </DrawerOpenContext.Provider>
+          </DrawerGestureContext.Provider>
+        </SafeAreaProviderCompat>
+      </GestureHandlerWrapper>
+    </NavigationHelpersContext.Provider>
   );
 }
 

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

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
+  NavigationHelpersContext,
   Route,
   TabNavigationState,
   TabActions,
@@ -45,66 +46,68 @@ export default function MaterialBottomTabView({
   }, [colors, dark]);
 
   return (
-    <BottomNavigation
-      {...rest}
-      theme={theme}
-      navigationState={state}
-      onIndexChange={(index: number) =>
-        navigation.dispatch({
-          ...TabActions.jumpTo(state.routes[index].name),
-          target: state.key,
-        })
-      }
-      renderScene={({ route }) => descriptors[route.key].render()}
-      renderIcon={({ route, focused, color }) => {
-        const { options } = descriptors[route.key];
-
-        if (typeof options.tabBarIcon === 'string') {
-          return (
-            <MaterialCommunityIcons
-              name={options.tabBarIcon}
-              color={color}
-              size={24}
-              style={styles.icon}
-              importantForAccessibility="no-hide-descendants"
-              accessibilityElementsHidden
-            />
-          );
+    <NavigationHelpersContext.Provider value={navigation}>
+      <BottomNavigation
+        {...rest}
+        theme={theme}
+        navigationState={state}
+        onIndexChange={(index: number) =>
+          navigation.dispatch({
+            ...TabActions.jumpTo(state.routes[index].name),
+            target: state.key,
+          })
         }
+        renderScene={({ route }) => descriptors[route.key].render()}
+        renderIcon={({ route, focused, color }) => {
+          const { options } = descriptors[route.key];
 
-        if (typeof options.tabBarIcon === 'function') {
-          return options.tabBarIcon({ focused, color });
+          if (typeof options.tabBarIcon === 'string') {
+            return (
+              <MaterialCommunityIcons
+                name={options.tabBarIcon}
+                color={color}
+                size={24}
+                style={styles.icon}
+                importantForAccessibility="no-hide-descendants"
+                accessibilityElementsHidden
+              />
+            );
+          }
+
+          if (typeof options.tabBarIcon === 'function') {
+            return options.tabBarIcon({ focused, color });
+          }
+
+          return null;
+        }}
+        getLabelText={({ route }: Scene) => {
+          const { options } = descriptors[route.key];
+
+          return options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : (route as Route<string>).name;
+        }}
+        getColor={({ route }) => descriptors[route.key].options.tabBarColor}
+        getBadge={({ route }) => descriptors[route.key].options.tabBarBadge}
+        getAccessibilityLabel={({ route }) =>
+          descriptors[route.key].options.tabBarAccessibilityLabel
         }
+        getTestID={({ route }) => descriptors[route.key].options.tabBarTestID}
+        onTabPress={({ route, preventDefault }) => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
 
-        return null;
-      }}
-      getLabelText={({ route }: Scene) => {
-        const { options } = descriptors[route.key];
-
-        return options.tabBarLabel !== undefined
-          ? options.tabBarLabel
-          : options.title !== undefined
-          ? options.title
-          : (route as Route<string>).name;
-      }}
-      getColor={({ route }) => descriptors[route.key].options.tabBarColor}
-      getBadge={({ route }) => descriptors[route.key].options.tabBarBadge}
-      getAccessibilityLabel={({ route }) =>
-        descriptors[route.key].options.tabBarAccessibilityLabel
-      }
-      getTestID={({ route }) => descriptors[route.key].options.tabBarTestID}
-      onTabPress={({ route, preventDefault }) => {
-        const event = navigation.emit({
-          type: 'tabPress',
-          target: route.key,
-          canPreventDefault: true,
-        });
-
-        if (event.defaultPrevented) {
-          preventDefault();
-        }
-      }}
-    />
+          if (event.defaultPrevented) {
+            preventDefault();
+          }
+        }}
+      />
+    </NavigationHelpersContext.Provider>
   );
 }
 

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
 import {
+  NavigationHelpersContext,
   TabNavigationState,
   TabActions,
   useTheme,
@@ -45,25 +46,27 @@ export default function MaterialTopTabView({
   };
 
   return (
-    <TabView
-      {...rest}
-      onIndexChange={(index) =>
-        navigation.dispatch({
-          ...TabActions.jumpTo(state.routes[index].name),
-          target: state.key,
-        })
-      }
-      renderScene={({ route }) => descriptors[route.key].render()}
-      navigationState={state}
-      renderTabBar={renderTabBar}
-      renderPager={pager}
-      renderLazyPlaceholder={lazyPlaceholder}
-      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
-      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
-      sceneContainerStyle={[
-        { backgroundColor: colors.background },
-        sceneContainerStyle,
-      ]}
-    />
+    <NavigationHelpersContext.Provider value={navigation}>
+      <TabView
+        {...rest}
+        onIndexChange={(index) =>
+          navigation.dispatch({
+            ...TabActions.jumpTo(state.routes[index].name),
+            target: state.key,
+          })
+        }
+        renderScene={({ route }) => descriptors[route.key].render()}
+        navigationState={state}
+        renderTabBar={renderTabBar}
+        renderPager={pager}
+        renderLazyPlaceholder={lazyPlaceholder}
+        onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
+        onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
+        sceneContainerStyle={[
+          { backgroundColor: colors.background },
+          sceneContainerStyle,
+        ]}
+      />
+    </NavigationHelpersContext.Provider>
   );
 }

packages/native/src/useLinkBuilder.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {
   NavigationHelpers,
+  NavigationHelpersContext,
   NavigationProp,
   ParamListBase,
-  EventMapBase,
   getPathFromState,
 } from '@react-navigation/core';
 import LinkingContext from './LinkingContext';
@@ -17,7 +17,7 @@ type MinimalState = {
   routes: { name: string; params?: object; state?: MinimalState }[];
 };
 
-const getRootState = (
+const getRootStateForNavigate = (
   navigation: NavigationObject,
   state: MinimalState
 ): MinimalState => {
@@ -26,7 +26,7 @@ const getRootState = (
   if (parent) {
     const parentState = parent.dangerouslyGetState();
 
-    return getRootState(parent, {
+    return getRootStateForNavigate(parent, {
       index: 0,
       routes: [
         {
@@ -43,24 +43,26 @@ const getRootState = (
 /**
  * Build destination link for a navigate action.
  * Useful for showing anchor tags on the web for buttons that perform navigation.
- *
- * @param options.navigation Navigation object for the navigator.
  */
-export default function useLinkBuilder({
-  navigation,
-}: {
-  navigation: NavigationHelpers<ParamListBase, EventMapBase>;
-}) {
+export default function useLinkBuilder() {
+  const navigation = React.useContext(NavigationHelpersContext);
   const linking = React.useContext(LinkingContext);
 
   const buildLink = React.useCallback(
     (name: string, params?: object) => {
       const { options } = linking;
 
-      const state = getRootState(navigation, {
-        index: 0,
-        routes: [{ name, params }],
-      });
+      // If we couldn't find a navigation object in context, we're at root
+      // So we'll construct a basic state object to use
+      const state = navigation
+        ? getRootStateForNavigate(navigation, {
+            index: 0,
+            routes: [{ name, params }],
+          })
+        : {
+            index: 0,
+            routes: [{ name, params }],
+          };
 
       const path = options?.getPathFromState
         ? options.getPathFromState(state, options?.config)

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

@@ -3,6 +3,7 @@ import { View, Platform, StyleSheet } from 'react-native';
 import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
+  NavigationHelpersContext,
   StackActions,
   StackNavigationState,
   Route,
@@ -405,7 +406,6 @@ export default class StackView extends React.Component<Props, State> {
   render() {
     const {
       state,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       navigation,
       keyboardHandlingEnabled,
       mode = 'card',
@@ -423,38 +423,40 @@ export default class StackView extends React.Component<Props, State> {
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
-      <GestureHandlerWrapper style={styles.container}>
-        <SafeAreaProviderCompat>
-          <SafeAreaConsumer>
-            {(insets) => (
-              <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
-                {(props) => (
-                  <CardStack
-                    mode={mode}
-                    insets={insets as EdgeInsets}
-                    getPreviousRoute={this.getPreviousRoute}
-                    getGesturesEnabled={this.getGesturesEnabled}
-                    routes={routes}
-                    openingRouteKeys={openingRouteKeys}
-                    closingRouteKeys={closingRouteKeys}
-                    onOpenRoute={this.handleOpenRoute}
-                    onCloseRoute={this.handleCloseRoute}
-                    onTransitionStart={this.handleTransitionStart}
-                    onTransitionEnd={this.handleTransitionEnd}
-                    renderHeader={this.renderHeader}
-                    renderScene={this.renderScene}
-                    headerMode={headerMode}
-                    state={state}
-                    descriptors={descriptors}
-                    {...rest}
-                    {...props}
-                  />
-                )}
-              </KeyboardManager>
-            )}
-          </SafeAreaConsumer>
-        </SafeAreaProviderCompat>
-      </GestureHandlerWrapper>
+      <NavigationHelpersContext.Provider value={navigation}>
+        <GestureHandlerWrapper style={styles.container}>
+          <SafeAreaProviderCompat>
+            <SafeAreaConsumer>
+              {(insets) => (
+                <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
+                  {(props) => (
+                    <CardStack
+                      mode={mode}
+                      insets={insets as EdgeInsets}
+                      getPreviousRoute={this.getPreviousRoute}
+                      getGesturesEnabled={this.getGesturesEnabled}
+                      routes={routes}
+                      openingRouteKeys={openingRouteKeys}
+                      closingRouteKeys={closingRouteKeys}
+                      onOpenRoute={this.handleOpenRoute}
+                      onCloseRoute={this.handleCloseRoute}
+                      onTransitionStart={this.handleTransitionStart}
+                      onTransitionEnd={this.handleTransitionEnd}
+                      renderHeader={this.renderHeader}
+                      renderScene={this.renderScene}
+                      headerMode={headerMode}
+                      state={state}
+                      descriptors={descriptors}
+                      {...rest}
+                      {...props}
+                    />
+                  )}
+                </KeyboardManager>
+              )}
+            </SafeAreaConsumer>
+          </SafeAreaProviderCompat>
+        </GestureHandlerWrapper>
+      </NavigationHelpersContext.Provider>
     );
   }
 }