🐛 TextInput：Function components cannot be given refs

[storyicon]

Description

When I use ref on TextInput, this problem always occurs stably：

ERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `CssInterop.TextInput`.
    in InternalTextInput (created by CssInterop.TextInput)
    in CssInterop.TextInput (created by Component)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by Component)
    in Component
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in AppContainer (created by Modal)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by Modal)
    in VirtualizedListContextResetter (created by Modal)
    in RCTModalHostView (created by Modal)

Steps to reproduce

import { TextInput } from 'react-native'
import { useRef } from 'react'
import { View } from 'react-native'
export default function Component() {
    const textRef = useRef<TextInput>(null)
    return (
        <View>
            <TextInput ref={(ref) => (textRef.current = ref)}></TextInput>
        </View>
    )
}

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Memory: 1.88 GB / 15.96 GB
Binaries:
  Node:
    version: 22.2.0
    path: D:\nodejs\node.EXE
  Yarn:
    version: 1.22.10
    path: F:\nodejs\node_global\yarn.CMD
  npm:
    version: 7.19.0
    path: F:\nodejs\node_global\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.11
    path: C:\Program Files\Microsoft\jdk-17.0.11.9-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

ERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `CssInterop.TextInput`.
    in InternalTextInput (created by CssInterop.TextInput)
    in CssInterop.TextInput (created by Component)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by Component)
    in Component
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in AppContainer (created by Modal)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by Modal)
    in VirtualizedListContextResetter (created by Modal)
    in RCTModalHostView (created by Modal)

Reproducer

https://snack.expo.dev/@storyicon/honest-yellow-pretzel

Screenshots and Videos

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cortinico]

ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

The error message is pretty self-explanatory. What is not clear about it?

[storyicon]

I don't believe this error should exist. The TextInput component itself provides the ref property. I've encountered this warning in many mature libraries, which makes me doubt its necessity. Do you have any suggestions for eliminating this warning in the example I provided? @cortinico

[gitSirzh]

It should be written like this

import { TextInput } from 'react-native'
import { useRef } from 'react'
import { View } from 'react-native'
export default function Component() {
    const textRef = useRef<TextInput>(null)
    return (
        <View>
            <TextInput ref={textRef} />
        </View>
    )
}

[storyicon]

I believe I've figured out what caused the issue. It was related to NativeWind and the package https://www.npmjs.com/package/react-native-css-interop. After uninstalling it, the problem no longer occurs.