Skip to content

Fix custom screen swipe transitions #3254

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
merged 5 commits into from
Oct 7, 2025
Merged

Fix custom screen swipe transitions #3254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e962d77
Fix custom screen transitions
piaskowyk Sep 25, 2025
42b42ef
Disable eslint
piaskowyk Sep 25, 2025
6c686da
Update types
piaskowyk Sep 25, 2025
74fa60f
Lint
piaskowyk Sep 25, 2025
108e114
Test new types
piaskowyk Sep 25, 2025
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
3 changes: 1 addition & 2 deletions src/components/Screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
React.useImperativeHandle(ref, () => innerRef.current!, []);
const prevActivityState = usePrevious(props.activityState);

const setRef = (ref: ViewConfig) => {

Check warning on line 66 in src/components/Screen.tsx

View workflow job for this annotation

GitHub Actions / lint-js 

'ref' is already declared in the upper scope on line 61 column 31
innerRef.current = ref;
props.onComponentRef?.(ref);
};
Expand Down Expand Up @@ -142,7 +142,7 @@
scrollEdgeEffects,
onGestureCancel,
style,
...props

Check warning on line 145 in src/components/Screen.tsx

View workflow job for this annotation

GitHub Actions / lint-js 

'props' is already declared in the upper scope on line 61 column 24
} = rest;

if (active !== undefined && activityState === undefined) {
Expand All @@ -164,7 +164,7 @@
}
}

const handleRef = (ref: ViewConfig) => {

Check warning on line 167 in src/components/Screen.tsx

View workflow job for this annotation

GitHub Actions / lint-js 

'ref' is already declared in the upper scope on line 61 column 31
// Workaround is necessary to prevent React Native from hiding frozen screens.
// See this PR: https://github.com/grahammendick/navigation/pull/860
if (ref?.viewConfig?.validAttributes?.style) {
Expand All @@ -172,14 +172,13 @@
...ref.viewConfig.validAttributes.style,
display: null,
};
setRef(ref);
} else if (ref?._viewConfig?.validAttributes?.style) {
ref._viewConfig.validAttributes.style = {
...ref._viewConfig.validAttributes.style,
display: null,
};
setRef(ref);
}
setRef(ref);
};

const freeze =
Expand Down Expand Up @@ -272,7 +271,7 @@
style,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onComponentRef,
...props

Check warning on line 274 in src/components/Screen.tsx

View workflow job for this annotation

GitHub Actions / lint-js 

'props' is already declared in the upper scope on line 61 column 24
} = rest;

if (active !== undefined && activityState === undefined) {
Expand All @@ -280,7 +279,7 @@
}
return (
<Animated.View
style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}

Check warning on line 282 in src/components/Screen.tsx

View workflow job for this annotation

GitHub Actions / lint-js 

Inline style: { display: "activityState !== 0 ? 'flex' : 'none'" }
ref={setRef}
{...props}
/>
Expand Down
80 changes: 14 additions & 66 deletions src/gesture-handler/fabricUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

import { View } from 'react-native';
import { View } from "react-native";

/* eslint-disable */

Expand All @@ -10,77 +10,25 @@ export function isFabric() {
return !!(global as LocalGlobal).RN$Bridgeless;
}

export type ShadowNodeWrapper = {
__hostObjectShadowNodeWrapper: never;
export type HostInstance = {
__internalInstanceHandle: Record<string, any>;
__nativeTag: number;
_viewConfig: Record<string, unknown>;
Copy link
Member

Choose a reason for hiding this comment

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

I guess our definitions were already outdated, but will it work with 80, 81 & 82 now?

Copy link
Member Author

Choose a reason for hiding this comment

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

I haven't tested it with all of these versions (only with 0.81), but to my knowledge, it should work with all of them.

};

let findHostInstance_DEPRECATED: (ref: unknown) => void;

let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
stateNode: { node: unknown };
};

// Taken and modifies from reanimated
export function getShadowNodeWrapperAndTagFromRef(ref: View | null): {
shadowNodeWrapper: ShadowNodeWrapper;
shadowNodeWrapper: any;
tag: number;
} {
// load findHostInstance_DEPRECATED lazily because it may not be available before render
if (findHostInstance_DEPRECATED === undefined) {
try {
findHostInstance_DEPRECATED =
require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
} catch (e) {
findHostInstance_DEPRECATED = (_ref: unknown) => null;
if (!ref) {
return {
shadowNodeWrapper: null,
tag: -1,
}
}

if (getInternalInstanceHandleFromPublicInstance === undefined) {
try {
getInternalInstanceHandleFromPublicInstance =
require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
.getInternalInstanceHandleFromPublicInstance ??
((_ref: any) => _ref._internalInstanceHandle);
} catch (e) {
getInternalInstanceHandleFromPublicInstance = (_ref: any) =>
_ref._internalInstanceHandle;
}
const internalRef = ref as unknown as HostInstance;
return {
shadowNodeWrapper: internalRef.__internalInstanceHandle.stateNode.node,
tag: internalRef.__nativeTag,
}

// taken from https://github.com/facebook/react-native/commit/803bb16531697233686efd475f004c1643e03617#diff-d8172256c6d63b5d32db10e54d7b10f37a26b337d5280d89f5bfd7bcea778292R196
// @ts-ignore some weird stuff on RN 0.74 - see examples with scrollView
const scrollViewRef = ref?.getScrollResponder?.()?.getNativeScrollRef?.();
// @ts-ignore some weird stuff on RN 0.74 - see examples with scrollView
const otherScrollViewRef = ref?.getNativeScrollRef?.();
// @ts-ignore some weird stuff on RN 0.74 - see setNativeProps example
const textInputRef = ref?.__internalInstanceHandle?.stateNode?.node;

let resolvedRef;
if (scrollViewRef) {
resolvedRef = {
shadowNodeWrapper: scrollViewRef.__internalInstanceHandle.stateNode.node,
tag: scrollViewRef._nativeTag,
};
} else if (otherScrollViewRef) {
resolvedRef = {
shadowNodeWrapper:
otherScrollViewRef.__internalInstanceHandle.stateNode.node,
tag: otherScrollViewRef.__nativeTag,
};
} else if (textInputRef) {
resolvedRef = {
shadowNodeWrapper: textInputRef,
tag: (ref as any)?.__nativeTag,
};
} else {
const hostInstance = findHostInstance_DEPRECATED(ref);
resolvedRef = {
shadowNodeWrapper:
getInternalInstanceHandleFromPublicInstance(hostInstance).stateNode
.node,
tag: (hostInstance as any)?._nativeTag,
};
}

return resolvedRef;
}
Loading