@react-navigation/stack 7.0.0-alpha.2 → 7.0.0-alpha.4

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,11 +1,11 @@
-import { Animated, I18nManager } from 'react-native';
+import { Animated } from 'react-native';
 
 import type {
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
 } from '../types';
 
-const { add } = Animated;
+const { add, multiply } = Animated;
 
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
@@ -13,6 +13,7 @@ const { add } = Animated;
 export function forUIKit({
   current,
   next,
+  direction,
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const defaultOffset = 100;
@@ -34,6 +35,8 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
+  const multiplier = direction === 'rtl' ? -1 : 1;
+
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -59,12 +62,13 @@ export function forUIKit({
     leftLabelStyle: {
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-rightOffset, 0, leftLabelOffset]
-              : [leftLabelOffset, 0, -rightOffset],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0, 1, 2],
+              outputRange: [leftLabelOffset, 0, -rightOffset],
+            })
+          ),
         },
       ],
     },
@@ -81,24 +85,26 @@ export function forUIKit({
       }),
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0.5, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-titleLeftOffset, 0, rightOffset]
-              : [rightOffset, 0, -titleLeftOffset],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0.5, 1, 2],
+              outputRange: [rightOffset, 0, -titleLeftOffset],
+            })
+          ),
         },
       ],
     },
     backgroundStyle: {
       transform: [
         {
-          translateX: progress.interpolate({
-            inputRange: [0, 1, 2],
-            outputRange: I18nManager.getConstants().isRTL
-              ? [-layouts.screen.width, 0, layouts.screen.width]
-              : [layouts.screen.width, 0, -layouts.screen.width],
-          }),
+          translateX: multiply(
+            multiplier,
+            progress.interpolate({
+              inputRange: [0, 1, 2],
+              outputRange: [layouts.screen.width, 0, -layouts.screen.width],
+            })
+          ),
         },
       ],
     },
@@ -151,8 +157,10 @@ export function forFade({
 export function forSlideLeft({
   current,
   next,
+  direction,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
+  const isRTL = direction === 'rtl';
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -170,7 +178,7 @@ export function forSlideLeft({
 
   const translateX = progress.interpolate({
     inputRange: [0, 1, 2],
-    outputRange: I18nManager.getConstants().isRTL
+    outputRange: isRTL
       ? [-screen.width, 0, screen.width]
       : [screen.width, 0, -screen.width],
   });
@@ -191,8 +199,10 @@ export function forSlideLeft({
 export function forSlideRight({
   current,
   next,
+  direction,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
+  const isRTL = direction === 'rtl';
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -210,7 +220,7 @@ export function forSlideRight({
 
   const translateX = progress.interpolate({
     inputRange: [0, 1, 2],
-    outputRange: I18nManager.getConstants().isRTL
+    outputRange: isRTL
       ? [screen.width, 0, -screen.width]
       : [-screen.width, 0, screen.width],
   });

package/src/navigators/createStackNavigator.tsx

@@ -8,6 +8,7 @@ import {
   StackNavigationState,
   StackRouter,
   StackRouterOptions,
+  useLocale,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -36,6 +37,7 @@ function StackNavigator({
   screenOptions,
   ...rest
 }: Props) {
+  const { direction } = useLocale();
   const { state, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
@@ -81,6 +83,7 @@ function StackNavigator({
     <NavigationContent>
       <StackView
         {...rest}
+        direction={direction}
         state={state}
         descriptors={descriptors}
         navigation={navigation}

package/src/types.tsx

@@ -7,6 +7,7 @@ import type {
 } from '@react-navigation/elements';
 import type {
   Descriptor,
+  LocaleDirection,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
@@ -429,19 +430,19 @@ export type StackCardInterpolatedStyle = {
   /**
    * Interpolated style for the container view wrapping the card.
    */
-  containerStyle?: any;
+  containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the card.
    */
-  cardStyle?: any;
+  cardStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the semi-transparent overlay below the card.
    */
-  overlayStyle?: any;
+  overlayStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style representing the card shadow.
    */
-  shadowStyle?: any;
+  shadowStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export type StackCardStyleInterpolator = (
@@ -468,6 +469,10 @@ export type StackHeaderInterpolationProps = {
      */
     progress: Animated.AnimatedInterpolation<number>;
   };
+  /**
+   * Writing direction of the layout.
+   */
+  direction: LocaleDirection;
   /**
    * Layout measurements for various items we use for animation.
    */

package/src/utils/getDistanceForDirection.tsx

@@ -3,9 +3,10 @@ import { getInvertedMultiplier } from './getInvertedMultiplier';
 
 export function getDistanceForDirection(
   layout: Layout,
-  gestureDirection: GestureDirection
+  gestureDirection: GestureDirection,
+  isRTL: boolean
 ): number {
-  const multiplier = getInvertedMultiplier(gestureDirection);
+  const multiplier = getInvertedMultiplier(gestureDirection, isRTL);
 
   switch (gestureDirection) {
     case 'vertical':

package/src/utils/getInvertedMultiplier.tsx

@@ -1,9 +1,8 @@
-import { I18nManager } from 'react-native';
-
 import type { GestureDirection } from '../types';
 
 export function getInvertedMultiplier(
-  gestureDirection: GestureDirection
+  gestureDirection: GestureDirection,
+  isRTL: boolean
 ): 1 | -1 {
   switch (gestureDirection) {
     case 'vertical':
@@ -11,8 +10,8 @@ export function getInvertedMultiplier(
     case 'vertical-inverted':
       return -1;
     case 'horizontal':
-      return I18nManager.getConstants().isRTL ? -1 : 1;
+      return isRTL ? -1 : 1;
     case 'horizontal-inverted':
-      return I18nManager.getConstants().isRTL ? 1 : -1;
+      return isRTL ? 1 : -1;
   }
 }

package/src/views/Header/HeaderSegment.tsx

@@ -5,6 +5,7 @@ import {
   HeaderBackButtonProps,
   HeaderTitle,
 } from '@react-navigation/elements';
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -33,6 +34,8 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
 };
 
 export function HeaderSegment(props: Props) {
+  const { direction } = useLocale();
+
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
   >(undefined);
@@ -84,6 +87,7 @@ export function HeaderSegment(props: Props) {
       styleInterpolator({
         current: { progress: current },
         next: next && { progress: next },
+        direction,
         layouts: {
           header: {
             height: headerHeight,

package/src/views/Stack/Card.tsx

@@ -1,3 +1,4 @@
+import type { LocaleDirection } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import {
@@ -40,6 +41,7 @@ type Props = ViewProps & {
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
+  direction: LocaleDirection;
   headerDarkContent: boolean | undefined;
   pageOverflowEnabled: boolean;
   gestureDirection: GestureDirection;
@@ -110,7 +112,7 @@ export class Card extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, gestureDirection, closing } = this.props;
+    const { direction, layout, gestureDirection, closing } = this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -122,7 +124,9 @@ export class Card extends React.Component<Props> {
     }
 
     if (gestureDirection !== prevProps.gestureDirection) {
-      this.inverted.setValue(getInvertedMultiplier(gestureDirection));
+      this.inverted.setValue(
+        getInvertedMultiplier(gestureDirection, direction === 'rtl')
+      );
     }
 
     const toValue = this.getAnimateToValue(this.props);
@@ -151,7 +155,10 @@ export class Card extends React.Component<Props> {
   private isClosing = new Animated.Value(FALSE);
 
   private inverted = new Animated.Value(
-    getInvertedMultiplier(this.props.gestureDirection)
+    getInvertedMultiplier(
+      this.props.gestureDirection,
+      this.props.direction === 'rtl'
+    )
   );
 
   private layout = {
@@ -227,16 +234,22 @@ export class Card extends React.Component<Props> {
     closing,
     layout,
     gestureDirection,
+    direction,
   }: {
     closing?: boolean;
     layout: Layout;
     gestureDirection: GestureDirection;
+    direction: LocaleDirection;
   }) => {
     if (!closing) {
       return 0;
     }
 
-    return getDistanceForDirection(layout, gestureDirection);
+    return getDistanceForDirection(
+      layout,
+      gestureDirection,
+      direction === 'rtl'
+    );
   };
 
   private setPointerEventsEnabled = (enabled: boolean) => {
@@ -262,6 +275,7 @@ export class Card extends React.Component<Props> {
     nativeEvent,
   }: PanGestureHandlerGestureEvent) => {
     const {
+      direction,
       layout,
       onClose,
       onGestureBegin,
@@ -314,7 +328,7 @@ export class Card extends React.Component<Props> {
 
         const closing =
           (translation + velocity * gestureVelocityImpact) *
-            getInvertedMultiplier(gestureDirection) >
+            getInvertedMultiplier(gestureDirection, direction === 'rtl') >
           distance / 2
             ? velocity !== 0 || translation !== 0
             : this.props.closing;
@@ -378,7 +392,8 @@ export class Card extends React.Component<Props> {
   );
 
   private gestureActivationCriteria() {
-    const { layout, gestureDirection, gestureResponseDistance } = this.props;
+    const { direction, layout, gestureDirection, gestureResponseDistance } =
+      this.props;
     const enableTrackpadTwoFingerGesture = true;
 
     const distance =
@@ -405,7 +420,10 @@ export class Card extends React.Component<Props> {
       };
     } else {
       const hitSlop = -layout.width + distance;
-      const invertedMultiplier = getInvertedMultiplier(gestureDirection);
+      const invertedMultiplier = getInvertedMultiplier(
+        gestureDirection,
+        direction === 'rtl'
+      );
 
       if (invertedMultiplier === 1) {
         return {
@@ -446,6 +464,19 @@ export class Card extends React.Component<Props> {
       children,
       containerStyle: customContainerStyle,
       contentStyle,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      closing,
+      direction,
+      gestureResponseDistance,
+      gestureVelocityImpact,
+      onClose,
+      onGestureBegin,
+      onGestureCanceled,
+      onGestureEnd,
+      onOpen,
+      onTransition,
+      transitionSpec,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = this.props;
 

package/src/views/Stack/CardContainer.tsx

@@ -4,7 +4,7 @@ import {
   HeaderHeightContext,
   HeaderShownContext,
 } from '@react-navigation/elements';
-import { Route, useTheme } from '@react-navigation/native';
+import { Route, useLocale, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
@@ -89,6 +89,8 @@ function CardContainerInner({
   safeAreaInsetTop,
   scene,
 }: Props) {
+  const { direction } = useLocale();
+
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
@@ -221,6 +223,7 @@ function CardContainerInner({
       gestureDirection={gestureDirection}
       layout={layout}
       insets={insets}
+      direction={direction}
       gesture={gesture}
       current={scene.progress.current}
       next={scene.progress.next}

package/src/views/Stack/CardStack.tsx

@@ -4,6 +4,7 @@ import {
   SafeAreaProviderCompat,
 } from '@react-navigation/elements';
 import type {
+  LocaleDirection,
   ParamListBase,
   Route,
   StackNavigationState,
@@ -47,6 +48,8 @@ type GestureValues = {
 };
 
 type Props = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  direction: LocaleDirection;
   insets: EdgeInsets;
   state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
@@ -162,7 +165,8 @@ const getHeaderHeights = (
 
 const getDistanceFromOptions = (
   layout: Layout,
-  descriptor?: StackDescriptor
+  descriptor: StackDescriptor,
+  isRTL: boolean
 ) => {
   const {
     presentation,
@@ -171,13 +175,14 @@ const getDistanceFromOptions = (
       : DefaultTransition.gestureDirection,
   } = (descriptor?.options || {}) as StackNavigationOptions;
 
-  return getDistanceForDirection(layout, gestureDirection);
+  return getDistanceForDirection(layout, gestureDirection, isRTL);
 };
 
 const getProgressFromGesture = (
   gesture: Animated.Value,
   layout: Layout,
-  descriptor?: StackDescriptor
+  descriptor: StackDescriptor,
+  isRTL: boolean
 ) => {
   const distance = getDistanceFromOptions(
     {
@@ -186,7 +191,8 @@ const getProgressFromGesture = (
       width: Math.max(1, layout.width),
       height: Math.max(1, layout.height),
     },
-    descriptor
+    descriptor,
+    isRTL
   );
 
   if (distance > 0) {
@@ -223,7 +229,11 @@ export class CardStack extends React.Component<Props, State> {
         new Animated.Value(
           props.openingRouteKeys.includes(curr.key) &&
           animationEnabled !== false
-            ? getDistanceFromOptions(state.layout, descriptor)
+            ? getDistanceFromOptions(
+                state.layout,
+                descriptor,
+                props.direction === 'rtl'
+              )
             : 0
         );
 
@@ -304,6 +314,8 @@ export class CardStack extends React.Component<Props, State> {
           ? 'float'
           : 'screen');
 
+      const isRTL = props.direction === 'rtl';
+
       const scene = {
         route,
         descriptor: {
@@ -324,7 +336,8 @@ export class CardStack extends React.Component<Props, State> {
           current: getProgressFromGesture(
             currentGesture,
             state.layout,
-            descriptor
+            descriptor,
+            isRTL
           ),
           next:
             nextGesture &&
@@ -332,14 +345,16 @@ export class CardStack extends React.Component<Props, State> {
               ? getProgressFromGesture(
                   nextGesture,
                   state.layout,
-                  nextDescriptor
+                  nextDescriptor,
+                  isRTL
                 )
               : undefined,
           previous: previousGesture
             ? getProgressFromGesture(
                 previousGesture,
                 state.layout,
-                previousDescriptor
+                previousDescriptor,
+                isRTL
               )
             : undefined,
         },

package/src/views/Stack/StackView.tsx

@@ -4,6 +4,7 @@ import {
 } from '@react-navigation/elements';
 import {
   CommonActions,
+  LocaleDirection,
   ParamListBase,
   Route,
   StackActions,
@@ -11,10 +12,7 @@ import {
 } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import {
-  EdgeInsets,
-  SafeAreaInsetsContext,
-} from 'react-native-safe-area-context';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type {
   StackDescriptorMap,
@@ -30,6 +28,7 @@ import {
 import { CardStack } from './CardStack';
 
 type Props = StackNavigationConfig & {
+  direction: LocaleDirection;
   state: StackNavigationState<ParamListBase>;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
@@ -448,7 +447,7 @@ export class StackView extends React.Component<Props, State> {
                   <HeaderShownContext.Consumer>
                     {(isParentHeaderShown) => (
                       <CardStack
-                        insets={insets as EdgeInsets}
+                        insets={insets!}
                         isParentHeaderShown={isParentHeaderShown}
                         isParentModal={isParentModal}
                         getPreviousRoute={this.getPreviousRoute}