Skip to content
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

fix(iOS): fix navigation item animation #2492

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(iOS): fix navigation item animation #2492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fccb540
EaseInOut transition for header
kkafar Nov 12, 2024
c70421f
Add enhanced example
kkafar Dec 9, 2024
a7e9574
Logging setup
kkafar Dec 9, 2024
f3c72ad
Update example
kkafar Dec 9, 2024
4c8320c
Improve example
kkafar Dec 10, 2024
f0cdd64
Temporaily remove interruptible animator
kkafar Dec 10, 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
104 changes: 104 additions & 0 deletions apps/src/tests/TestAnimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import { NavigationContainer, RouteProp } from '@react-navigation/native';
import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { View } from 'react-native';
import { Button, Square } from '../shared';

type ParamList = {
Home: undefined;
Second: undefined;
Third: undefined;
Fourth: undefined;
Fifth: undefined;
}

type RoutePropBase<RouteName extends keyof ParamList> = {
navigation: NativeStackNavigationProp<ParamList>,
route: RouteProp<ParamList, RouteName>;
}

const Stack = createNativeStackNavigator<ParamList>();

function Contents(): React.ReactNode {
return (
<View>
<Square size={200} color="lightblue" />
</View>
);
}

function Home({ navigation }: RoutePropBase<'Home'>): React.ReactNode {
return (
<View style={{ flex: 1, backgroundColor: 'lightgreen', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ width: '100%', height: 20, backgroundColor: 'red' }} />
<Button title="Go Second" onPress={() => navigation.navigate('Second')} />
<Contents />
</View>
);
}


function Second({ navigation }: RoutePropBase<'Second'>): React.ReactNode {
return (
<View style={{ flex: 1, backgroundColor: 'lightseagreen', justifyContent: 'center', alignItems: 'center' }}>
<Button title="Go Third" onPress={() => navigation.navigate('Third')} />
<Button title="Go back" onPress={() => navigation.popTo('Home')} />
<Contents />
</View>
);
}

function Third({ navigation }: RoutePropBase<'Third'>): React.ReactNode {
return (
<View style={{ flex: 1, backgroundColor: 'lightcoral', justifyContent: 'center', alignItems: 'center' }}>
<Button title="Go Fourth" onPress={() => navigation.navigate('Fourth')} />
<Button title="Go back" onPress={() => navigation.popTo('Second')} />
<Contents />
</View>
);
}

function Fourth({ navigation }: RoutePropBase<'Fourth'>): React.ReactNode {
return (
<View style={{ flex: 1, backgroundColor: 'orange', justifyContent: 'center', alignItems: 'center' }}>
<Button title="Go Fifth" onPress={() => navigation.navigate('Fifth')} />
<Button title="Go back" onPress={() => navigation.popTo('Second')} />
<Contents />
</View>
);
}

function Fifth({ navigation }: RoutePropBase<'Fifth'>): React.ReactNode {
return (
<View style={{ flex: 1, backgroundColor: 'pink', justifyContent: 'center', alignItems: 'center' }}>
<Button title="Go back" onPress={() => navigation.popTo('Fourth')} />
<Contents />
</View>
);
}

export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{
fullScreenGestureEnabled: true,
animation: 'simple_push',
//animationMatchesGesture: true,
}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Second" component={Second} options={{
headerShown: true,
}}/>
<Stack.Screen name="Third" component={Third} options={{
headerShown: true,
}} />
<Stack.Screen name="Fourth" component={Fourth} options={{
headerShown: false,
}} />
<Stack.Screen name="Fifth" component={Fifth} options={{
headerShown: true,
}} />
</Stack.Navigator>
</NavigationContainer>
);
}
256 changes: 129 additions & 127 deletions apps/src/tests/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,132 @@
// @ts-nocheck

