RN: Prefer Destructured Import for createElement

packages/react-native-fantom/src/__tests__/Fantom-itest.js

@@ -16,6 +16,7 @@ import type {HostInstance} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
+import {createRef} from 'react';
 import {LogBox, Modal, ScrollView, Text, TextInput, View} from 'react-native';
 import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
 import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
@@ -552,7 +553,7 @@ describe('Fantom', () => {
 
       let focusEvent = jest.fn();
 
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
 
       Fantom.runTask(() => {
         root.render(<TextInput onFocus={focusEvent} ref={ref} />);
@@ -576,7 +577,7 @@ describe('Fantom', () => {
 
     it('sends event with payload', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
       const onChange = jest.fn();
 
       Fantom.runTask(() => {
@@ -607,7 +608,7 @@ describe('Fantom', () => {
 
     it('it batches events with isUnique option', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
       const onScroll = jest.fn();
 
       Fantom.runTask(() => {
@@ -666,7 +667,7 @@ describe('Fantom', () => {
   describe('dispatchNativeEvent', () => {
     it('flushes the event and runs the work loop', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
 
       let focusEvent = jest.fn();
 
@@ -687,7 +688,7 @@ describe('Fantom', () => {
   describe('enqueueScrollEvent', () => {
     it('throws error if called on node that is not scroll view', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
 
       Fantom.runTask(() => {
         root.render(<View ref={ref} />);
@@ -709,8 +710,8 @@ describe('Fantom', () => {
 
     it('delivers onScroll event and affects position of elements on screen', () => {
       const root = Fantom.createRoot();
-      const viewRef = React.createRef<HostInstance>();
-      const scrollViewRef = React.createRef<HostInstance>();
+      const viewRef = createRef<HostInstance>();
+      const scrollViewRef = createRef<HostInstance>();
       const onScroll = jest.fn();
 
       Fantom.runTask(() => {
@@ -778,7 +779,7 @@ describe('Fantom', () => {
   describe('scrollTo', () => {
     it('throws error if called on node that is not scroll view', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
 
       Fantom.runTask(() => {
         root.render(<View ref={ref} />);
@@ -798,8 +799,8 @@ describe('Fantom', () => {
 
     it('delivers onScroll event and affects position of elements on screen', () => {
       const root = Fantom.createRoot();
-      const scrollViewRef = React.createRef<HostInstance>();
-      const viewRef = React.createRef<HostInstance>();
+      const scrollViewRef = createRef<HostInstance>();
+      const viewRef = createRef<HostInstance>();
       const onScroll = jest.fn();
 
       Fantom.runTask(() => {
@@ -890,7 +891,7 @@ describe('Fantom', () => {
   describe('enqueueModalSizeUpdate', () => {
     it('throws error if called on node that is not <Modal />', () => {
       const root = Fantom.createRoot();
-      const ref = React.createRef<HostInstance>();
+      const ref = createRef<HostInstance>();
 
       Fantom.runTask(() => {
         root.render(<View ref={ref} />);
@@ -912,8 +913,8 @@ describe('Fantom', () => {
 
     it('change size of <Modal />', () => {
       const root = Fantom.createRoot();
-      const modalNodeRef = React.createRef<HostInstance>();
-      const viewNodeRef = React.createRef<HostInstance>();
+      const modalNodeRef = createRef<HostInstance>();
+      const viewNodeRef = createRef<HostInstance>();
 
       Fantom.runTask(() => {
         root.render(

packages/react-native/Libraries/Animated/components/AnimatedScrollView.js

@@ -24,7 +24,7 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import createAnimatedComponent from '../createAnimatedComponent';
 import useAnimatedProps from '../useAnimatedProps';
 import * as React from 'react';
-import {useMemo} from 'react';
+import {cloneElement, useMemo} from 'react';
 
 type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
 type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
@@ -104,7 +104,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
     const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
-      React.cloneElement(props.refreshControl, {
+      cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,
       });

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -28,6 +28,7 @@ import AndroidDrawerLayoutNativeComponent, {
 } from './AndroidDrawerLayoutNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {createRef} from 'react';
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
@@ -76,9 +77,7 @@ class DrawerLayoutAndroid
 
   // $FlowFixMe[missing-local-annot]
   _nativeRef =
-    React.createRef<
-      React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
-    >();
+    createRef<React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>>();
 
   state: DrawerLayoutAndroidState = {
     drawerOpened: false,

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -24,6 +24,7 @@ import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
 import View from '../View/View';
 import Keyboard from './Keyboard';
 import * as React from 'react';
+import {createRef} from 'react';
 
 export type KeyboardAvoidingViewProps = $ReadOnly<{
   ...ViewProps,
@@ -73,7 +74,7 @@ class KeyboardAvoidingView extends React.Component<
   constructor(props: KeyboardAvoidingViewProps) {
     super(props);
     this.state = {bottom: 0};
-    this.viewRef = React.createRef();
+    this.viewRef = createRef();
   }
 
   async _relativeKeyboardHeight(

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -24,7 +24,7 @@ import useAndroidRippleForView, {
   type PressableAndroidRippleConfig,
 } from './useAndroidRippleForView';
 import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef, useState} from 'react';
 
 type ViewStyleProp = React.ElementConfig<typeof View>['style'];
 
@@ -334,7 +334,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   return [pressed || forcePressed, setPressed];
 }
 
-const MemoedPressable = React.memo(Pressable);
+const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 
 export default (MemoedPressable: component(

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -52,6 +52,7 @@ import invariant from 'invariant';
 import memoize from 'memoize-one';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 /*
  * iOS scroll event timing nuances:
@@ -1830,7 +1831,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
         // however, the ScrollView still needs the baseStyle to be scrollable
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         // $FlowFixMe[incompatible-call]
-        return React.cloneElement(
+        return cloneElement(
           refreshControl,
           {style: StyleSheet.compose(baseStyle, outer)},
           <NativeScrollView

packages/react-native/Libraries/Components/ScrollView/ScrollViewContext.js

@@ -9,10 +9,11 @@
  */
 
 import * as React from 'react';
+import {createContext} from 'react';
 
 type Value = {horizontal: boolean} | null;
 
-const ScrollViewContext: React.Context<Value> = React.createContext(null);
+const ScrollViewContext: React.Context<Value> = createContext(null);
 if (__DEV__) {
   ScrollViewContext.displayName = 'ScrollViewContext';
 }

packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -16,7 +16,14 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import * as React from 'react';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 export type ScrollViewStickyHeaderProps = $ReadOnly<{
   children?: React.Node,
@@ -295,7 +302,7 @@ const ScrollViewStickyHeader: component(
       passthroughAnimatedPropExplicitValues={
         passthroughAnimatedPropExplicitValues
       }>
-      {React.cloneElement(child, {
+      {cloneElement(child, {
         style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout
       })}

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js

@@ -16,13 +16,14 @@ import type {HostInstance} from 'react-native';
 import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
+import {createRef} from 'react';
 import {ScrollView} from 'react-native';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('onScroll', () => {
   it('delivers onScroll event', () => {
     const root = Fantom.createRoot();
-    const scrollViewRef = React.createRef<HostInstance>();
+    const scrollViewRef = createRef<HostInstance>();
     const onScroll = jest.fn();
 
     Fantom.runTask(() => {
@@ -66,7 +67,7 @@ describe('onScroll', () => {
 
   it('batches onScroll event per UI tick', () => {
     const root = Fantom.createRoot();
-    const scrollViewRef = React.createRef<HostInstance>();
+    const scrollViewRef = createRef<HostInstance>();
     const onScroll = jest.fn();
 
     Fantom.runTask(() => {

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js

@@ -17,6 +17,7 @@ const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
 const View = require('../../View/View').default;
 const ScrollView = require('../ScrollView').default;
 const React = require('react');
+const {createRef} = require('react');
 
 describe('ScrollView', () => {
   beforeEach(() => {
@@ -42,7 +43,7 @@ describe('ScrollView', () => {
   it('mocks native methods and instance methods', async () => {
     jest.mock('../ScrollView');
 
-    const ref = React.createRef();
+    const ref = createRef();
     await create(<ScrollView ref={ref} />);
 
     expect(ref.current?.measure).toBeInstanceOf(jest.fn().constructor);
@@ -137,7 +138,7 @@ describe('ScrollView', () => {
     it('returns an instance', async () => {
       jest.dontMock('../ScrollView');
 
-      const scrollViewRef = React.createRef(null);
+      const scrollViewRef = createRef(null);
       await create(<ScrollView ref={scrollViewRef} />);
       const innerViewRef = scrollViewRef.current.getInnerViewRef();