🐛 TextInput：Function components cannot be given refs about react-native HOT 6 CLOSED

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

from react-native.

from react-native.

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?

from react-native.

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>
    )
}

from react-native.

SOLUTION FOR MY ISSUE

In my case, the app was multiplatform (web, desktop, mobile) with files named:

• /MyButton/index.tsx
• /MyButton/MyButton/index.native.tsx for mobile
• /MyButton/MyButton/index.tsx for web

I did not notice that there was a file at the root MyButton/index.tsx which would render MyButton/MyButton/index.tsx or MyButton/MyButton/index.native.tsx.

I did not add the ref to the component MyButton/index.tsx so for this reason the ref was not forwarded. Somehow having the same name of the file for web, I got sidetracked and thought was the same file.

PREVIOUS COMMENTS

react-native 0.73.4

I'm experiencing this issue.

• I wrapped the component in a forwardRef, but seems that it is not possible to expose any of the methods.
• I tried to useImperativeHandle to expose those methods, but it's not viable.
• The only solution I found is this one. Using an innerRef.

I follow the react native docs on direct-manipulation. My implementation is exactly as in the example Composite components and setNativeProps, but the ref is not forwarded (or the API is set private) and I don't have access to the native view method setNativeProps.

In my use case, I need ref to a native View to call setNativeProps.

There must be some check to detect if the component is stateless, maybe this check is failing. Because I wrapped the component in a forwardRef as by the instructions.
#16247 (comment)

for example, code similar to this will not work in my application. I did not try to reproduce with a minimum repro, but hopefully I'll get the opportunity to do that.

MyButton.js

function MyButton(props, ref) {
    return (
        <View ref={ref} />
    );
}
export default forwardRef(MyButton);

MyContainer.js

function MyContainer(props) {
   const myRef = useRef();
   const hide = () => {
       if (myRef.current) {
           myRef.current.setNativeProps({opacity: 0});
       }
   }
   return (
      <TouchableOpacity onPress={() => hide()}>
          <MyButton ref={myRef} />
       </TouchableOpacity>
    )
}

while this works:

MyButton.js

function MyButton(props, ref) {
    return (
        <View ref={props.myButtonRef} />
    );
}
export default forwardRef(MyButton);

MyContainer.js

function MyContainer(props) {
   const myRef = useRef();
   const hide = () => {
       if (myRef.current) {
           myRef.current.setNativeProps({opacity: 0});
       }
   }
   return (
      <TouchableOpacity onPress={() => hide()}>
          <MyButton myButtonRef={myRef} />
       </TouchableOpacity>
    )
}

I did not have the time to reproduce it outside of my application with a Minimum Reproducible Example. This is just and example, but I believe the ref is getting removed.

I receive the warning functional components cannot be given refs, but the react-native documentation instruct us to use forward ref with functional components, to get a hold of the native view, so I believe here react-native is removing the ref, in fact if I set the ref without using the ref keyword on this functional/forwardRef component, it works.

I believe there is a check in the code, which removes the ref, but some of the conditions for removing this ref are failing.

The conditions maybe could be, if the component is a forwardRef, even if functional component, don't remove the ref, otherwise the ref is not forwarded.

UPDATE

I used useImperativeHandle to expose each method of the ref, but still does not work using the ref keyword from the functional component, but it does work if I pass the ref as innerRef prop instead of ref prop.

from react-native.

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.

from react-native.