export { default as Test42 } from './Test42';
export { default as Test111 } from './Test111';
export { default as Test263 } from './Test263';
export { default as Test349 } from './Test349';
export { default as Test364 } from './Test364';
export { default as Test432 } from './Test432';
export { default as Test528 } from './Test528';
export { default as Test550 } from './Test550';
export { default as Test556 } from './Test556';
export { default as Test564 } from './Test564';
export { default as Test577 } from './Test577';
export { default as Test593 } from './Test593';
export { default as Test619 } from './Test619';
export { default as Test624 } from './Test624';
export { default as Test640 } from './Test640';
export { default as Test642 } from './Test642';
export { default as Test645 } from './Test645';
export { default as Test648 } from './Test648';
export { default as Test649 } from './Test649';
export { default as Test654 } from './Test654';
export { default as Test658 } from './Test658';
export { default as Test662 } from './Test662';
export { default as Test691 } from './Test691';
export { default as Test702 } from './Test702';
export { default as Test706 } from './Test706';
export { default as Test713 } from './Test713';
export { default as Test726 } from './Test726';
export { default as Test748 } from './Test748';
export { default as Test750 } from './Test750';
export { default as Test758 } from './Test758';
export { default as Test761 } from './Test761';
export { default as Test779 } from './Test779';
export { default as Test780 } from './Test780';
export { default as Test791 } from './Test791';
export { default as Test800 } from './Test800';
export { default as Test817 } from './Test817';
export { default as Test830 } from './Test830';
export { default as Test831 } from './Test831';
export { default as Test844 } from './Test844';
export { default as Test852 } from './Test852';
export { default as Test860 } from './Test860';
export { default as Test861 } from './Test861';
export { default as Test865 } from './Test865';
export { default as Test881 } from './Test881';
export { default as Test887 } from './Test887';
export { default as Test913 } from './Test913';
export { default as Test999 } from './Test999';
export { default as Test1017 } from './Test1017';
export { default as Test1031 } from './Test1031';
export { default as Test1032 } from './Test1032';
export { default as Test1036 } from './Test1036';
export { default as Test1072 } from './Test1072';
export { default as Test1084 } from './Test1084';
export { default as Test1091 } from './Test1091';
export { default as Test1096 } from './Test1096';
export { default as Test1097 } from './Test1097';
export { default as Test1153 } from './Test1153';
export { default as Test1157 } from './Test1157';
export { default as Test1162 } from './Test1162';
export { default as Test1166 } from './Test1166';
export { default as Test1188 } from './Test1188';
export { default as Test1190 } from './Test1190';
export { default as TestFreeze } from './TestFreeze';
export { default as Test1198 } from './Test1198';
export { default as Test1204 } from './Test1204';
export { default as Test1209 } from './Test1209';
export { default as Test1213 } from './Test1213';
export { default as Test1214 } from './Test1214';
export { default as Test1227 } from './Test1227';
export { default as Test1228 } from './Test1228';
export { default as Test1259 } from './Test1259';
export { default as Test1260 } from './Test1260';
export { default as Test1296 } from './Test1296';
export { default as Test1299 } from './Test1299';
export { default as Test1391 } from './Test1391';
export { default as Test1419 } from './Test1419';
export { default as Test1463 } from './Test1463';
export { default as Test1473 } from './Test1473';
export { default as Test1476 } from './Test1476';
export { default as Test1509 } from './Test1509';
export { default as Test1539 } from './Test1539';
export { default as Test1645 } from './Test1645';
export { default as Test1646 } from './Test1646';
export { default as Test1649 } from './Test1649';
export { default as Test1671 } from './Test1671';
export { default as Test1683 } from './Test1683';
export { default as Test1726 } from './Test1726';
export { default as Test1791 } from './Test1791';
export { default as Test1802 } from './Test1802';
export { default as Test1829 } from './Test1829';
export { default as Test1844 } from './Test1844';
export { default as Test1864 } from './Test1864';
export { default as Test1970 } from './Test1970';
export { default as Test1975 } from './Test1975';
export { default as Test1981 } from './Test1981';
export { default as Test2002 } from './Test2002';
export { default as Test2008 } from './Test2008';
export { default as Test2028 } from './Test2028';
export { default as Test2048 } from './Test2048';
export { default as Test2069 } from './Test2069';
export { default as Test2118 } from './Test2118';
export { default as Test2175 } from './Test2175';
export { default as Test2184 } from './Test2184';
export { default as Test2223 } from './Test2223';
export { default as Test2227 } from './Test2227';
export { default as Test2229 } from './Test2229';
export { default as Test2232 } from './Test2232';
export { default as Test2235 } from './Test2235';
export { default as Test2252 } from './Test2252';
export { default as Test2271 } from './Test2271';
export { default as Test2282 } from './Test2282';
export { default as Test2317 } from './Test2317';
export { default as Test2320 } from './Test2320';
export { default as Test2332 } from './Test2332';
export { default as Test2379 } from './Test2379';
export { default as Test2395 } from './Test2395';
export { default as Test2552 } from './Test2552';
export { default as TestScreenAnimation } from './TestScreenAnimation';
export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
export { default as TestHeader } from './TestHeader';
export { default as TestPreload } from './TestPreload';
export { default as TestActivityStateProgression } from './TestActivityStateProgression';
export { default as TestHeaderTitle } from './TestHeaderTitle';
export { default as TestModalNavigation } from './TestModalNavigation';
export { default as TestMemoryLeak } from './TestMemoryLeak';
export { default as TestFormSheet } from './TestFormSheet';
export { default as TestAndroidTransitions } from './TestAndroidTransitions';
//export { default as Test42 } from './Test42';
//export { default as Test111 } from './Test111';
//export { default as Test263 } from './Test263';
//export { default as Test349 } from './Test349';
//export { default as Test364 } from './Test364';
//export { default as Test432 } from './Test432';
//export { default as Test528 } from './Test528';
//export { default as Test550 } from './Test550';
//export { default as Test556 } from './Test556';
//export { default as Test564 } from './Test564';
//export { default as Test577 } from './Test577';
//export { default as Test593 } from './Test593';
//export { default as Test619 } from './Test619';
//export { default as Test624 } from './Test624';
//export { default as Test640 } from './Test640';
//export { default as Test642 } from './Test642';
//export { default as Test645 } from './Test645';
//export { default as Test648 } from './Test648';
//export { default as Test649 } from './Test649';
//export { default as Test654 } from './Test654';
//export { default as Test658 } from './Test658';
//export { default as Test662 } from './Test662';
//export { default as Test691 } from './Test691';
//export { default as Test702 } from './Test702';
//export { default as Test706 } from './Test706';
//export { default as Test713 } from './Test713';
//export { default as Test726 } from './Test726';
//export { default as Test748 } from './Test748';
//export { default as Test750 } from './Test750';
//export { default as Test758 } from './Test758';
//export { default as Test761 } from './Test761';
//export { default as Test779 } from './Test779';
//export { default as Test780 } from './Test780';
//export { default as Test791 } from './Test791';
//export { default as Test800 } from './Test800';
//export { default as Test817 } from './Test817';
//export { default as Test830 } from './Test830';
//export { default as Test831 } from './Test831';
//export { default as Test844 } from './Test844';
//export { default as Test852 } from './Test852';
//export { default as Test860 } from './Test860';
//export { default as Test861 } from './Test861';
//export { default as Test865 } from './Test865';
//export { default as Test881 } from './Test881';
//export { default as Test887 } from './Test887';
//export { default as Test913 } from './Test913';
//export { default as Test999 } from './Test999';
//export { default as Test1017 } from './Test1017';
//export { default as Test1031 } from './Test1031';
//export { default as Test1032 } from './Test1032';
//export { default as Test1036 } from './Test1036';
//export { default as Test1072 } from './Test1072';
//export { default as Test1084 } from './Test1084';
//export { default as Test1091 } from './Test1091';
//export { default as Test1096 } from './Test1096';
//export { default as Test1097 } from './Test1097';
//export { default as Test1153 } from './Test1153';
//export { default as Test1157 } from './Test1157';
//export { default as Test1162 } from './Test1162';
//export { default as Test1166 } from './Test1166';
//export { default as Test1188 } from './Test1188';
//export { default as Test1190 } from './Test1190';
//export { default as TestFreeze } from './TestFreeze';
//export { default as Test1198 } from './Test1198';
//export { default as Test1204 } from './Test1204';
//export { default as Test1209 } from './Test1209';
//export { default as Test1213 } from './Test1213';
//export { default as Test1214 } from './Test1214';
//export { default as Test1227 } from './Test1227';
//export { default as Test1228 } from './Test1228';
//export { default as Test1259 } from './Test1259';
//export { default as Test1260 } from './Test1260';
//export { default as Test1296 } from './Test1296';
//export { default as Test1299 } from './Test1299';
//export { default as Test1391 } from './Test1391';
//export { default as Test1419 } from './Test1419';
//export { default as Test1463 } from './Test1463';
//export { default as Test1473 } from './Test1473';
//export { default as Test1476 } from './Test1476';
//export { default as Test1509 } from './Test1509';
//export { default as Test1539 } from './Test1539';
//export { default as Test1645 } from './Test1645';
//export { default as Test1646 } from './Test1646';
//export { default as Test1649 } from './Test1649';
//export { default as Test1671 } from './Test1671';
//export { default as Test1683 } from './Test1683';
//export { default as Test1726 } from './Test1726';
//export { default as Test1791 } from './Test1791';
//export { default as Test1802 } from './Test1802';
//export { default as Test1829 } from './Test1829';
//export { default as Test1844 } from './Test1844';
//export { default as Test1864 } from './Test1864';
//export { default as Test1970 } from './Test1970';
//export { default as Test1975 } from './Test1975';
//export { default as Test1981 } from './Test1981';
//export { default as Test2002 } from './Test2002';
//export { default as Test2008 } from './Test2008';
//export { default as Test2028 } from './Test2028';
//export { default as Test2048 } from './Test2048';
//export { default as Test2069 } from './Test2069';
//export { default as Test2118 } from './Test2118';
//export { default as Test2175 } from './Test2175';
//export { default as Test2184 } from './Test2184';
//export { default as Test2223 } from './Test2223';
//export { default as Test2227 } from './Test2227';
//export { default as Test2229 } from './Test2229';
//export { default as Test2232 } from './Test2232';
//export { default as Test2235 } from './Test2235';
//export { default as Test2252 } from './Test2252';
//export { default as Test2271 } from './Test2271';
//export { default as Test2282 } from './Test2282';
//export { default as Test2317 } from './Test2317';
//export { default as Test2320 } from './Test2320';
//export { default as Test2332 } from './Test2332';
//export { default as Test2379 } from './Test2379';
//export { default as Test2395 } from './Test2395';
//export { default as Test2552 } from './Test2552';
//export { default as TestScreenAnimation } from './TestScreenAnimation';
//export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
//export { default as TestHeader } from './TestHeader';
//export { default as TestPreload } from './TestPreload';
//export { default as TestActivityStateProgression } from './TestActivityStateProgression';
//export { default as TestHeaderTitle } from './TestHeaderTitle';
//export { default as TestModalNavigation } from './TestModalNavigation';
//export { default as TestMemoryLeak } from './TestMemoryLeak';
//export { default as TestFormSheet } from './TestFormSheet';
//export { default as TestAndroidTransitions } from './TestAndroidTransitions';
export { default as TestAnimation } from './TestAnimation';


9 changes: 7 additions & 2 deletions ios/RNSPercentDrivenInteractiveTransition.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ @implementation RNSPercentDrivenInteractiveTransition {

- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
NSLog(
@"UIKit asks UIViewControllerInteractiveTransitioning %@ to startInteractiveTransition with context %@",
self,
transitionContext);
[super startInteractiveTransition:transitionContext];
}

Expand Down Expand Up @@ -49,14 +53,15 @@ - (void)finalizeInteractiveTransitionWithAnimationWasCancelled:(BOOL)cancelled
return;
}

UIViewPropertyAnimator *_Nullable animator = _animationController.inFlightAnimator;
id<UIViewImplicitlyAnimating> _Nullable animator = _animationController.inFlightAnimator;
if (animator == nil) {
return;
}

BOOL shouldReverseAnimation = cancelled;

id<UITimingCurveProvider> timingParams = [_animationController timingParamsForAnimationCompletion];
// Nil params mean that the transition should be completed using originally set timing params.
id<UITimingCurveProvider> _Nullable timingParams = [_animationController timingParamsForAnimationCompletion];

[animator pauseAnimation];
[animator setReversed:shouldReverseAnimation];
Expand Down
Loading