Skip to content

Conversation

@kkafar
Copy link
Member

@kkafar kkafar commented Dec 23, 2025

Description

Closes https://github.com/software-mansion/react-native-screens-labs/issues/756

This resolution leads to type problems when using new react 19.2 features, such as rendering context directly as <Context> instead of <Context.Provider>.

I tracked that is has been added in 570923d - there is no
explanation in the commit message, why it has been added. I can now only assume that it was to enforce single react types across library & example code.

We now support React Native since 0.81 anyway & it comes with React 19 => all these changes can be treated as fixes and not breaking changes.
See detailed changelog below.

Changes

  • Remove resolution for "@types/react"

  • Fix type problems with usePrevious

  • Fix type errors in Screen.web.tsx

  • Fix type errors in ScreenStackHeaderConfig.tsx

  • Fix type errors in ScreenStackHeaderConfig.web.tsx

  • Fix typing for SearchBar ref
    It seems that in React 19.0 if you pass null as the initArg
    to the React.useRef then nullable type will be inferred anyway.
    So the searchBarRef is of type React.RefObject<SearchBarCommands | null> and we pass it to ref whose type is determined by
    NativeSearchBar type definition, which assumes
    React.RefObject<SearchBarCommands>, hence the error.

    I believe applying this patch shouldn't be treated as breaking change,
    but rather as a type fix. For anyone typechecking / using this ref
    it must have been annoying. The error would have to be either
    suppressed or ignored.

  • Change ElementRef to ComponentRef in NativeSearchBarRef type definition
    ElementRef got deprecated in React@19 and moreover using it results
    in following error:

    Diagnostics:
    1. Type 'ComponentType<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' does not satisfy the constraint 'ForwardRefExoticComponent<any> | (new (props: any, context: any) => Component<any, {}, any>) | ((props: any) => ReactNode) | keyof IntrinsicElements'.
         Type 'FunctionComponent<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' is not assignable to type 'ForwardRefExoticComponent<any> | (new (props: any, context: any) => Component<any, {}, any>) | ((props: any) => ReactNode) | keyof IntrinsicElements'.
           Property '$$typeof' is missing in type 'FunctionComponent<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' but required in type 'ForwardRefExoticComponent<any>'. [2344]
    2. 'ElementRef' is deprecated. [6385]
    

    I do not understand it fully. I don't even want to ;D Swapping for
    ComponentRef does the trick.

    My only worry is that this potentially could be considered a breaking
    change. HOWEVER, if this fixes an issue? I wanna be liberal here and
    treat is only as a fix & not a breaking change.

  • Formatter

  • Allow for nullable ref param in SearchBarCommands types

It seems that in React 19.0 if you pass `null` as the initArg
to the `React.useRef` then nullable type will be inferred anyway.
So the `searchBarRef` is of type `React.RefObject<SearchBarCommands |
null>` and we pass it to ref whose type is determined by
`NativeSearchBar` type definition, which assumes
`React.RefObject<SearchBarCommands>`, hence the error.

I believe applying this patch shouldn't be treated as breaking change,
but rather as a type fix. For anyone typechecking / using this ref
it must have been annoying. The error would have to be either
suppressed or ignored.
definition

`ElementRef` got deprecated in `React@19` and moreover using it results
in following error:

```
Diagnostics:
1. Type 'ComponentType<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' does not satisfy the constraint 'ForwardRefExoticComponent<any> | (new (props: any, context: any) => Component<any, {}, any>) | ((props: any) => ReactNode) | keyof IntrinsicElements'.
     Type 'FunctionComponent<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' is not assignable to type 'ForwardRefExoticComponent<any> | (new (props: any, context: any) => Component<any, {}, any>) | ((props: any) => ReactNode) | keyof IntrinsicElements'.
       Property '$$typeof' is missing in type 'FunctionComponent<NativeProps & { ref?: RefObject<SearchBarCommands | null> | undefined; }> & SearchBarCommandsType' but required in type 'ForwardRefExoticComponent<any>'. [2344]
2. 'ElementRef' is deprecated. [6385]
```

I do not understand it fully. I don't even want to ;D Swapping for
`ComponentRef` does the trick.

My only worry is that this potentially could be considered a breaking
change. HOWEVER, if this fixes an issue? I wanna be liberal here and
treat is only as a fix & not a breaking change.
@kkafar kkafar requested review from kligarski, kmichalikk and t0maboro and removed request for kligarski December 23, 2025 16:16
This is not breaking as it allows for wider gamut of types to be
accepted.

Ideally we should allow for `React.Ref` there, as suggested here:
#2724 (comment),
but it'd require some more internal changes.

Co-authored-by: Simone Gauli <Pnlvfx@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants