chore: publish

- @react-navigation/bottom-tabs@5.7.3
 - @react-navigation/compat@5.2.4
 - @react-navigation/core@5.12.2
 - @react-navigation/devtools@5.1.4
 - @react-navigation/drawer@5.8.7
 - @react-navigation/material-bottom-tabs@5.2.15
 - @react-navigation/material-top-tabs@5.2.15
 - @react-navigation/native@5.7.2
 - @react-navigation/routers@5.4.10
 - @react-navigation/stack@5.8.0

.github/workflows/expo-preview.yml

@@ -47,9 +47,21 @@ jobs:
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
+            const body = 'The Expo app for the example from this branch is ready!\n\n[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})\n\n<a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>';
+
+            const comments = await github.issues.listComments({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            });
+
+            if (comments.some(comment => comment.body === body)) {
+              return;
+            }
+
             github.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: 'The Expo app for the example from this branch is ready!\n\n[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})\n\n<a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>'
+              body
             })

.github/workflows/versions.yml

@@ -1,7 +1,7 @@
 name: Check versions
 on:
   issues:
-    types: [opened]
+    types: [opened, edited]
 
 jobs:
   check-versions:

example/src/Screens/AuthFlow.tsx

@@ -147,6 +147,10 @@ export default function SimpleStackScreen({
     []
   );
 
+  if (state.isLoading) {
+    return <SplashScreen />;
+  }
+
   return (
     <AuthContext.Provider value={authContext}>
       <SimpleStack.Navigator
@@ -156,13 +160,7 @@ export default function SimpleStackScreen({
           ),
         }}
       >
-        {state.isLoading ? (
-          <SimpleStack.Screen
-            name="Splash"
-            component={SplashScreen}
-            options={{ title: 'Auth Flow' }}
-          />
-        ) : state.userToken === undefined ? (
+        {state.userToken === undefined ? (
           <SimpleStack.Screen
             name="SignIn"
             options={{

example/src/Screens/CompatAPI.tsx

@@ -82,7 +82,6 @@ const ArticleScreen: CompatScreenType<StackNavigationProp<
   NestedStackParams,
   'Article'
 >> = ({ navigation }) => {
-  navigation.dangerouslyGetParent();
   return (
     <ScrollView>
       <View style={styles.buttons}>

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.7.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.2...@react-navigation/bottom-tabs@5.7.3) (2020-07-28)
+
+
+### Bug Fixes
+
+* add accessibilityState property ([#8548](https://github.com/react-navigation/react-navigation/issues/8548)) ([ce4eb7e](https://github.com/react-navigation/react-navigation/commit/ce4eb7e9273a25e4433eb82e255a58ba3bf4d632))
+* pass label position flag to label rendering in BottomTabBar ([#8557](https://github.com/react-navigation/react-navigation/issues/8557)) ([baea77e](https://github.com/react-navigation/react-navigation/commit/baea77e3325f0d7e5ce331ad61979a9362dd01fa))
+
+
+
+
+
+## [5.7.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.1...@react-navigation/bottom-tabs@5.7.2) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.0...@react-navigation/bottom-tabs@5.7.1) (2020-07-14)
+
+
+### Bug Fixes
+
+* don't render badge on bottom tabs if not visible. closes [#8577](https://github.com/react-navigation/react-navigation/issues/8577) ([2f74541](https://github.com/react-navigation/react-navigation/commit/2f74541811bac4d36e89c159cd1f4b267063e7f9))
+
+
+
+
+
 # [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.6.1...@react-navigation/bottom-tabs@5.7.0) (2020-07-10)
 
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.7.0",
+  "version": "5.7.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.36",
     "@types/react-native": "^0.62.7",

packages/bottom-tabs/src/types.tsx

@@ -63,12 +63,16 @@ export type BottomTabNavigationOptions = {
 
   /**
    * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string } returns a React.Node to display in tab bar.
+   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
     | string
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+    | ((props: {
+        focused: boolean;
+        color: string;
+        position: LabelPosition;
+      }) => React.ReactNode);
 
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
@@ -183,7 +187,8 @@ export type BottomTabBarOptions = {
   tabStyle?: StyleProp<ViewStyle>;
   /**
    * Whether the label is rendered below the icon or beside the icon.
-   * By default, in `vertical` orientation, label is rendered below and in `horizontal` orientation, it's rendered beside.
+   * By default, the position is chosen automatically based on device width.
+   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
    */
   labelPosition?: LabelPosition;
   /**

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

@@ -30,16 +30,33 @@ export default function Badge({
   ...rest
 }: Props) {
   const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
+  const [rendered, setRendered] = React.useState(visible ? true : false);
 
   const theme = useTheme();
 
   React.useEffect(() => {
+    if (!rendered) {
+      return;
+    }
+
     Animated.timing(opacity, {
       toValue: visible ? 1 : 0,
       duration: 150,
       useNativeDriver: true,
-    }).start();
-  }, [opacity, visible]);
+    }).start(({ finished }) => {
+      if (finished && !visible) {
+        setRendered(false);
+      }
+    });
+  }, [opacity, rendered, visible]);
+
+  if (visible && !rendered) {
+    setRendered(true);
+  }
+
+  if (!visible && !rendered) {
+    return null;
+  }
 
   // @ts-expect-error: backgroundColor definitely exists
   const { backgroundColor = theme.colors.notification, ...restStyle } =
@@ -55,6 +72,14 @@ export default function Badge({
       style={[
         {
           opacity,
+          transform: [
+            {
+              scale: opacity.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              }),
+            },
+          ],
           backgroundColor,
           color: textColor,
           fontSize,

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

@@ -14,7 +14,7 @@ import { Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
-import type { BottomTabBarButtonProps } from '../types';
+import type { BottomTabBarButtonProps, LabelPosition } from '../types';
 
 type Props = {
   /**
@@ -30,7 +30,11 @@ type Props = {
    */
   label:
     | string
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+    | ((props: {
+        focused: boolean;
+        color: string;
+        position: LabelPosition;
+      }) => React.ReactNode);
   /**
    * Icon to display for the tab.
    */
@@ -211,7 +215,11 @@ export default function BottomTabBarItem({
       );
     }
 
-    return label({ focused, color });
+    return label({
+      focused,
+      color,
+      position: horizontal ? 'beside-icon' : 'below-icon',
+    });
   };
 
   const renderIcon = ({ focused }: { focused: boolean }) => {
@@ -250,6 +258,7 @@ export default function BottomTabBarItem({
     testID,
     accessibilityLabel,
     accessibilityRole: 'button',
+    accessibilityState: { selected: focused },
     accessibilityStates: focused ? ['selected'] : [],
     style: [
       styles.tab,

packages/compat/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.3...@react-navigation/compat@5.2.4) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.2.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.1...@react-navigation/compat@5.2.3) (2020-07-22)
+
+
+### Bug Fixes
+
+* fix false warning due to change in Object.assign in metro preset ([5e358b3](https://github.com/react-navigation/react-navigation/commit/5e358b3aadac7bb186521872d515fff2e571a940)), closes [#8584](https://github.com/react-navigation/react-navigation/issues/8584)
+
+
+
+
+
+## [5.2.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.1...@react-navigation/compat@5.2.2) (2020-07-22)
+
+
+### Bug Fixes
+
+* fix false warning due to change in Object.assign in metro preset ([240a706](https://github.com/react-navigation/react-navigation/commit/240a706a56220b63d603a52407a738c2872349dd)), closes [#8584](https://github.com/react-navigation/react-navigation/issues/8584)
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.0...@react-navigation/compat@5.2.1) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.2.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.28...@react-navigation/compat@5.2.0) (2020-07-10)
 
 

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.2.0",
+  "version": "5.2.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/react": "^16.9.36",
     "react": "~16.9.0",
     "typescript": "^3.9.5"

packages/compat/src/createCompatNavigationProp.tsx

@@ -143,9 +143,12 @@ export default function createCompatNavigationProp<
       }
     },
     state: {
-      ...state,
+      // @ts-expect-error: these properties may actually exist
+      key: state.key,
       // @ts-expect-error
       routeName: state.name,
+      // @ts-expect-error
+      params: state.params ?? {},
       get index() {
         // @ts-expect-error
         if (state.index !== undefined) {
@@ -154,11 +157,11 @@ export default function createCompatNavigationProp<
         }
 
         console.warn(
-          "Accessing child navigation state for a route is not safe and won't work correctly."
+          "Looks like you are using 'navigation.state.index' in your code. Accessing child navigation state for a route is not safe and won't work correctly. You should refactor it not to access the 'index' property in the child navigation state."
         );
 
         // @ts-expect-error
-        return state.state ? state.state.index : undefined;
+        return state.state?.index;
       },
       get routes() {
         // @ts-expect-error
@@ -168,11 +171,11 @@ export default function createCompatNavigationProp<
         }
 
         console.warn(
-          "Accessing child navigation state for a route is not safe and won't work correctly."
+          "Looks like you are using 'navigation.state.routes' in your code. Accessing child navigation state for a route is not safe and won't work correctly. You should refactor it not to access the 'routes' property in the child navigation state."
         );
 
         // @ts-expect-error
-        return state.state ? state.state.routes : undefined;
+        return state.state?.routes;
       },
     },
     getParam<T extends keyof ParamList>(

packages/core/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.
 
+## [5.12.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.1...@react-navigation/core@5.12.2) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+## [5.12.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.0...@react-navigation/core@5.12.1) (2020-07-19)
+
+
+### Bug Fixes
+
+* make sure new state events are emitted when new navigators mount ([af8b274](https://github.com/react-navigation/react-navigation/commit/af8b27414c8628570d946003f4fdff3341cb8954))
+
+
+
+
+
 # [5.12.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.11.1...@react-navigation/core@5.12.0) (2020-07-10)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.12.0",
+  "version": "5.12.2",
   "keywords": [
     "react",
     "react-native",
@@ -35,7 +35,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.4.9",
+    "@react-navigation/routers": "^5.4.10",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.9",
     "query-string": "^6.13.1",

packages/core/src/BaseNavigationContainer.tsx

@@ -247,6 +247,10 @@ const BaseNavigationContainer = React.forwardRef(
       [scheduleUpdate, flushUpdates]
     );
 
+    const isInitialRef = React.useRef(true);
+
+    const getIsInitial = React.useCallback(() => isInitialRef.current, []);
+
     const context = React.useMemo(
       () => ({
         state,
@@ -254,14 +258,24 @@ const BaseNavigationContainer = React.forwardRef(
         setState,
         getKey,
         setKey,
+        getIsInitial,
         addOptionsGetter,
       }),
-      [getKey, getState, setKey, setState, state, addOptionsGetter]
+      [
+        state,
+        getState,
+        setState,
+        getKey,
+        setKey,
+        getIsInitial,
+        addOptionsGetter,
+      ]
     );
 
     const onStateChangeRef = React.useRef(onStateChange);
 
     React.useEffect(() => {
+      isInitialRef.current = false;
       onStateChangeRef.current = onStateChange;
     });
 

packages/core/src/NavigationStateContext.tsx

@@ -13,6 +13,7 @@ export default React.createContext<{
   setState: (
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
+  getIsInitial: () => boolean;
   addOptionsGetter?: (
     key: string,
     getter: () => object | undefined | null
@@ -32,4 +33,7 @@ export default React.createContext<{
   get setState(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },
+  get getIsInitial(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
 });

packages/core/src/SceneView.tsx

@@ -76,6 +76,14 @@ export default function SceneView<
     [getState, route.key, setState]
   );
 
+  const isInitialRef = React.useRef(true);
+
+  React.useEffect(() => {
+    isInitialRef.current = false;
+  });
+
+  const getIsInitial = React.useCallback(() => isInitialRef.current, []);
+
   const context = React.useMemo(
     () => ({
       state: route.state,
@@ -83,14 +91,16 @@ export default function SceneView<
       setState: setCurrentState,
       getKey,
       setKey,
+      getIsInitial,
       addOptionsGetter,
     }),
     [
-      getCurrentState,
-      getKey,
       route.state,
+      getCurrentState,
       setCurrentState,
+      getKey,
       setKey,
+      getIsInitial,
       addOptionsGetter,
     ]
   );

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

@@ -366,6 +366,7 @@ it('handles getRootState', () => {
     type: 'test',
   });
 });
+
 it('emits state events when the state changes', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -401,6 +402,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('bar');
   });
 
+  expect(listener).toBeCalledTimes(1);
   expect(listener.mock.calls[0][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -418,6 +420,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('baz', { answer: 42 });
   });
 
+  expect(listener).toBeCalledTimes(2);
   expect(listener.mock.calls[1][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -432,6 +435,97 @@ it('emits state events when the state changes', () => {
   });
 });
 
+it('emits state events when new navigator mounts', () => {
+  jest.useFakeTimers();
+
+  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 NestedNavigator = () => {
+    const [isRendered, setIsRendered] = React.useState(false);
+
+    React.useEffect(() => {
+      setTimeout(() => setIsRendered(true), 100);
+    }, []);
+
+    if (!isRendered) {
+      return null;
+    }
+
+    return (
+      <TestNavigator>
+        <Screen name="baz">{() => null}</Screen>
+        <Screen name="bax">{() => null}</Screen>
+      </TestNavigator>
+    );
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={NestedNavigator} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element).update(element);
+
+  const listener = jest.fn();
+
+  ref.current?.addListener('state', listener);
+
+  expect(listener).not.toHaveBeenCalled();
+  expect(onStateChange).not.toHaveBeenCalled();
+
+  act(() => {
+    jest.runAllTimers();
+  });
+
+  const resultState = {
+    stale: false,
+    type: 'test',
+    index: 0,
+    key: '10',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      {
+        key: 'bar',
+        name: 'bar',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '11',
+          routeNames: ['baz', 'bax'],
+          routes: [
+            { key: 'baz', name: 'baz' },
+            { key: 'bax', name: 'bax' },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.state).toEqual(resultState);
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).lastCalledWith(resultState);
+});
+
 it('emits option events when options change with tab router', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(TabRouter, props);

packages/core/src/useNavigationBuilder.tsx

@@ -279,6 +279,7 @@ export default function useNavigationBuilder<
     setState,
     setKey,
     getKey,
+    getIsInitial,
   } = React.useContext(NavigationStateContext);
 
   const [initializedState, isFirstStateInitialization] = React.useMemo(() => {
@@ -372,6 +373,13 @@ export default function useNavigationBuilder<
   React.useEffect(() => {
     setKey(navigatorKey);
 
+    if (!getIsInitial()) {
+      // If it's not initial render, we need to update the state
+      // This will make sure that our container gets notifier of state changes due to new mounts
+      // This is necessary for proper screen tracking, URL updates etc.
+      setState(nextState);
+    }
+
     return () => {
       // We need to clean up state for this navigator on unmount
       // We do it in a timeout because we need to detect if another navigator mounted in the meantime

packages/devtools/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.3...@react-navigation/devtools@5.1.4) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.2...@react-navigation/devtools@5.1.3) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
 ## [5.1.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.1...@react-navigation/devtools@5.1.2) (2020-07-10)
 
 **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.2",
+  "version": "5.1.4",
   "keywords": [
     "react",
     "react-native",
@@ -36,7 +36,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.12.0",
+    "@react-navigation/core": "^5.12.2",
     "deep-equal": "^2.0.3"
   },
   "devDependencies": {

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.
 
+## [5.8.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.8.6...@react-navigation/drawer@5.8.7) (2020-07-28)
+
+
+### Bug Fixes
+
+* add accessibilityState property ([#8548](https://github.com/react-navigation/react-navigation/issues/8548)) ([ce4eb7e](https://github.com/react-navigation/react-navigation/commit/ce4eb7e9273a25e4433eb82e255a58ba3bf4d632))
+
+
+
+
+
+## [5.8.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.8.5...@react-navigation/drawer@5.8.6) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 ## [5.8.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.8.4...@react-navigation/drawer@5.8.5) (2020-07-10)
 
 **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.8.5",
+  "version": "5.8.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/react": "^16.9.36",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.1",

packages/drawer/src/views/DrawerItem.tsx

@@ -156,6 +156,7 @@ export default function DrawerItem(props: Props) {
         accessibilityTraits={focused ? ['button', 'selected'] : 'button'}
         accessibilityComponentType="button"
         accessibilityRole="button"
+        accessibilityState={{ selected: focused }}
         accessibilityStates={focused ? ['selected'] : []}
         to={to}
       >

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.14...@react-navigation/material-bottom-tabs@5.2.15) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.13...@react-navigation/material-bottom-tabs@5.2.14) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.2.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.12...@react-navigation/material-bottom-tabs@5.2.13) (2020-07-10)
 
 **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.2.13",
+  "version": "5.2.15",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/react": "^16.9.36",
     "@types/react-native": "^0.62.7",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.14...@react-navigation/material-top-tabs@5.2.15) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.13...@react-navigation/material-top-tabs@5.2.14) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.2.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.12...@react-navigation/material-top-tabs@5.2.13) (2020-07-10)
 
 **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.2.13",
+  "version": "5.2.15",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/react": "^16.9.36",
     "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.1",

packages/native/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.7.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.1...@react-navigation/native@5.7.2) (2020-07-28)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.0...@react-navigation/native@5.7.1) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.6.1...@react-navigation/native@5.7.0) (2020-07-10)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.7.0",
+  "version": "5.7.2",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.12.0",
+    "@react-navigation/core": "^5.12.2",
     "nanoid": "^3.1.9"
   },
   "devDependencies": {

packages/routers/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.
 
+## [5.4.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.4.9...@react-navigation/routers@5.4.10) (2020-07-28)
+
+
+### Bug Fixes
+
+* make sure history is correct after rehydration ([b70e3fe](https://github.com/react-navigation/react-navigation/commit/b70e3fe61852502322b2cb46c5934800462b0267))
+* make sure index is correct when rehydrating state for tabs ([#8638](https://github.com/react-navigation/react-navigation/issues/8638)) ([1aa8219](https://github.com/react-navigation/react-navigation/commit/1aa8219021f6c231a3e150fc9bea73f12542f85c))
+
+
+
+
+
 ## [5.4.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.4.8...@react-navigation/routers@5.4.9) (2020-07-10)
 
 

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "5.4.9",
+  "version": "5.4.10",
   "keywords": [
     "react",
     "react-native",

packages/routers/src/TabRouter.tsx

@@ -196,37 +196,28 @@ export default function TabRouter({
       });
 
       const index = Math.min(
-        Math.max(
-          typeof state.index === 'number'
-            ? state.index
-            : routeNames.indexOf(state.routes[0].name),
-          0
-        ),
+        Math.max(routeNames.indexOf(state.routes[state?.index ?? 0]?.name), 0),
         routes.length - 1
       );
 
-      let history = state.history?.filter((it) =>
-        routes.find((r) => r.key === it.key)
-      );
+      const history =
+        state.history?.filter((it) => routes.find((r) => r.key === it.key)) ??
+        [];
 
-      if (!history?.length) {
-        history = getRouteHistory(
-          routes,
+      return changeIndex(
+        {
+          stale: false,
+          type: 'tab',
+          key: `tab-${nanoid()}`,
           index,
-          backBehavior,
-          initialRouteName
-        );
-      }
-
-      return {
-        stale: false,
-        type: 'tab',
-        key: `tab-${nanoid()}`,
+          routeNames,
+          history,
+          routes,
+        },
         index,
-        routeNames,
-        history,
-        routes,
-      };
+        backBehavior,
+        initialRouteName
+      );
     },
 
     getStateForRouteNamesChange(state, { routeNames, routeParamList }) {

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

@@ -150,7 +150,7 @@ it('gets rehydrated state from partial state', () => {
       options
     )
   ).toEqual({
-    index: 2,
+    index: 0,
     key: 'drawer-test',
     routeNames: ['bar', 'baz', 'qux'],
     routes: [
@@ -158,7 +158,7 @@ it('gets rehydrated state from partial state', () => {
       { key: 'baz-test', name: 'baz', params: { answer: 42 } },
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
-    history: [{ type: 'route', key: 'qux-test' }],
+    history: [{ type: 'route', key: 'bar-test' }],
     stale: false,
     type: 'drawer',
   });
@@ -178,7 +178,7 @@ it('gets rehydrated state from partial state', () => {
       options
     )
   ).toEqual({
-    index: 1,
+    index: 0,
     key: 'drawer-test',
     routeNames: ['bar', 'baz', 'qux'],
     routes: [
@@ -187,8 +187,8 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     history: [
-      { type: 'route', key: 'bar-test' },
       { type: 'route', key: 'qux-test' },
+      { type: 'route', key: 'bar-test' },
       { type: 'drawer' },
     ],
     stale: false,

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

@@ -139,8 +139,11 @@ it('gets rehydrated state from partial state', () => {
   expect(
     router.getRehydratedState(
       {
-        index: 4,
-        routes: [],
+        index: 1,
+        routes: [
+          { key: 'bar-0', name: 'bar' },
+          { key: 'qux-2', name: 'qux' },
+        ],
       },
       options
     )
@@ -148,12 +151,34 @@ it('gets rehydrated state from partial state', () => {
     index: 2,
     key: 'tab-test',
     routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-2', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ type: 'route', key: 'qux-2' }],
+    stale: false,
+    type: 'tab',
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 4,
+        routes: [],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'tab-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: 'qux-test' }],
+    history: [{ type: 'route', key: 'bar-test' }],
     stale: false,
     type: 'tab',
   });
@@ -172,7 +197,7 @@ it('gets rehydrated state from partial state', () => {
       options
     )
   ).toEqual({
-    index: 1,
+    index: 0,
     key: 'tab-test',
     routeNames: ['bar', 'baz', 'qux'],
     routes: [
@@ -181,8 +206,8 @@ it('gets rehydrated state from partial state', () => {
       { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
     ],
     history: [
-      { type: 'route', key: 'bar-test' },
       { type: 'route', key: 'qux-test' },
+      { type: 'route', key: 'bar-test' },
     ],
     stale: false,
     type: 'tab',

packages/stack/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.8.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.7.1...@react-navigation/stack@5.8.0) (2020-07-28)
+
+
+### Features
+
+* allow style overrides for HeaderBackButton ([#8626](https://github.com/react-navigation/react-navigation/issues/8626)) ([486c3de](https://github.com/react-navigation/react-navigation/commit/486c3defd27592bf4170af4962a1c66f4710b17a))
+* emit gesture navigation events from stack view ([#8524](https://github.com/react-navigation/react-navigation/issues/8524)) ([15f9b95](https://github.com/react-navigation/react-navigation/commit/15f9b9573e52666f88b0f917396496b03218f160))
+
+
+
+
+
+## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.7.0...@react-navigation/stack@5.7.1) (2020-07-19)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 # [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.6.2...@react-navigation/stack@5.7.0) (2020-07-10)
 
 

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.7.0",
+  "version": "5.8.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.15.1",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.7.0",
+    "@react-navigation/native": "^5.7.2",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.36",
     "@types/react-native": "^0.62.7",

packages/stack/src/types.tsx

@@ -27,6 +27,18 @@ export type StackNavigationEventMap = {
    * Event which fires when a transition animation ends.
    */
   transitionEnd: { data: { closing: boolean } };
+  /**
+   * Event which fires when navigation gesture starts.
+   */
+  gestureStart: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is completed.
+   */
+  gestureEnd: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is canceled.
+   */
+  gestureCancel: { data: undefined };
 };
 
 export type StackNavigationHelpers = NavigationHelpers<
@@ -406,6 +418,10 @@ export type StackHeaderLeftButtonProps = {
    * Accessibility label for the button for screen readers.
    */
   accessibilityLabel?: string;
+  /**
+   * Style object for the button.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export type StackHeaderTitleProps = {

packages/stack/src/views/Header/HeaderBackButton.tsx

@@ -30,6 +30,7 @@ export default function HeaderBackButton({
   titleLayout,
   truncatedLabel = 'Back',
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  style,
 }: Props) {
   const { dark, colors } = useTheme();
 
@@ -160,7 +161,7 @@ export default function HeaderBackButton({
       delayPressIn={0}
       onPress={disabled ? undefined : handlePress}
       pressColor={pressColorAndroid}
-      style={[styles.container, disabled && styles.disabled]}
+      style={[styles.container, disabled && styles.disabled, style]}
       hitSlop={Platform.select({
         ios: undefined,
         default: { top: 16, right: 16, bottom: 16, left: 16 },

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

@@ -46,6 +46,9 @@ type Props = TransitionPreset & {
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;
+  onGestureStart?: (props: { route: Route<string> }) => void;
+  onGestureEnd?: (props: { route: Route<string> }) => void;
+  onGestureCancel?: (props: { route: Route<string> }) => void;
   gestureEnabled?: boolean;
   gestureResponseDistance?: {
     vertical?: number;
@@ -95,6 +98,9 @@ function CardContainer({
   onPageChangeCancel,
   onPageChangeConfirm,
   onPageChangeStart,
+  onGestureCancel,
+  onGestureEnd,
+  onGestureStart,
   onTransitionEnd,
   onTransitionStart,
   renderHeader,
@@ -120,6 +126,20 @@ function CardContainer({
     onCloseRoute({ route: scene.route });
   };
 
+  const handleGestureBegin = () => {
+    onPageChangeStart?.();
+    onGestureStart?.({ route: scene.route });
+  };
+
+  const handleGestureCanceled = () => {
+    onPageChangeCancel?.();
+    onGestureCancel?.({ route: scene.route });
+  };
+
+  const handleGestureEnd = () => {
+    onGestureEnd?.({ route: scene.route });
+  };
+
   const handleTransitionStart = ({ closing }: { closing: boolean }) => {
     if (active && closing) {
       onPageChangeConfirm?.();
@@ -179,8 +199,9 @@ function CardContainer({
       overlayEnabled={cardOverlayEnabled}
       shadowEnabled={cardShadowEnabled}
       onTransitionStart={handleTransitionStart}
-      onGestureBegin={onPageChangeStart}
-      onGestureCanceled={onPageChangeCancel}
+      onGestureBegin={handleGestureBegin}
+      onGestureCanceled={handleGestureCanceled}
+      onGestureEnd={handleGestureEnd}
       gestureEnabled={gestureEnabled}
       gestureResponseDistance={gestureResponseDistance}
       gestureVelocityImpact={gestureVelocityImpact}

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

@@ -60,6 +60,9 @@ type Props = {
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;
+  onGestureStart?: (props: { route: Route<string> }) => void;
+  onGestureEnd?: (props: { route: Route<string> }) => void;
+  onGestureCancel?: (props: { route: Route<string> }) => void;
 };
 
 type State = {
@@ -372,6 +375,9 @@ export default class CardStack extends React.Component<Props, State> {
       onPageChangeStart,
       onPageChangeConfirm,
       onPageChangeCancel,
+      onGestureStart,
+      onGestureEnd,
+      onGestureCancel,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;
@@ -568,6 +574,9 @@ export default class CardStack extends React.Component<Props, State> {
                         onPageChangeStart={onPageChangeStart}
                         onPageChangeConfirm={onPageChangeConfirm}
                         onPageChangeCancel={onPageChangeCancel}
+                        onGestureStart={onGestureStart}
+                        onGestureCancel={onGestureCancel}
+                        onGestureEnd={onGestureEnd}
                         gestureResponseDistance={gestureResponseDistance}
                         headerHeight={headerHeight}
                         onHeaderHeightChange={this.handleHeaderLayout}

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

@@ -405,6 +405,27 @@ export default class StackView extends React.Component<Props, State> {
       target: route.key,
     });
 
+  private handleGestureStart = ({ route }: { route: Route<string> }) => {
+    this.props.navigation.emit({
+      type: 'gestureStart',
+      target: route.key,
+    });
+  };
+
+  private handleGestureEnd = ({ route }: { route: Route<string> }) => {
+    this.props.navigation.emit({
+      type: 'gestureEnd',
+      target: route.key,
+    });
+  };
+
+  private handleGestureCancel = ({ route }: { route: Route<string> }) => {
+    this.props.navigation.emit({
+      type: 'gestureCancel',
+      target: route.key,
+    });
+  };
+
   render() {
     const {
       state,
@@ -451,6 +472,9 @@ export default class StackView extends React.Component<Props, State> {
                       headerMode={headerMode}
                       state={state}
                       descriptors={descriptors}
+                      onGestureStart={this.handleGestureStart}
+                      onGestureEnd={this.handleGestureEnd}
+                      onGestureCancel={this.handleGestureCancel}
                       {...rest}
                       {...props}
                     />