TypeScript: Replace deprecated React.ElementRef usages to React.ComponentRef

[mateoguzmana]

Summary:

While upgrading a project to React 19, I noticed React.ElementRef is deprecated (see types/react/index.d.ts#L199). I think we can replace it for the RN types as well.

Not sure if this is considered as a breaking change.

Changelog:

[GENERAL] [CHANGED] - TypeScript: Replace deprecated React.ElementRef usages to React.ComponentRef

Test Plan:

Create a RNTesterPlayground.tsx next to the normal .js just to validate the type checking is not throwing an unexpected error.

Code snippet:

import React, { useRef, useEffect } from 'react';
import { FlatList, Text, View } from 'react-native';

type Item = { id: string; title: string };

const data: Item[] = Array.from({ length: 10 }, (_, i) => ({
  id: i.toString(),
  title: `Item ${i + 1}`,
}));

const FlatListScrollRefExample: React.FC = () => {
  const flatListRef = useRef<FlatList<Item>>(null);

  useEffect(() => {
    if (flatListRef.current) {
      const nativeRef = flatListRef.current.getNativeScrollRef();

      console.log('nativeRef', nativeRef?.componentWillUnmount);
    }
  }, []);

  return (
    <FlatList
      ref={flatListRef}
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};

export default FlatListScrollRefExample;

[facebook-github-bot]

@rshest has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@rshest merged this pull request in 12147e3.

[react-native-bot]

This pull request was successfully merged by @mateoguzmana in 12147e3

^{When will my fix make it into a release? | How to file a pick request?}

[mikehardy]

This didn't go far enough - the deprecated React.ElementRef is still a strict requirement in the codegen phase:

https://github.com/search?q=repo%3Afacebook%2Freact-native%20React.ElementRef%3C%3E&type=code

I suppose I should log a new issue as there isn't one currently