chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.14
 - @react-navigation/core@6.0.0-next.10
 - @react-navigation/devtools@6.0.0-next.11
 - @react-navigation/drawer@6.0.0-next.13
 - @react-navigation/elements@1.0.0-next.13
 - flipper-plugin-react-navigation@1.1.1
 - @react-navigation/material-bottom-tabs@6.0.0-next.10
 - @react-navigation/material-top-tabs@6.0.0-next.11
 - @react-navigation/native-stack@6.0.0-next.3
 - @react-navigation/native@6.0.0-next.10
 - @react-navigation/stack@6.0.0-next.21

example/src/Screens/StackTransparent.tsx

@@ -15,9 +15,11 @@ import {
   useCardAnimation,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
+import NewsFeed from '../Shared/NewsFeed';
 
 type TransparentStackParams = {
   Article: { author: string };
+  NewsFeed: undefined;
   Dialog: undefined;
 };
 
@@ -37,6 +39,13 @@ const ArticleScreen = ({
         >
           Show Dialog
         </Button>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('NewsFeed')}
+          style={styles.button}
+        >
+          Push NewsFeed
+        </Button>
         <Button
           mode="outlined"
           onPress={() => navigation.goBack()}
@@ -53,6 +62,32 @@ const ArticleScreen = ({
   );
 };
 
+const NewsFeedScreen = ({
+  navigation,
+}: StackScreenProps<TransparentStackParams, 'NewsFeed'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Dialog')}
+          style={styles.button}
+        >
+          Show Dialog
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
 const DialogScreen = ({
   navigation,
 }: StackScreenProps<TransparentStackParams>) => {
@@ -116,6 +151,11 @@ export default function TransparentStackScreen({ navigation }: Props) {
         component={ArticleScreen}
         initialParams={{ author: 'Gandalf' }}
       />
+      <TransparentStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ presentation: 'modal' }}
+      />
       <TransparentStack.Screen
         name="Dialog"
         component={DialogScreen}
@@ -131,6 +171,7 @@ export default function TransparentStackScreen({ navigation }: Props) {
 const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     padding: 8,
   },
   button: {

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.13...@react-navigation/bottom-tabs@6.0.0-next.14) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
+# [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.12...@react-navigation/bottom-tabs@6.0.0-next.13) (2021-05-25)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.11...@react-navigation/bottom-tabs@6.0.0-next.12) (2021-05-23)
 
 **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": "6.0.0-next.12",
+  "version": "6.0.0-next.14",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.13",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",

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

@@ -17,7 +17,12 @@ import type {
   BottomTabNavigationEventMap,
 } from '../types';
 
-type Props = DefaultNavigatorOptions<BottomTabNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap
+> &
   TabRouterOptions &
   BottomTabNavigationConfig;
 
@@ -25,6 +30,7 @@ function BottomTabNavigator({
   initialRouteName,
   backBehavior,
   children,
+  screenListeners,
   screenOptions,
   sceneContainerStyle,
   // @ts-expect-error: lazy is deprecated
@@ -85,6 +91,7 @@ function BottomTabNavigator({
     initialRouteName,
     backBehavior,
     children,
+    screenListeners,
     screenOptions,
     defaultScreenOptions,
   });

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.9...@react-navigation/core@6.0.0-next.10) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+* expose container ref in useNavigation ([1d40279](https://github.com/react-navigation/react-navigation/commit/1d40279db18ab2aed12517ed3ca6af6d509477d2))
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.8...@react-navigation/core@6.0.0-next.9) (2021-05-23)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "keywords": [
     "react",
     "react-native",

packages/core/src/BaseNavigationContainer.tsx

@@ -29,6 +29,7 @@ import type {
   NavigationContainerRef,
   NavigationContainerProps,
 } from './types';
+import NavigationContainerRefContext from './NavigationContainerRefContext';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
@@ -136,17 +137,22 @@ const BaseNavigationContainer = React.forwardRef(
 
     const { keyedListeners, addKeyedListener } = useKeyedChildListeners();
 
-    const dispatch = (
+    const dispatch = React.useCallback(
-      action: NavigationAction | ((state: NavigationState) => NavigationAction)
+      (
-    ) => {
+        action:
-      if (listeners.focus[0] == null) {
+          | NavigationAction
-        console.error(NOT_INITIALIZED_ERROR);
+          | ((state: NavigationState) => NavigationAction)
-      } else {
+      ) => {
-        listeners.focus[0]((navigation) => navigation.dispatch(action));
+        if (listeners.focus[0] == null) {
-      }
+          console.error(NOT_INITIALIZED_ERROR);
-    };
+        } else {
+          listeners.focus[0]((navigation) => navigation.dispatch(action));
+        }
+      },
+      [listeners.focus]
+    );
 
-    const canGoBack = () => {
+    const canGoBack = React.useCallback(() => {
       if (listeners.focus[0] == null) {
         return false;
       }
@@ -160,7 +166,7 @@ const BaseNavigationContainer = React.forwardRef(
       } else {
         return false;
       }
-    };
+    }, [listeners.focus]);
 
     const resetRoot = React.useCallback(
       (state?: PartialState<NavigationState> | NavigationState) => {
@@ -200,24 +206,38 @@ const BaseNavigationContainer = React.forwardRef(
 
     const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});
 
-    React.useImperativeHandle(ref, () => ({
+    const navigation: NavigationContainerRef<ParamListBase> = React.useMemo(
-      ...Object.keys(CommonActions).reduce<any>((acc, name) => {
+      () => ({
-        acc[name] = (...args: any[]) =>
+        ...Object.keys(CommonActions).reduce<any>((acc, name) => {
-          // @ts-expect-error: this is ok
+          acc[name] = (...args: any[]) =>
-          dispatch(CommonActions[name](...args));
+            // @ts-expect-error: this is ok
-        return acc;
+            dispatch(CommonActions[name](...args));
-      }, {}),
+          return acc;
-      ...emitter.create('root'),
+        }, {}),
-      resetRoot,
+        ...emitter.create('root'),
-      dispatch,
+        resetRoot,
-      canGoBack,
+        dispatch,
-      getRootState,
+        canGoBack,
-      getState: () => state,
+        getRootState,
-      getParent: () => undefined,
+        getState: () => stateRef.current,
-      getCurrentRoute,
+        getParent: () => undefined,
-      getCurrentOptions,
+        getCurrentRoute,
-      isReady: () => listeners.focus[0] != null,
+        getCurrentOptions,
-    }));
+        isReady: () => listeners.focus[0] != null,
+      }),
+      [
+        canGoBack,
+        dispatch,
+        emitter,
+        getCurrentOptions,
+        getCurrentRoute,
+        getRootState,
+        listeners.focus,
+        resetRoot,
+      ]
+    );
+
+    React.useImperativeHandle(ref, () => navigation, [navigation]);
 
     const onDispatchAction = React.useCallback(
       (action: NavigationAction, noop: boolean) => {
@@ -285,10 +305,12 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     const onStateChangeRef = React.useRef(onStateChange);
+    const stateRef = React.useRef(state);
 
     React.useEffect(() => {
       isInitialRef.current = false;
       onStateChangeRef.current = onStateChange;
+      stateRef.current = state;
     });
 
     React.useEffect(() => {
@@ -415,17 +437,19 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     let element = (
-      <ScheduleUpdateContext.Provider value={scheduleContext}>
+      <NavigationContainerRefContext.Provider value={navigation}>
-        <NavigationBuilderContext.Provider value={builderContext}>
+        <ScheduleUpdateContext.Provider value={scheduleContext}>
-          <NavigationStateContext.Provider value={context}>
+          <NavigationBuilderContext.Provider value={builderContext}>
-            <UnhandledActionContext.Provider
+            <NavigationStateContext.Provider value={context}>
-              value={onUnhandledAction ?? defaultOnUnhandledAction}
+              <UnhandledActionContext.Provider
-            >
+                value={onUnhandledAction ?? defaultOnUnhandledAction}
-              <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+              >
-            </UnhandledActionContext.Provider>
+                <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-          </NavigationStateContext.Provider>
+              </UnhandledActionContext.Provider>
-        </NavigationBuilderContext.Provider>
+            </NavigationStateContext.Provider>
-      </ScheduleUpdateContext.Provider>
+          </NavigationBuilderContext.Provider>
+        </ScheduleUpdateContext.Provider>
+      </NavigationContainerRefContext.Provider>
     );
 
     if (independent) {

packages/core/src/NavigationContainerRefContext.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ParamListBase } from '@react-navigation/routers';
+import type { NavigationContainerRef } from './types';
+
+/**
+ * Context which holds the route prop for a screen.
+ */
+const NavigationContainerRefContext = React.createContext<
+  NavigationContainerRef<ParamListBase> | undefined
+>(undefined);
+
+export default NavigationContainerRefContext;

packages/core/src/NavigationRouteContext.tsx

@@ -4,8 +4,8 @@ import type { Route } from '@react-navigation/routers';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationContext = React.createContext<Route<string> | undefined>(
+const NavigationRouteContext = React.createContext<Route<string> | undefined>(
   undefined
 );
 
-export default NavigationContext;
+export default NavigationRouteContext;

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

@@ -106,13 +106,40 @@ it("gets navigation's parent's parent from context", () => {
   );
 });
 
+it('gets navigation from container from context', () => {
+  expect.assertions(1);
+
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map((route) => descriptors[route.key].render());
+  };
+
+  const Test = () => {
+    const navigation = useNavigation();
+
+    expect(navigation.navigate).toBeDefined();
+
+    return null;
+  };
+
+  render(
+    <BaseNavigationContainer>
+      <Test />
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+});
+
 it('throws if called outside a navigation context', () => {
   expect.assertions(1);
 
   const Test = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     expect(() => useNavigation()).toThrow(
-      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
     );
 
     return null;

packages/core/src/index.tsx

@@ -6,6 +6,7 @@ export { default as createNavigatorFactory } from './createNavigatorFactory';
 export { default as createNavigationContainerRef } from './createNavigationContainerRef';
 export { default as useNavigationContainerRef } from './useNavigationContainerRef';
 
+export { default as NavigationContainerRefContext } from './NavigationContainerRefContext';
 export { default as NavigationHelpersContext } from './NavigationHelpersContext';
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';

packages/core/src/types.tsx

@@ -20,14 +20,25 @@ declare global {
 type Keyof<T extends {}> = Extract<keyof T, string>;
 
 export type DefaultNavigatorOptions<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
   ScreenOptions extends {},
-  ParamList extends ParamListBase = ParamListBase
+  EventMap extends EventMapBase
 > = DefaultRouterOptions<Keyof<ParamList>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen`, `Group` and `React.Fragment` are supported as children.
    */
   children: React.ReactNode;
+  /**
+   * Event listeners for all the screens in the navigator.
+   */
+  screenListeners?:
+    | ScreenListeners<State, EventMap>
+    | ((props: {
+        route: RouteProp<ParamList>;
+        navigation: any;
+      }) => ScreenListeners<State, EventMap>);
   /**
    * Default options for all screens under this navigator.
    */
@@ -564,9 +575,9 @@ export type TypedNavigator<
   Navigator: React.ComponentType<
     Omit<
       React.ComponentProps<Navigator>,
-      keyof DefaultNavigatorOptions<any, any>
+      keyof DefaultNavigatorOptions<any, any, any, any>
     > &
-      DefaultNavigatorOptions<ScreenOptions, ParamList>
+      DefaultNavigatorOptions<ParamList, State, ScreenOptions, EventMap>
   >;
   /**
    * Component used for grouping multiple route configuration.

packages/core/src/useNavigation.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import NavigationContainerRefContext from './NavigationContainerRefContext';
 import NavigationContext from './NavigationContext';
 import type { NavigationProp } from './types';
 
@@ -10,14 +11,15 @@ import type { NavigationProp } from './types';
 export default function useNavigation<
   T = NavigationProp<ReactNavigation.RootParamList>
 >(): T {
+  const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationContext);
 
-  if (navigation === undefined) {
+  if (navigation === undefined && root === undefined) {
     throw new Error(
-      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
     );
   }
 
   // FIXME: Figure out a better way to do this
-  return (navigation as unknown) as T;
+  return ((navigation ?? root) as unknown) as T;
 }

packages/core/src/useNavigationBuilder.tsx

@@ -202,7 +202,13 @@ export default function useNavigationBuilder<
   EventMap extends Record<string, any>
 >(
   createRouter: RouterFactory<State, any, RouterOptions>,
-  options: DefaultNavigatorOptions<ScreenOptions> & RouterOptions
+  options: DefaultNavigatorOptions<
+    ParamListBase,
+    State,
+    ScreenOptions,
+    EventMap
+  > &
+    RouterOptions
 ) {
   const navigatorKey = useRegisterNavigator();
 
@@ -210,7 +216,7 @@ export default function useNavigationBuilder<
     | NavigatorRoute<State>
     | undefined;
 
-  const { children, ...rest } = options;
+  const { children, screenListeners, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
       ...((rest as unknown) as RouterOptions),
@@ -487,8 +493,14 @@ export default function useNavigationBuilder<
 
     const listeners = ([] as (((e: any) => void) | undefined)[])
       .concat(
-        ...routeNames.map((name) => {
+        // Get an array of listeners for all screens + common listeners on navigator
-          const { listeners } = screens[name][1];
+        ...[
+          screenListeners,
+          ...routeNames.map((name) => {
+            const { listeners } = screens[name][1];
+            return listeners;
+          }),
+        ].map((listeners) => {
           const map =
             typeof listeners === 'function'
               ? listeners({ route: route as any, navigation })
@@ -501,6 +513,8 @@ export default function useNavigationBuilder<
             : undefined;
         })
       )
+      // We don't want same listener to be called multiple times for same event
+      // So we remove any duplicate functions from the array
       .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
 
     listeners.forEach((listener) => listener?.(e));

packages/devtools/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.10...@react-navigation/devtools@6.0.0-next.11) (2021-05-26)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.9...@react-navigation/devtools@6.0.0-next.10) (2021-05-25)
+
+
+### Bug Fixes
+
+* make react-native-flipper optional in devtools ([a5520d7](https://github.com/react-navigation/react-navigation/commit/a5520d7ef1f0980aa869ba2bdf92194d3e3a6b96))
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.8...@react-navigation/devtools@6.0.0-next.9) (2021-05-23)
 
 

packages/devtools/README.md

@@ -3,31 +3,3 @@
 Developer tools for React Navigation.
 
 Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).
-
-## Installation
-
-Open a Terminal in your project's folder and run,
-
-```sh
-yarn add @react-navigation/devtools
-```
-
-## Usage
-
-For redux dev tools extension integration, you can pass a ref to the container:
-
-```js
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { useReduxDevToolsExtension } from '@react-navigation/devtools';
-
-export default function App() {
-  const navigationRef = React.useRef();
-
-  useReduxDevToolsExtension(navigationRef);
-
-  return (
-    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
-  );
-}
-```

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.11",
   "keywords": [
     "react",
     "react-native",
@@ -40,7 +40,7 @@
     "nanoid": "^3.1.22"
   },
   "devDependencies": {
-    "@react-navigation/core": "^6.0.0-next.9",
+    "@react-navigation/core": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^16.9.53",
@@ -51,8 +51,7 @@
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "*"
-    "react-native-flipper": "*"
   },
   "react-native-builder-bob": {
     "source": "src",

packages/devtools/src/useFlipper.tsx

@@ -1,12 +1,28 @@
 import * as React from 'react';
-import { addPlugin, Flipper } from 'react-native-flipper';
 import type { NavigationContainerRef } from '@react-navigation/core';
+import type { Flipper } from 'react-native-flipper';
 import { nanoid } from 'nanoid/non-secure';
 import useDevToolsBase from './useDevToolsBase';
 
+let FlipperModule: typeof import('react-native-flipper') | undefined;
+
+try {
+  FlipperModule = require('react-native-flipper');
+} catch (e) {
+  // Do nothing
+}
+
 export default function useFlipper(
   ref: React.RefObject<NavigationContainerRef<any>>
 ) {
+  if (FlipperModule == null) {
+    throw new Error(
+      "Please install the 'react-native-flipper' package in your project to use Flipper integration for React Navigation."
+    );
+  }
+
+  const { addPlugin } = FlipperModule;
+
   const connectionRef = React.useRef<Flipper.FlipperConnection>();
 
   const { resetRoot } = useDevToolsBase(ref, (...args) => {
@@ -91,5 +107,5 @@ export default function useFlipper(
         return false;
       },
     });
-  }, [ref, resetRoot]);
+  }, [addPlugin, ref, resetRoot]);
 }

packages/drawer/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.12...@react-navigation/drawer@6.0.0-next.13) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
+# [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.11...@react-navigation/drawer@6.0.0-next.12) (2021-05-25)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.10...@react-navigation/drawer@6.0.0-next.11) (2021-05-23)
 
 **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": "6.0.0-next.11",
+  "version": "6.0.0-next.13",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,12 +41,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.13",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -17,7 +17,12 @@ import type {
   DrawerNavigationEventMap,
 } from '../types';
 
-type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap
+> &
   DrawerRouterOptions &
   DrawerNavigationConfig;
 
@@ -26,6 +31,7 @@ function DrawerNavigator({
   defaultStatus,
   backBehavior,
   children,
+  screenListeners,
   screenOptions,
   // @ts-expect-error: lazy is deprecated
   lazy,
@@ -83,6 +89,7 @@ function DrawerNavigator({
     defaultStatus,
     backBehavior,
     children,
+    screenListeners,
     screenOptions,
     defaultScreenOptions,
   });

packages/drawer/src/views/legacy/Drawer.tsx

@@ -523,7 +523,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
         : multiply(this.drawerWidth, -1);
 
     // FIXME: Currently hitSlop is broken when on Android when drawer is on right
-    // https://github.com/kmagiera/react-native-gesture-handler/issues/569
+    // https://github.com/software-mansion/react-native-gesture-handler/issues/569
     const hitSlop = isRight
       ? // Extend hitSlop to the side of the screen when drawer is closed
         // This lets the user drag the drawer from the side of the screen

packages/drawer/src/views/modern/Drawer.tsx

@@ -133,7 +133,7 @@ export default function Drawer({
   };
 
   // FIXME: Currently hitSlop is broken when on Android when drawer is on right
-  // https://github.com/kmagiera/react-native-gesture-handler/issues/569
+  // https://github.com/software-mansion/react-native-gesture-handler/issues/569
   const hitSlop = isRight
     ? // Extend hitSlop to the side of the screen when drawer is closed
       // This lets the user drag the drawer from the side of the screen

packages/elements/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.12...@react-navigation/elements@1.0.0-next.13) (2021-05-26)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
+# [1.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.11...@react-navigation/elements@1.0.0-next.12) (2021-05-25)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
 # [1.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.10...@react-navigation/elements@1.0.0-next.11) (2021-05-23)
 
 **Note:** Version bump only for package @react-navigation/elements

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.13",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.3",
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

packages/elements/src/types.tsx

@@ -11,7 +11,7 @@ export type Layout = { width: number; height: number };
 export type HeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
-   * Defaults to scene `title`.
+   * Defaults to screen `title` or route name.
    *
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.

packages/flipper-plugin-react-navigation/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.0...flipper-plugin-react-navigation@1.1.1) (2021-05-26)
+
+**Note:** Version bump only for package flipper-plugin-react-navigation
+
+
+
+
+
 # 1.1.0 (2021-05-23)
 
 

packages/flipper-plugin-react-navigation/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
   "name": "flipper-plugin-react-navigation",
   "id": "react-navigation",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "pluginType": "client",
   "main": "dist/bundle.js",
   "flipperBundlerEntry": "src/index.tsx",
@@ -28,7 +28,7 @@
     "@ant-design/icons": "^4.6.2",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@react-navigation/core": "^6.0.0-next.9",
+    "@react-navigation/core": "^6.0.0-next.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "antd": "^4.14.0",

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.9...@react-navigation/material-bottom-tabs@6.0.0-next.10) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.8...@react-navigation/material-bottom-tabs@6.0.0-next.9) (2021-05-23)
 
 **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": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

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

@@ -17,7 +17,12 @@ import type {
   MaterialBottomTabNavigationEventMap,
 } from '../types';
 
-type Props = DefaultNavigatorOptions<MaterialBottomTabNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap
+> &
   TabRouterOptions &
   MaterialBottomTabNavigationConfig;
 
@@ -25,6 +30,7 @@ function MaterialBottomTabNavigator({
   initialRouteName,
   backBehavior,
   children,
+  screenListeners,
   screenOptions,
   ...rest
 }: Props) {
@@ -43,6 +49,7 @@ function MaterialBottomTabNavigator({
     initialRouteName,
     backBehavior,
     children,
+    screenListeners,
     screenOptions,
   });
 

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.10...@react-navigation/material-top-tabs@6.0.0-next.11) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
 # [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.9...@react-navigation/material-top-tabs@6.0.0-next.10) (2021-05-23)
 
 **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": "6.0.0-next.10",
+  "version": "6.0.0-next.11",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

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

@@ -17,7 +17,12 @@ import type {
   MaterialTopTabNavigationEventMap,
 } from '../types';
 
-type Props = DefaultNavigatorOptions<MaterialTopTabNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap
+> &
   TabRouterOptions &
   MaterialTopTabNavigationConfig;
 
@@ -25,6 +30,7 @@ function MaterialTopTabNavigator({
   initialRouteName,
   backBehavior,
   children,
+  screenListeners,
   screenOptions,
   lazy,
   tabBarOptions,
@@ -86,6 +92,7 @@ function MaterialTopTabNavigator({
     initialRouteName,
     backBehavior,
     children,
+    screenListeners,
     screenOptions,
   });
 

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.2...@react-navigation/native-stack@6.0.0-next.3) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
+# [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.1...@react-navigation/native-stack@6.0.0-next.2) (2021-05-25)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [6.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@5.0.5...@react-navigation/native-stack@6.0.0-next.1) (2021-05-23)
 
 

packages/native-stack/README.md

@@ -1,5 +1,5 @@
 # `@react-navigation/native-stack`
 
-Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.
+Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/software-mansion/react-native-screens) under the hood.
 
 Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/native-stack-navigator.html).

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.0.0-next.1",
+  "version": "6.0.0-next.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,11 +41,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.13",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "~0.64.4",

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

@@ -1,6 +1,5 @@
 import {
   createNavigatorFactory,
-  DefaultNavigatorOptions,
   EventArg,
   StackActions,
   StackActionHelpers,
@@ -16,16 +15,13 @@ import NativeStackView from '../views/NativeStackView';
 import type {
   NativeStackNavigationOptions,
   NativeStackNavigationEventMap,
-  NativeStackNavigationConfig,
+  NativeStackNavigatorProps,
 } from '../types';
 
-export type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> &
-  StackRouterOptions &
-  NativeStackNavigationConfig;
-
 function NativeStackNavigator({
   initialRouteName,
   children,
+  screenListeners,
   screenOptions,
   ...rest
 }: NativeStackNavigatorProps) {
@@ -38,6 +34,7 @@ function NativeStackNavigator({
   >(StackRouter, {
     initialRouteName,
     children,
+    screenListeners,
     screenOptions,
   });
 

packages/native-stack/src/types.tsx

@@ -94,10 +94,10 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  headerBackTitleStyle?: {
+  headerBackTitleStyle?: StyleProp<{
     fontFamily?: string;
     fontSize?: number;
-  };
+  }>;
   /**
    * Image to display in the header as the icon in the back button.
    * Defaults to back icon image for the platform
@@ -197,10 +197,12 @@ export type NativeStackNavigationOptions = {
   headerRight?: (props: { tintColor?: string }) => React.ReactNode;
   /**
    * String or a function that returns a React Element to be used by the header.
-   * Defaults to scene `title`.
+   * Defaults to screen `title` or route name.
    *
-   * It receives `tintColor` and`children` in the options object as an argument.
+   * When a function is passed, it receives `tintColor` and`children` in the options object as an argument.
    * The title string is passed in `children`.
+   *
+   * Note that if you render a custom element by passing a function, animations for the title won't work.
    */
   headerTitle?:
     | string
@@ -227,16 +229,6 @@ export type NativeStackNavigationOptions = {
     fontWeight?: string;
     color?: string;
   }>;
-  /**
-   * Whether there should be additional top inset to account for translucent status bar.
-   * If you don't have a translucent status bar, you can disable this by passing `false`
-   *
-   * Only supported on Android. Insets are always applied on iOS because the
-   * header cannot be opaque.
-   *
-   * @platform android
-   */
-  headerTopInsetEnabled?: boolean;
   /**
    * Options to render a native search bar on iOS.
    *
@@ -245,7 +237,7 @@ export type NativeStackNavigationOptions = {
   headerSearchBar?: SearchBarProps;
   /**
    * Sets the status bar animation (similar to the `StatusBar` component).
-   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
    *
    * Only supported on iOS.
    *
@@ -263,7 +255,7 @@ export type NativeStackNavigationOptions = {
   statusBarHidden?: boolean;
   /**
    * Sets the status bar color (similar to the `StatusBar` component).
-   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
    *
    * Only supported on iOS.
    *
@@ -330,7 +322,12 @@ export type NativeStackNavigationOptions = {
   orientation?: ScreenStackHeaderConfigProps['screenOrientation'];
 };
 
-export type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> &
+export type NativeStackNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  StackNavigationState<ParamListBase>,
+  NativeStackNavigationOptions,
+  NativeStackNavigationEventMap
+> &
   StackRouterOptions &
   NativeStackNavigationConfig;
 

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

@@ -11,6 +11,7 @@ import {
 } from 'react-native-screens';
 import { Route, useTheme } from '@react-navigation/native';
 import { HeaderTitle } from '@react-navigation/elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackNavigationOptions } from '../types';
 import { processFonts } from './FontProcessor';
 
@@ -37,7 +38,6 @@ export default function HeaderConfig({
   headerTintColor,
   headerTitle,
   headerTitleStyle,
-  headerTopInsetEnabled = true,
   headerTranslucent,
   route,
   orientation,
@@ -47,6 +47,7 @@ export default function HeaderConfig({
   statusBarStyle,
   title,
 }: Props): JSX.Element {
+  const insets = useSafeAreaInsets();
   const { colors } = useTheme();
   const tintColor =
     headerTintColor != null
@@ -131,7 +132,7 @@ export default function HeaderConfig({
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyleFlattened.fontSize}
       titleFontWeight={headerTitleStyleFlattened.fontWeight}
-      topInsetEnabled={headerTopInsetEnabled}
+      topInsetEnabled={insets.top !== 0}
       translucent={
         // This defaults to `true`, so we can't pass `undefined`
         headerTranslucent === true

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

@@ -15,7 +15,6 @@ import {
   ScreenStack,
   StackPresentationTypes,
 } from 'react-native-screens';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import warnOnce from 'warn-once';
 import HeaderConfig from './HeaderConfig';
 import type {
@@ -117,8 +116,6 @@ type Props = {
 };
 
 function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  const insets = useSafeAreaInsets();
-
   return (
     <ScreenStack style={styles.container}>
       {state.routes.map((route, index) => {
@@ -197,9 +194,6 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
               {...options}
               route={route}
               headerShown={isHeaderInPush}
-              headerTopInsetEnabled={
-                options.headerTopInsetEnabled ?? insets.top !== 0
-              }
             />
             <MaybeNestedStack
               options={options}

packages/native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.9...@react-navigation/native@6.0.0-next.10) (2021-05-26)
+
+
+### Features
+
+* expose container ref in useNavigation ([1d40279](https://github.com/react-navigation/react-navigation/commit/1d40279db18ab2aed12517ed3ca6af6d509477d2))
+
+
+
+
+
 # [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.8...@react-navigation/native@6.0.0-next.9) (2021-05-23)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.9",
+    "@react-navigation/core": "^6.0.0-next.10",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.22"
   },

packages/native/src/useLinkProps.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Platform, GestureResponderEvent } from 'react-native';
 import {
   NavigationAction,
+  NavigationContainerRefContext,
   NavigationHelpersContext,
 } from '@react-navigation/core';
 import useLinkTo, { To } from './useLinkTo';
@@ -20,6 +21,7 @@ type Props<ParamList extends ReactNavigation.RootParamList> = {
 export default function useLinkProps<
   ParamList extends ReactNavigation.RootParamList
 >({ to, action }: Props<ParamList>) {
+  const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
   const linkTo = useLinkTo<ParamList>();
 
@@ -47,8 +49,12 @@ export default function useLinkProps<
       if (action) {
         if (navigation) {
           navigation.dispatch(action);
+        } else if (root) {
+          root.dispatch(action);
         } else {
-          throw new Error("Couldn't find a navigation object.");
+          throw new Error(
+            "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+          );
         }
       } else {
         linkTo(to);

packages/native/src/useLinkTo.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
+  NavigationContainerRefContext,
   getStateFromPath,
   getActionFromState,
-  NavigationContext,
 } from '@react-navigation/core';
 import LinkingContext from './LinkingContext';
 
@@ -24,25 +24,17 @@ export type To<
 export default function useLinkTo<
   ParamList extends ReactNavigation.RootParamList
 >() {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.useContext(NavigationContainerRefContext);
   const linking = React.useContext(LinkingContext);
 
   const linkTo = React.useCallback(
     (to: To<ParamList>) => {
       if (navigation === undefined) {
         throw new Error(
-          "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
+          "Couldn't find a navigation object. Is your component inside NavigationContainer?"
         );
       }
 
-      let root = navigation;
-      let current;
-
-      // Traverse up to get the root navigation
-      while ((current = root.getParent())) {
-        root = current;
-      }
-
       if (typeof to !== 'string') {
         // @ts-expect-error: This is fine
         root.navigate(to.screen, to.params);
@@ -63,9 +55,9 @@ export default function useLinkTo<
         const action = getActionFromState(state, options?.config);
 
         if (action !== undefined) {
-          root.dispatch(action);
+          navigation.dispatch(action);
         } else {
-          root.reset(state);
+          navigation.reset(state);
         }
       } else {
         throw new Error('Failed to parse the path to a navigation state.');

packages/stack/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.21](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.20...@react-navigation/stack@6.0.0-next.21) (2021-05-26)
+
+
+### Features
+
+* add screenListeners prop on navigators similar to screenOptions ([cde44a5](https://github.com/react-navigation/react-navigation/commit/cde44a5785444a121aa08f94af9f8fe4fc89910a))
+
+
+
+
+
+# [6.0.0-next.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.19...@react-navigation/stack@6.0.0-next.20) (2021-05-25)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.18...@react-navigation/stack@6.0.0-next.19) (2021-05-24)
+
+
+### Bug Fixes
+
+* make transparent modal work with modal presentation ([c90bff0](https://github.com/react-navigation/react-navigation/commit/c90bff08d54d1c7151737a43d4f73abe7d364366))
+
+
+
+
+
 # [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.17...@react-navigation/stack@6.0.0-next.18) (2021-05-23)
 
 

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": "6.0.0-next.18",
+  "version": "6.0.0-next.21",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,13 +40,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.13",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.9",
+    "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",

packages/stack/src/navigators/createStackNavigator.tsx

@@ -20,13 +20,19 @@ import type {
   StackHeaderMode,
 } from '../types';
 
-type Props = DefaultNavigatorOptions<StackNavigationOptions> &
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  StackNavigationState<ParamListBase>,
+  StackNavigationOptions,
+  StackNavigationEventMap
+> &
   StackRouterOptions &
   StackNavigationConfig;
 
 function StackNavigator({
   initialRouteName,
   children,
+  screenListeners,
   screenOptions,
   ...rest
 }: Props) {
@@ -65,6 +71,7 @@ function StackNavigator({
   >(StackRouter, {
     initialRouteName,
     children,
+    screenListeners,
     screenOptions,
     defaultScreenOptions: () => ({
       presentation: mode,

packages/stack/src/types.tsx

@@ -129,7 +129,7 @@ export type StackHeaderOptions = HeaderOptions & {
   headerBackTestID?: string;
   /**
    * Title string used by the back button on iOS.
-   * Defaults to the previous scene's title, or "Back" if there's not enough space.
+   * Defaults to the previous screen's title, or "Back" if there's not enough space.
    * Use `headerBackTitleVisible: false` to hide it.
    */
   headerBackTitle?: string;

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

@@ -225,7 +225,7 @@ function CardContainer({
       insets={insets}
       gesture={gesture}
       current={scene.progress.current}
-      next={isNextScreenTransparent ? undefined : scene.progress.next}
+      next={scene.progress.next}
       closing={closing}
       onOpen={handleOpen}
       onClose={handleClose}

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

@@ -219,7 +219,9 @@ export default class CardStack extends React.Component<Props, State> {
         // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
         // but majority of the transitions look alright
         const optionsForTransitionConfig =
-          index !== self.length - 1 && nextDescriptor
+          index !== self.length - 1 &&
+          nextDescriptor &&
+          nextDescriptor.options.presentation !== 'transparentModal'
             ? nextDescriptor.options
             : descriptor.options;
 
@@ -251,6 +253,8 @@ export default class CardStack extends React.Component<Props, State> {
           (!(
             optionsForTransitionConfig.presentation === 'modal' ||
             optionsForTransitionConfig.presentation === 'transparentModal' ||
+            nextDescriptor?.options.presentation === 'modal' ||
+            nextDescriptor?.options.presentation === 'transparentModal' ||
             cardStyleInterpolator === forModalPresentationIOS
           ) &&
           Platform.OS === 'ios' &&
@@ -280,13 +284,15 @@ export default class CardStack extends React.Component<Props, State> {
               state.layout,
               descriptor
             ),
-            next: nextGesture
+            next:
-              ? getProgressFromGesture(
+              nextGesture &&
-                  nextGesture,
+              nextDescriptor.options.presentation !== 'transparentModal'
-                  state.layout,
+                ? getProgressFromGesture(
-                  nextDescriptor
+                    nextGesture,
-                )
+                    state.layout,
-              : undefined,
+                    nextDescriptor
+                  )
+                : undefined,
             previous: previousGesture
               ? getProgressFromGesture(
                   previousGesture,
@@ -466,9 +472,13 @@ export default class CardStack extends React.Component<Props, State> {
       const { options } = scenes[i].descriptor;
       const {
         // By default, we don't want to detach the previous screen of the active one for modals
-        detachPreviousScreen = options.presentation === 'transparentModal' ||
+        detachPreviousScreen = options.presentation === 'transparentModal'
-        options.cardStyleInterpolator === forModalPresentationIOS
+          ? false
-          ? i !== scenes.length - 1
+          : options.cardStyleInterpolator === forModalPresentationIOS
+          ? i !==
+            scenes
+              .map((scene) => scene.descriptor.options.cardStyleInterpolator)
+              .lastIndexOf(forModalPresentationIOS)
           : true,
       } = options;