chore: publish

- @react-navigation/bottom-tabs@6.0.0-next.13
 - @react-navigation/devtools@6.0.0-next.10
 - @react-navigation/drawer@6.0.0-next.12
 - @react-navigation/elements@1.0.0-next.12
 - @react-navigation/native-stack@6.0.0-next.2
 - @react-navigation/stack@6.0.0-next.20

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,14 @@
 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/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.13",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.12",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },

packages/devtools/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/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.10",
   "keywords": [
     "react",
     "react-native",
@@ -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,14 @@
 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.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.12",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.12",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },

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,14 @@
 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.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.12",
   "keywords": [
     "react-native",
     "react-navigation",

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/native-stack/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.
 
+# [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.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,7 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.12",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {

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.
    *

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/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.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.20",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.11",
+    "@react-navigation/elements": "^1.0.0-next.12",
     "color": "^3.1.3",
     "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.1.0"

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;