Problem ref in TextInput not work

[AlexCernik]

Description

Hi, the problem is that I am passing ref={ref} to TextInput in the first option with React.forwardRef React Native 0.80.2 it works fine, but in the second one in React Native 0.81.1 it no longer implements this functionality and ref or forwardedRef is not defined, it is necessary to change the code react-native/Libraries/Components/TextInput/TextInput.js to create a new re-render so that forwardedRef has the value.

Steps to reproduce

0.80.2 prop ref work

const ExportedForwardRef: component(
  ref?: React.RefSetter<TextInputInstance>,
  ...props: React.ElementConfig<typeof InternalTextInput>
) = React.forwardRef(function TextInput(
  {
    allowFontScaling = true,
    rejectResponderTermination = true,
    underlineColorAndroid = 'transparent',
    autoComplete,
    textContentType,
    readOnly,
    editable,
    enterKeyHint,
    returnKeyType,
    inputMode,
    showSoftInputOnFocus,
    keyboardType,
    ...restProps
  },
  forwardedRef: React.RefSetter<TextInputInstance>,
) {
  return (
    <InternalTextInput
      allowFontScaling={allowFontScaling}
      rejectResponderTermination={rejectResponderTermination}
      underlineColorAndroid={underlineColorAndroid}
      editable={readOnly !== undefined ? !readOnly : editable}
      returnKeyType={
        enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType
      }
      keyboardType={
        inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
      }
      showSoftInputOnFocus={
        inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
      }
      autoComplete={
        Platform.OS === 'android'
          ? // $FlowFixMe[invalid-computed-prop]
            // $FlowFixMe[prop-missing]
            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
            autoComplete
          : undefined
      }
      textContentType={
        textContentType != null
          ? textContentType
          : Platform.OS === 'ios' &&
              autoComplete &&
              autoComplete in autoCompleteWebToTextContentTypeMap
            ? // $FlowFixMe[invalid-computed-prop]
              // $FlowFixMe[prop-missing]
              autoCompleteWebToTextContentTypeMap[autoComplete]
            : textContentType
      }
      {...restProps}
      forwardedRef={forwardedRef}
    />
  );
});

0.81.0 and new the prop ref not work

const TextInput: component(
  ref?: React.RefSetter<TextInputInstance>,
  ...props: React.ElementConfig<typeof InternalTextInput>
) = function TextInput({
  ref: forwardedRef,
  allowFontScaling = true,
  rejectResponderTermination = true,
  underlineColorAndroid = 'transparent',
  autoComplete,
  textContentType,
  readOnly,
  editable,
  enterKeyHint,
  returnKeyType,
  inputMode,
  showSoftInputOnFocus,
  keyboardType,
  ...restProps
}: {
  ref?: React.RefSetter<TextInputInstance>,
  ...React.ElementConfig<typeof InternalTextInput>,
}) {
  return (
    <InternalTextInput
      allowFontScaling={allowFontScaling}
      rejectResponderTermination={rejectResponderTermination}
      underlineColorAndroid={underlineColorAndroid}
      editable={readOnly !== undefined ? !readOnly : editable}
      returnKeyType={
        enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType
      }
      keyboardType={
        inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
      }
      showSoftInputOnFocus={
        inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
      }
      autoComplete={
        Platform.OS === 'android'
          ? // $FlowFixMe[invalid-computed-prop]
            // $FlowFixMe[prop-missing]
            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
            autoComplete
          : undefined
      }
      textContentType={
        textContentType != null
          ? textContentType
          : Platform.OS === 'ios' &&
              autoComplete &&
              autoComplete in autoCompleteWebToTextContentTypeMap
            ? // $FlowFixMe[prop-missing]
              autoCompleteWebToTextContentTypeMap[autoComplete]
            : textContentType
      }
      {...restProps}
      forwardedRef={forwardedRef}
    />
  );
};

React Native Version

0.81.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  CPU: (4) x64 Intel(R) Core(TM) i3-3217U CPU @ 1.80GHz
  Memory: 1.34 GB / 7.62 GB
  Shell:
    version: 5.2.15
    path: /bin/bash
Binaries:
  Node:
    version: 22.18.0
    path: /usr/bin/node
  Yarn: Not Found
  npm:
    version: 11.5.2
    path: /usr/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.1
    wanted: 20.0.1
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.0-rc.0
    wanted: 0.82.0-rc.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

Does not generate error.

MANDATORY Reproducer

In version 0.81.0 and newer, if React.forwardRef is added, the ref property does work.

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[atulgpt17]

Hi @AlexCernik can you create a reproducer app using the template https://github.com/react-native-community/reproducer-react-native/generate? Also is this a break in recent RN version?

[marloweoliver]

Hello, experiencing something similar but with ScrollView and FlatList. On version 0.81.1 of react-native.

[AlexCernik]

Hello, experiencing something similar but with ScrollView and FlatList. On version 0.81.1 of react-native.

The strange thing is that at first I started a new react native project without a Framework and I had the problem with the references and then I started another one and I didn't have this problem, have you tried starting a new project to test?

[galzate-mybambu]

For me it's happening using expo, after update expo from SDK 53 to SDK 54, react native went from 0.79.5 to 0.81.4 and suddenly all refs to native components are not working, tried with TexInput and ScrollView

[marloweoliver]

I tried replicating with only react native (81.1) and was unable to replicate. May be an expo issue as opposed to a react native issue.