Remove forwardRef (#4093)

## Description

Since React 19 it is not necessary to use `forwardRef`. I've run `npx
eslint --fix` and it removed them, though it required some adjustments.

This PR also contains few other fixes, like not using `.Provider` in
context, or some imports which were not previously caught by linter.

## Test plan

`yarn lint-js` && `yarn ts-check`

<details>
<summary>Refs tested on the following code:</summary>

```tsx
import type { ComponentType } from 'react';
import { useRef, useState } from 'react';
import type {
  FlatList as RNFlatList,
  ScrollView as RNScrollView,
} from 'react-native';
import { StyleSheet, Text, View } from 'react-native';
import {
  FlatList,
  GestureHandlerRootView,
  LegacyBaseButton,
  LegacyBorderlessButton,
  LegacyFlatList,
  LegacyRectButton,
  LegacyScrollView,
  RectButton,
  ScrollView,
  TouchableWithoutFeedback,
} from 'react-native-gesture-handler';
import ReanimatedDrawerLayout, {
  DrawerPosition,
} from 'react-native-gesture-handler/ReanimatedDrawerLayout';

const DATA = Array.from({ length: 30 }, (_, i) => ({
  key: `item-${i}`,
  title: `Item ${i}`,
}));

function showRef(ref: React.RefObject<unknown>) {
  console.log(ref.current);
}

// ──────────────────────────────────────────────
// 1. Legacy ScrollView ref
// ──────────────────────────────────────────────
function LegacyScrollViewRefTest() {
  const ref = useRef<RNScrollView>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>Legacy ScrollView ref</Text>
      <RectButton style={styles.btn} onPress={() => showRef(ref)}>
        <Text>Check ref</Text>
      </RectButton>
      <RectButton
        style={styles.btn}
        onPress={() => ref.current?.scrollTo({ y: 200, animated: true })}>
        <Text>scrollTo(200)</Text>
      </RectButton>
      <LegacyScrollView ref={ref} style={styles.scrollBox}>
        {DATA.map((d) => (
          <Text key={d.key} style={styles.item}>
            {d.title}
          </Text>
        ))}
      </LegacyScrollView>
    </View>
  );
}

// ──────────────────────────────────────────────
// 2. V3 ScrollView ref
// ──────────────────────────────────────────────
function V3ScrollViewRefTest() {
  const ref = useRef<RNScrollView>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>V3 ScrollView ref</Text>
      <RectButton style={styles.btn} onPress={() => showRef(ref)}>
        <Text>Check ref</Text>
      </RectButton>
      <RectButton
        style={styles.btn}
        onPress={() => ref.current?.scrollTo({ y: 200, animated: true })}>
        <Text>scrollTo(200)</Text>
      </RectButton>
      <ScrollView ref={ref} style={styles.scrollBox}>
        {DATA.map((d) => (
          <Text key={d.key} style={styles.item}>
            {d.title}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
}

// ──────────────────────────────────────────────
// 3. Legacy FlatList ref
// ──────────────────────────────────────────────
function LegacyFlatListRefTest() {
  const ref = useRef<RNFlatList>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>Legacy FlatList ref</Text>
      <RectButton style={styles.btn} onPress={() => showRef(ref)}>
        <Text>Check ref</Text>
      </RectButton>
      <RectButton
        style={styles.btn}
        onPress={() =>
          ref.current?.scrollToIndex({ index: 10, animated: true })
        }>
        <Text>scrollToIndex(10)</Text>
      </RectButton>
      <LegacyFlatList
        ref={ref}
        style={styles.scrollBox}
        data={DATA}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
      />
    </View>
  );
}

// ──────────────────────────────────────────────
// 4. V3 FlatList ref
// ──────────────────────────────────────────────
function V3FlatListRefTest() {
  const ref = useRef<RNFlatList>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>V3 FlatList ref</Text>
      <RectButton style={styles.btn} onPress={() => showRef(ref)}>
        <Text>Check ref</Text>
      </RectButton>
      <RectButton
        style={styles.btn}
        onPress={() =>
          ref.current?.scrollToIndex({ index: 10, animated: true })
        }>
        <Text>scrollToIndex(10)</Text>
      </RectButton>
      <FlatList
        ref={ref}
        style={styles.scrollBox}
        data={DATA}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
      />
    </View>
  );
}

// ──────────────────────────────────────────────
// 5. Legacy Buttons refs
// ──────────────────────────────────────────────
function LegacyButtonRefsTest() {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const baseRef = useRef<ComponentType<any>>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const rectRef = useRef<ComponentType<any>>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const borderlessRef = useRef<ComponentType<any>>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>Legacy Button refs</Text>
      <LegacyBaseButton
        ref={baseRef}
        style={styles.btn}
        onPress={() => showRef(baseRef)}>
        <Text>BaseButton - tap to check ref</Text>
      </LegacyBaseButton>
      <LegacyRectButton
        ref={rectRef}
        style={styles.btn}
        onPress={() => showRef(rectRef)}>
        <Text>RectButton - tap to check ref</Text>
      </LegacyRectButton>
      <LegacyBorderlessButton
        ref={borderlessRef}
        style={styles.btn}
        onPress={() => showRef(borderlessRef)}>
        <Text>BorderlessButton - tap to check ref</Text>
      </LegacyBorderlessButton>
    </View>
  );
}

// ──────────────────────────────────────────────
// 6. TouchableWithoutFeedback ref
// ──────────────────────────────────────────────
function TouchableRefTest() {
  const ref = useRef(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>TouchableWithoutFeedback ref</Text>
      <TouchableWithoutFeedback ref={ref} onPress={() => showRef(ref)}>
        <View style={styles.btn}>
          <Text>Tap to check ref</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
}

// ──────────────────────────────────────────────
// 7. DrawerLayout ref (imperative open/close)
// ──────────────────────────────────────────────
function DrawerLayoutRefTest() {
  const drawerRef =
    useRef<React.ComponentRef<typeof ReanimatedDrawerLayout>>(null);

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>DrawerLayout ref</Text>
      <RectButton style={styles.btn} onPress={() => showRef(drawerRef)}>
        <Text>Check ref</Text>
      </RectButton>
      <RectButton
        style={styles.btn}
        onPress={() => drawerRef.current?.openDrawer()}>
        <Text>Open drawer</Text>
      </RectButton>
      <ReanimatedDrawerLayout
        ref={drawerRef}
        drawerWidth={200}
        drawerPosition={DrawerPosition.LEFT}
        renderNavigationView={() => (
          <View style={styles.drawer}>
            <Text style={styles.heading}>Drawer content</Text>
            <RectButton
              style={styles.btn}
              onPress={() => drawerRef.current?.closeDrawer()}>
              <Text>Close drawer</Text>
            </RectButton>
          </View>
        )}>
        <View style={styles.drawerContent}>
          <Text>Main content - swipe right to open</Text>
        </View>
      </ReanimatedDrawerLayout>
    </View>
  );
}

