Skip to content

Commit

Permalink
fix(Fabric): not working animations on second-top screen (#2270)
Browse files Browse the repository at this point in the history
PR fixing animations on Fabric.

The problem started in RN 0.74, from which suspending the component triggers its useLayoutEffect. It has the consequences in Animated since detaching the native node happens then: facebook/react-native@a5b84b9/packages/react-native/Libraries/Animated/useAnimatedProps.js#L221-L238.
  • Loading branch information
WoLewicki authored Jul 31, 2024
1 parent bfbfe51 commit 725929a
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion src/components/ScreenStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import ScreenStackNativeComponent from '../fabric/ScreenStackNativeComponent';
const NativeScreenStack: React.ComponentType<ScreenStackProps> =
ScreenStackNativeComponent as any;

Check warning on line 8 in src/components/ScreenStack.tsx

View workflow job for this annotation

GitHub Actions / install-and-lint

Unexpected any. Specify a different type

function isFabric() {
return 'nativeFabricUIManager' in global;
}

function ScreenStack(props: ScreenStackProps) {
const { children, gestureDetectorBridge, ...rest } = props;
const ref = React.useRef(null);
Expand All @@ -19,8 +23,14 @@ function ScreenStack(props: ScreenStackProps) {
const isFreezeEnabled =
descriptor?.options?.freezeOnBlur ?? freezeEnabled();

// On Fabric, when screen is frozen, animated and reanimated values are not updated
// due to component being unmounted. To avoid this, we don't freeze the previous screen there
const freezePreviousScreen = isFabric()
? size - index > 2
: size - index > 1;

return (
<DelayedFreeze freeze={isFreezeEnabled && size - index > 1}>
<DelayedFreeze freeze={isFreezeEnabled && freezePreviousScreen}>
{child}
</DelayedFreeze>
);
Expand Down

0 comments on commit 725929a

Please sign in to comment.