Skip to content

Commit b74e0eb

Browse files
authored
fix: header config missing ref (#2434)
## Description This PR changes `ScreenStackHeaderConfig` into a [forwardRef](@alduzy/reanimated-patch). This is needed if you want to attach `ref` to it, which **react-native-reanimated** needs to do [here](https://github.com/software-mansion/react-native-reanimated/blob/1d417a5c711d60822d25bd8b823f1f5968214bde/apps/common-app/src/examples/ScreenStackHeaderConfigBackgroundColorExample.tsx#L24) in order to migrate to v4, since the header config is now a function component and cannot be used directly anymore. Without this change the app crashes with `Cannot read property 'getScrollableNode' of null`. Related PR: software-mansion/react-native-reanimated#6622 <!-- ## Changes Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Updated `about.md` docs --> <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> <!-- ## Test code and steps to reproduce Please include code that can be used to test this change and short description how this example should work. This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example) --> ## Checklist - [x] Ensured that CI passes
1 parent df26107 commit b74e0eb

File tree

1 file changed

+14
-12
lines changed

1 file changed

+14
-12
lines changed

src/components/ScreenStackHeaderConfig.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ScreenStackHeaderConfigProps,
77
SearchBarProps,
88
} from '../types';
9-
import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
9+
import { Image, ImageProps, StyleSheet, View, ViewProps } from 'react-native';
1010

1111
// Native components
1212
import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
@@ -16,17 +16,19 @@ export const ScreenStackHeaderSubview: React.ComponentType<
1616
React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
1717
> = ScreenStackHeaderSubviewNativeComponent as any;
1818

19-
export function ScreenStackHeaderConfig(
20-
props: ScreenStackHeaderConfigProps,
21-
): React.JSX.Element {
22-
return (
23-
<ScreenStackHeaderConfigNativeComponent
24-
{...props}
25-
style={styles.headerConfig}
26-
pointerEvents="box-none"
27-
/>
28-
);
29-
}
19+
export const ScreenStackHeaderConfig = React.forwardRef<
20+
View,
21+
ScreenStackHeaderConfigProps
22+
>((props, ref) => (
23+
<ScreenStackHeaderConfigNativeComponent
24+
{...props}
25+
ref={ref}
26+
style={styles.headerConfig}
27+
pointerEvents="box-none"
28+
/>
29+
));
30+
31+
ScreenStackHeaderConfig.displayName = 'ScreenStackHeaderConfig';
3032

3133
export const ScreenStackHeaderBackButtonImage = (
3234
props: ImageProps,

0 commit comments

Comments
 (0)