// ──────────────────────────────────────────────
// 8. Callback ref test
// ──────────────────────────────────────────────
function CallbackRefTest() {
  const [status, setStatus] = useState('waiting...');

  return (
    <View style={styles.section}>
      <Text style={styles.heading}>Callback ref</Text>
      <Text>ScrollView callback ref: {status}</Text>
      <ScrollView
        ref={(node) => {
          setStatus(node ? 'OK' : 'NULL');
        }}
        style={styles.scrollBox}>
        {DATA.slice(0, 5).map((d) => (
          <Text key={d.key} style={styles.item}>
            {d.title}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
}

// ──────────────────────────────────────────────
// Main app
// ──────────────────────────────────────────────
export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}>
        <Text style={styles.title}>Ref Reproduction Tests</Text>
        <Text style={styles.subtitle}>
          Tap &quot;Check ref&quot; buttons - expect OK, not NULL.{'\n'}
          Test scrollTo / scrollToIndex to verify imperative methods.
        </Text>

        <LegacyScrollViewRefTest />
        <V3ScrollViewRefTest />
        <LegacyFlatListRefTest />
        <V3FlatListRefTest />
        <LegacyButtonRefsTest />
        <TouchableRefTest />
        <DrawerLayoutRefTest />
        <CallbackRefTest />
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#f5f5f5' },
  container: { flex: 1 },
  content: { padding: 16, paddingBottom: 80 },
  title: { fontSize: 22, fontWeight: 'bold', color: '#333', marginBottom: 4 },
  subtitle: { fontSize: 13, color: '#666', marginBottom: 16 },
  section: {
    marginBottom: 24,
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  heading: { fontSize: 16, fontWeight: '600', color: '#333', marginBottom: 8 },
  btn: {
    backgroundColor: '#e8e8ff',
    padding: 10,
    borderRadius: 8,
    marginBottom: 8,
    alignItems: 'center' as const,
  },
  scrollBox: { height: 120, backgroundColor: '#fafafa', borderRadius: 8 },
  item: { padding: 10, borderBottomWidth: 1, borderBottomColor: '#eee' },
  drawer: { flex: 1, backgroundColor: '#dde', padding: 16 },
  drawerContent: {
    flex: 1,
    justifyContent: 'center' as const,
    alignItems: 'center' as const,
    minHeight: 150,
  },
});
```

</details>

Author: m-bert

apps/basic-example/index.js

@@ -3,7 +3,8 @@
  */
 
 import { AppRegistry } from 'react-native';
-import App from './src/App';
+
 import { name as appName } from './app.json';
+import App from './src/App';
 
 AppRegistry.registerComponent(appName, () => App);

apps/common-app/App.tsx

@@ -1,27 +1,27 @@
-import { useEffect, useState } from 'react';
-import { Text, View, StyleSheet, Platform, Dimensions } from 'react-native';
-import {
-  createStackNavigator,
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { ParamListBase } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
+import type {
   StackNavigationProp,
   StackScreenProps,
 } from '@react-navigation/stack';
-import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Icon } from '@swmansion/icons';
+import { useEffect, useState } from 'react';
+import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
 import {
   GestureHandlerRootView,
   RectButton,
   Switch,
 } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { COLORS } from './src/common';
-
-import { Icon } from '@swmansion/icons';
-
 import { OLD_EXAMPLES } from './src/legacy';
-import { NEW_EXAMPLES } from './src/new_api';
 import { TouchableExample } from './src/legacy/release_tests/touchables';
 import { ListWithHeader } from './src/ListWithHeader';
+import { NEW_EXAMPLES } from './src/new_api';
+
 const OPEN_LAST_EXAMPLE_KEY = 'openLastExample';
 const SHOW_LEGACY_EXAMPLES_KEY = 'showLegacyExamples';
 const LAST_EXAMPLE_KEY = 'lastExample';

apps/expo-example/index.ts

@@ -1,7 +1,9 @@
 import '@expo/metro-runtime';
-import App from './App';
+
 import { registerRootComponent } from 'expo';
 
+import App from './App';
+
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,
 // the environment is set up appropriately

apps/macos-example/index.ts

@@ -4,6 +4,7 @@
 
 import App from 'common-app';
 import { AppRegistry } from 'react-native';
+
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

packages/react-native-gesture-handler/src/components/GestureButtons.tsx

@@ -147,14 +147,14 @@ export const LegacyBaseButton = ({
   ref,
   ...props
 }: Omit<LegacyBaseButtonProps, 'innerRef'> & {
-  ref?: React.ForwardedRef<React.ComponentType<any>> | undefined;
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
 }) => <InnerBaseButton innerRef={ref} {...props} />;
 
 const AnimatedBaseButton = ({
   ref,
   ...props
 }: Animated.AnimatedProps<BaseButtonWithRefProps> & {
-  ref?: React.ForwardedRef<React.ComponentType<any>> | undefined;
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
 }) => <AnimatedInnerBaseButton innerRef={ref} {...props} />;
 
 const btnStyles = StyleSheet.create({
@@ -228,7 +228,7 @@ export const LegacyRectButton = ({
   ref,
   ...props
 }: Omit<LegacyRectButtonProps, 'innerRef'> & {
-  ref?: React.ForwardedRef<React.ComponentType<any>> | undefined;
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
 }) => <InnerRectButton innerRef={ref} {...props} />;
 
 class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
@@ -276,7 +276,7 @@ export const LegacyBorderlessButton = ({
   ref,
   ...props
 }: Omit<LegacyBorderlessButtonProps, 'innerRef'> & {
-  ref?: React.ForwardedRef<React.ComponentType<any>> | undefined;
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
 }) => <InnerBorderlessButton innerRef={ref} {...props} />;
 
 export { default as LegacyPureNativeButton } from './GestureHandlerButton';

packages/react-native-gesture-handler/src/components/GestureButtonsProps.ts

@@ -95,7 +95,7 @@ export interface LegacyRawButtonProps
   testOnly_onLongPress?: Function | null | undefined;
 }
 interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>> | undefined;
+  innerRef?: React.Ref<React.ComponentType<any>> | undefined;
 }
 
 /**

packages/react-native-gesture-handler/src/components/GestureComponents.tsx

@@ -1,9 +1,4 @@
-import type {
-  ForwardedRef,
-  PropsWithChildren,
-  ReactElement,
-  RefAttributes,
-} from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import * as React from 'react';
 import type {
   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
@@ -49,18 +44,18 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 /**
  * @deprecated use `ScrollView` instead
  */
-export const LegacyScrollView = React.forwardRef<
-  RNScrollView,
-  RNScrollViewProps & NativeViewGestureHandlerProps
->((props, ref) => {
+export const LegacyScrollView = (
+  props: RNScrollViewProps &
+    NativeViewGestureHandlerProps & {
+      ref?: React.Ref<RNScrollView | null>;
+    }
+) => {
   const refreshControlGestureRef = React.useRef<LegacyRefreshControl>(null);
   const { refreshControl, waitFor, ...rest } = props;
 
   return (
     <GHScrollView
       {...rest}
-      // @ts-ignore `ref` exists on `GHScrollView`
-      ref={ref}
       waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
@@ -73,7 +68,7 @@ export const LegacyScrollView = React.forwardRef<
       }
     />
   );
-});
+};
 
 // Backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
 // include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
@@ -112,7 +107,14 @@ export type LegacyDrawerLayoutAndroid = typeof LegacyDrawerLayoutAndroid &
 /**
  * @deprecated use `FlatList` instead
  */
-export const LegacyFlatList = React.forwardRef((props, ref) => {
+export const LegacyFlatList = <ItemT,>(
+  props: PropsWithChildren<
+    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
+      NativeViewGestureHandlerProps & {
+        ref?: React.Ref<RNFlatList<ItemT> | null>;
+      }
+  >
+): ReactElement | null => {
   const refreshControlGestureRef = React.useRef<LegacyRefreshControl>(null);
 
   const { waitFor, refreshControl, ...rest } = props;
@@ -135,7 +137,6 @@ export const LegacyFlatList = React.forwardRef((props, ref) => {
   return (
     // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
-      ref={ref}
       {...flatListProps}
       renderScrollComponent={(scrollProps) => (
         <LegacyScrollView
@@ -157,14 +158,8 @@ export const LegacyFlatList = React.forwardRef((props, ref) => {
       }
     />
   );
-}) as <ItemT = any>(
-  props: PropsWithChildren<
-    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
-      RefAttributes<LegacyFlatList<ItemT>> &
-      NativeViewGestureHandlerProps
-  >,
-  ref?: ForwardedRef<LegacyFlatList<ItemT>>
-) => ReactElement | null;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type LegacyFlatList<ItemT = any> = typeof LegacyFlatList &
   RNFlatList<ItemT>;

packages/react-native-gesture-handler/src/components/GestureComponents.web.tsx

@@ -50,14 +50,11 @@ export const LegacyRefreshControl = createNativeWrapper(View);
 /**
  * @deprecated use `FlatList` instead
  */
-export const LegacyFlatList = React.forwardRef(
-  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => (
-        <LegacyScrollView {...scrollProps} />
-      )}
-    />
-  )
+export const LegacyFlatList = <ItemT,>(props: FlatListProps<ItemT>) => (
+  <RNFlatList
+    {...props}
+    renderScrollComponent={(scrollProps) => (
+      <LegacyScrollView {...scrollProps} />
+    )}
+  />
 );

packages/react-native-gesture-handler/src/components/GestureHandlerRootView.tsx

@@ -13,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }
 

packages/react-native-gesture-handler/src/components/GestureHandlerRootView.web.tsx

@@ -13,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }