Merge pull request Expensify#53754 from margelo/fix/bottom-tab-transi…

…tion-duration [NoQA] fix: bottom tab transitions duration
bernhardoj · Dec 19, 2024 · 13700ca · 13700ca
2 parents 6da9c7b + 88123e8
commit 13700ca
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 23 deletions.
diff --git a/patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch b/patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
-index abb2cf6..fb81d52 100644
+index abb2cf6..c21b3e9 100644
 --- a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
 +++ b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
 @@ -5,13 +5,14 @@
@@ -32,7 +32,7 @@ index abb2cf6..fb81d52 100644
  }
 @@ -129,6 +130,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
      }
-       
+
      [UIView animateWithDuration:[self transitionDuration:transitionContext]
 +        delay:0
 +        options:UIViewAnimationOptionCurveDefaultTransition
@@ -66,25 +66,7 @@ index abb2cf6..fb81d52 100644
                         animations:animationBlock
                         completion:completionBlock];
      } else {
-@@ -251,6 +260,8 @@ - (void)animateFadeWithTransitionContext:(id<UIViewControllerContextTransitionin
-     [[transitionContext containerView] addSubview:toViewController.view];
-     toViewController.view.alpha = 0.0;
-     [UIView animateWithDuration:[self transitionDuration:transitionContext]
-+        delay:0
-+        options:UIViewAnimationOptionCurveDefaultTransition
-         animations:^{
-           toViewController.view.alpha = 1.0;
-         }
-@@ -262,6 +273,8 @@ - (void)animateFadeWithTransitionContext:(id<UIViewControllerContextTransitionin
-     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
-
-     [UIView animateWithDuration:[self transitionDuration:transitionContext]
-+        delay:0
-+        options:UIViewAnimationOptionCurveDefaultTransition
-         animations:^{
-           fromViewController.view.alpha = 0.0;
-         }
-@@ -284,6 +297,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
+@@ -284,6 +293,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
      toViewController.view.transform = topBottomTransform;
      [[transitionContext containerView] addSubview:toViewController.view];
      [UIView animateWithDuration:[self transitionDuration:transitionContext]
@@ -93,7 +75,7 @@ index abb2cf6..fb81d52 100644
          animations:^{
            fromViewController.view.transform = CGAffineTransformIdentity;
            toViewController.view.transform = CGAffineTransformIdentity;
-@@ -309,6 +324,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
+@@ -309,6 +320,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
 
      if (!transitionContext.isInteractive) {
        [UIView animateWithDuration:[self transitionDuration:transitionContext]
@@ -153,4 +135,4 @@ index 4e39336..ab0b313 100644
 +  transitionDuration?: WithDefault<Int32, 500>;
    replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
    swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
-   hideKeyboardOnSwipe?: boolean;
+   hideKeyboardOnSwipe?: boolean;
diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx
@@ -2,6 +2,7 @@ import {useNavigationState} from '@react-navigation/native';
 import React from 'react';
 import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
+import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
@@ -14,6 +15,7 @@ const loadInitialSettingsPage = () => require<ReactComponentModule>('../../../..
 const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();
 
 const screenOptions: PlatformStackNavigationOptions = {
+    animation: Animations.FADE,
     headerShown: false,
 };
 

diff --git a/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/fade/index.ts b/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/fade/index.ts
@@ -0,0 +1,7 @@
+import type {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+import type {PlatformSpecificNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
+import Animations from '..';
+
+const fade: PlatformSpecificNavigationOptions = {animation: Animations.FADE, animationDuration: 150} satisfies NativeStackNavigationOptions;
+
+export default fade;
diff --git a/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/index.ts b/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/index.ts
@@ -5,12 +5,14 @@ const InternalPlatformAnimations = {
     IOS_FROM_LEFT: 'ios_from_left',
     IOS_FROM_RIGHT: 'ios_from_right',
     SIMPLE_PUSH: 'simple_push',
+    FADE: 'fade',
 } as const;
 
 const Animations = {
     SLIDE_FROM_LEFT: 'slide_from_left',
     SLIDE_FROM_RIGHT: 'slide_from_right',
     MODAL: 'modal',
+    FADE: 'fade',
     NONE: 'none',
 } as const;
 

diff --git a/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/withAnimation.ts b/src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/withAnimation.ts
@@ -1,6 +1,7 @@
 import type {NativeStackNavigationOptions} from '@react-navigation/native-stack';
 import type {StackNavigationOptions} from '@react-navigation/stack';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
+import fade from './fade';
 import Animations from './index';
 import none from './none';
 import slideFromBottom from './slideFromBottom';
@@ -19,6 +20,8 @@ function withAnimation<PlatformSpecificNavigationOptions extends StackNavigation
             return slideFromBottom as PlatformSpecificNavigationOptions;
         case Animations.NONE:
             return none as PlatformSpecificNavigationOptions;
+        case Animations.FADE:
+            return fade as PlatformSpecificNavigationOptions;
         default:
             return {} as PlatformSpecificNavigationOptions;
     }