Skip to content

[NoQA] fix: bottom tab transitions duration #53754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 2 commits into from
Dec 19, 2024
Merged

[NoQA] fix: bottom tab transitions duration #53754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b29e5e
fix: bottom tab transitions duration
kirillzyusko Dec 9, 2024
88123e8
Merge branch 'main' into fix/bottom-tab-transition-duration
kirillzyusko Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 5 additions & 23 deletions patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 @@
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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]
Expand All @@ -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]
Expand Down Expand Up @@ -153,4 +135,4 @@ index 4e39336..ab0b313 100644
+ transitionDuration?: WithDefault<Int32, 500>;
replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
hideKeyboardOnSwipe?: boolean;
hideKeyboardOnSwipe?: boolean;
2 changes: 2 additions & 0 deletions src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -14,6 +15,7 @@ const loadInitialSettingsPage = () => require<ReactComponentModule>('../../../..
const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();

const screenOptions: PlatformStackNavigationOptions = {
animation: Animations.FADE,
headerShown: false,
};

Expand Down
7 changes: 7 additions & 0 deletions src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/fade/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

@shawnborton shawnborton Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be curious to try 100

Copy link
Contributor

@shawnborton shawnborton Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or rather, what is the current animation/transition duration?

Copy link
Contributor Author

@kirillzyusko kirillzyusko Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or rather, what is the current animation/transition duration?

I think at the moment it's 500ms, but visual perception is about 350ms (it's a spring animation and last 150ms we may just animate opacity from 0.95 to 1, which might be not an actual duration perception).

Do you want me to change it to 100ms?

Copy link
Contributor

@mountiny mountiny Dec 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shawnborton @dannymcclain @dubielzyk-expensify I will now go ahead with this change, we can play around with the delay based on how it will feel later


export default fade;
2 changes: 2 additions & 0 deletions src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
3 changes: 3 additions & 0 deletions src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/withAnimation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
}
Expand Down
Loading