@react-navigation/stack 6.0.11 → 6.2.0

package/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.11",
+  "version": "6.2.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,23 +40,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.2.1",
+    "@react-navigation/elements": "^1.3.2",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native": "^6.0.9",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",
     "del-cli": "^3.0.1",
-    "react": "~16.13.1",
-    "react-native": "~0.63.4",
+    "react": "17.0.1",
+    "react-native": "~0.64.3",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.8.0",
+    "react-native-gesture-handler": "~2.2.0",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
     "typescript": "^4.3.2"
   },
   "peerDependencies": {
@@ -81,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "e77a5ab9d342a03cd8e20b54938700dfd4e23f42"
+  "gitHead": "c5ef6b5e88426e658123ea8590da583314b9001e"
 }

package/src/index.tsx

@@ -43,6 +43,7 @@ export type {
   StackHeaderInterpolationProps,
   StackHeaderProps,
   StackHeaderStyleInterpolator,
+  StackNavigationEventMap,
   StackNavigationOptions,
   StackNavigationProp,
   StackScreenProps,

package/src/navigators/createStackNavigator.tsx

@@ -31,6 +31,7 @@ type Props = DefaultNavigatorOptions<
   StackNavigationConfig;
 
 function StackNavigator({
+  id,
   initialRouteName,
   children,
   screenListeners,
@@ -81,6 +82,7 @@ function StackNavigator({
       StackNavigationOptions,
       StackNavigationEventMap
     >(StackRouter, {
+      id,
       initialRouteName,
       children,
       screenListeners,
@@ -90,6 +92,7 @@ function StackNavigator({
 
   React.useEffect(
     () =>
+      // @ts-expect-error: there may not be a tab navigator in parent
       navigation.addListener?.('tabPress', (e) => {
         const isFocused = navigation.isFocused();
 
@@ -99,7 +102,7 @@ function StackNavigator({
           if (
             state.index > 0 &&
             isFocused &&
-            !(e as EventArg<'tabPress', true>).defaultPrevented
+            !(e as unknown as EventArg<'tabPress', true>).defaultPrevented
           ) {
             // When user taps on already focused tab and we're inside the tab,
             // reset the stack to replicate native behaviour

package/src/types.tsx

@@ -1,6 +1,7 @@
 import type {
   HeaderBackButton,
   HeaderBackButtonProps,
+  HeaderButtonProps,
   HeaderOptions,
   HeaderTitleProps,
 } from '@react-navigation/elements';
@@ -48,10 +49,12 @@ export type StackNavigationHelpers = NavigationHelpers<
 
 export type StackNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
 > = NavigationProp<
   ParamList,
   RouteName,
+  NavigatorID,
   StackNavigationState<ParamList>,
   StackNavigationOptions,
   StackNavigationEventMap
@@ -60,9 +63,10 @@ export type StackNavigationProp<
 
 export type StackScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
 > = {
-  navigation: StackNavigationProp<ParamList, RouteName>;
+  navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;
 };
 
@@ -122,7 +126,7 @@ export type StackPresentationMode = 'card' | 'modal';
 
 export type StackHeaderOptions = Omit<
   HeaderOptions,
-  'headerLeft' | 'headerTitle'
+  'headerLeft' | 'headerTitle' | 'headerRight'
 > & {
   /**
    * String or a function that returns a React Element to be used by the header.
@@ -136,6 +140,10 @@ export type StackHeaderOptions = Omit<
    * Function which returns a React Element to display on the left side of the header.
    */
   headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: HeaderButtonProps) => React.ReactNode;
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */

package/src/views/Header/HeaderSegment.tsx

@@ -33,11 +33,13 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
 };
 
 export default function HeaderSegment(props: Props) {
-  const [leftLabelLayout, setLeftLabelLayout] =
-    React.useState<Layout | undefined>(undefined);
+  const [leftLabelLayout, setLeftLabelLayout] = React.useState<
+    Layout | undefined
+  >(undefined);
 
-  const [titleLayout, setTitleLayout] =
-    React.useState<Layout | undefined>(undefined);
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
 
   const handleTitleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
@@ -103,6 +105,7 @@ export default function HeaderSegment(props: Props) {
     headerLeft: left = onGoBack
       ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
       : undefined,
+    headerRight: right,
     headerBackImage,
     headerBackTitle,
     headerBackTitleVisible = Platform.OS === 'ios',
@@ -166,6 +169,14 @@ export default function HeaderSegment(props: Props) {
         })
     : undefined;
 
+  const headerRight: StackHeaderOptions['headerRight'] = right
+    ? (props) =>
+        right({
+          ...props,
+          canGoBack: Boolean(onGoBack),
+        })
+    : undefined;
+
   const headerTitle: StackHeaderOptions['headerTitle'] =
     typeof title !== 'function'
       ? (props) => <HeaderTitle {...props} onLayout={handleTitleLayout} />
@@ -178,6 +189,7 @@ export default function HeaderSegment(props: Props) {
       headerTitle={headerTitle}
       headerLeft={headerLeft}
       headerLeftLabelVisible={headerBackTitleVisible}
+      headerRight={headerRight}
       headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
       headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
       headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}

package/src/views/Stack/Card.tsx

@@ -272,7 +272,7 @@ export default class Card extends React.Component<Props> {
     } = this.props;
 
     switch (nativeEvent.state) {
-      case GestureState.BEGAN:
+      case GestureState.ACTIVE:
         this.isSwiping.setValue(TRUE);
         this.handleStartInteraction();
         onGestureBegin?.();

package/src/views/Stack/CardContainer.tsx

@@ -165,8 +165,9 @@ function CardContainer({
 
   const { colors } = useTheme();
 
-  const [pointerEvents, setPointerEvents] =
-    React.useState<'box-none' | 'none'>('box-none');
+  const [pointerEvents, setPointerEvents] = React.useState<'box-none' | 'none'>(
+    'box-none'
+  );
 
   React.useEffect(() => {
     const listener = scene.progress.next?.addListener?.(

package/src/views/Stack/CardStack.tsx

@@ -142,7 +142,7 @@ const getHeaderHeights = (
     const style = StyleSheet.flatten(headerStyle || {});
 
     const height =
-      typeof style.height === 'number'
+      'height' in style && typeof style.height === 'number'
         ? style.height
         : previous[curr.route.key];
 
@@ -530,7 +530,12 @@ export default class CardStack extends React.Component<Props, State> {
       if (detachPreviousScreen === false) {
         activeScreensLimit++;
       } else {
-        break;
+        // Check at least last 2 screens before stopping
+        // This will make sure that screen isn't detached when another screen is animating on top of the transparent one
+        // For example, (Opaque -> Transparent -> Opaque)
+        if (i <= scenes.length - 2) {
+          break;
+        }
       }
     }
 
@@ -609,16 +614,23 @@ export default class CardStack extends React.Component<Props, State> {
             const headerHeight =
               headerShown !== false ? headerHeights[route.key] : 0;
 
-            const { backgroundColor: headerBackgroundColor } =
-              StyleSheet.flatten(headerStyle) || {};
-
             let headerDarkContent: boolean | undefined;
 
             if (headerShown) {
               if (typeof headerTintColor === 'string') {
                 headerDarkContent = Color(headerTintColor).isDark();
-              } else if (typeof headerBackgroundColor === 'string') {
-                headerDarkContent = !Color(headerBackgroundColor).isDark();
+              } else {
+                const flattenedHeaderStyle = StyleSheet.flatten(headerStyle);
+
+                if (
+                  flattenedHeaderStyle &&
+                  'backgroundColor' in flattenedHeaderStyle &&
+                  typeof flattenedHeaderStyle.backgroundColor === 'string'
+                ) {
+                  headerDarkContent = !Color(
+                    flattenedHeaderStyle.backgroundColor
+                  ).isDark();
+                }
               }
             }