diff --git a/packages/react-native-fantom/src/__tests__/Fantom-itest.js b/packages/react-native-fantom/src/__tests__/Fantom-itest.js index d123821bfa0d9b..3b8ac87397602d 100644 --- a/packages/react-native-fantom/src/__tests__/Fantom-itest.js +++ b/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(); + const ref = createRef(); Fantom.runTask(() => { root.render(); @@ -576,7 +577,7 @@ describe('Fantom', () => { it('sends event with payload', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); 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(); + const ref = createRef(); 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(); + const ref = createRef(); 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(); + const ref = createRef(); Fantom.runTask(() => { root.render(); @@ -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(); - const scrollViewRef = React.createRef(); + const viewRef = createRef(); + const scrollViewRef = createRef(); 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(); + const ref = createRef(); Fantom.runTask(() => { root.render(); @@ -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(); - const viewRef = React.createRef(); + const scrollViewRef = createRef(); + const viewRef = createRef(); const onScroll = jest.fn(); Fantom.runTask(() => { @@ -890,7 +891,7 @@ describe('Fantom', () => { describe('enqueueModalSizeUpdate', () => { it('throws error if called on node that is not ', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render(); @@ -912,8 +913,8 @@ describe('Fantom', () => { it('change size of ', () => { const root = Fantom.createRoot(); - const modalNodeRef = React.createRef(); - const viewNodeRef = React.createRef(); + const modalNodeRef = createRef(); + const viewNodeRef = createRef(); Fantom.runTask(() => { root.render( diff --git a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js index a509189a5d176a..14d672d97ddb73 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js +++ b/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; type AnimatedScrollViewInstance = React.ElementRef; @@ -104,7 +104,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be // safely clobbered. const refreshControl: ExactReactElement_DEPRECATED = - React.cloneElement(props.refreshControl, { + cloneElement(props.refreshControl, { ...refreshControlAnimatedProps, ref: refreshControlRef, }); diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 753983a3657a78..df181e34670ed1 100644 --- a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/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, - >(); + createRef>(); state: DrawerLayoutAndroidState = { drawerOpened: false, diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index df1fe0a47ec659..627b8232478f9e 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/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( diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index b912c5c4789fbe..3d693ae9daab82 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/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['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( diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js index e7fa9918a6bcb2..dac0a5b0103dc3 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js +++ b/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 { // 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)}, = React.createContext(null); +const ScrollViewContext: React.Context = createContext(null); if (__DEV__) { ScrollViewContext.displayName = 'ScrollViewContext'; } diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index 667884f8bdb49f..d1e5d6573f0933 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/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 })} diff --git a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js index cf7aa98a14a2b4..b317c2bc72dd77 100644 --- a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js +++ b/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(); + const scrollViewRef = createRef(); 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(); + const scrollViewRef = createRef(); const onScroll = jest.fn(); Fantom.runTask(() => { diff --git a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js index 36b2d1afa9ca13..069b1d3ce9843e 100644 --- a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-test.js +++ b/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(); 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(); const innerViewRef = scrollViewRef.current.getInnerViewRef(); diff --git a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-viewCulling-itest.js b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-viewCulling-itest.js index 3b39c83cad1774..d0c0df1c7f0776 100644 --- a/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-viewCulling-itest.js +++ b/packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-viewCulling-itest.js @@ -20,12 +20,13 @@ import ensureInstance from '../../../../src/private/__tests__/utilities/ensureIn import * as Fantom from '@react-native/fantom'; import nullthrows from 'nullthrows'; import * as React from 'react'; +import {createRef, useState} from 'react'; import {FlatList, Modal, ScrollView, View} from 'react-native'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; test('basic culling', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -79,7 +80,7 @@ test('basic culling', () => { test('recursive culling', () => { const root = Fantom.createRoot({viewportHeight: 100, viewportWidth: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -236,7 +237,7 @@ test('recursive culling', () => { test('recursive culling when initial offset is negative', () => { const root = Fantom.createRoot({viewportHeight: 874, viewportWidth: 402}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -291,7 +292,7 @@ test('recursive culling when initial offset is negative', () => { test('deep nesting', () => { const root = Fantom.createRoot({viewportHeight: 100, viewportWidth: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -458,7 +459,7 @@ test('adding new item into area that is culled', () => { }); test('initial render', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot({viewportHeight: 100, viewportWidth: 100}); Fantom.runTask(() => { @@ -542,7 +543,7 @@ test('unmounting culled elements', () => { // TODO: only elements in ScrollView are culled. test('basic culling smaller ScrollView', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); Fantom.runTask(() => { @@ -600,7 +601,7 @@ test('views are not culled when outside of viewport', () => { test('culling with transform move', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -642,7 +643,7 @@ test('culling with transform move', () => { test('culling with recursive transform move', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -687,7 +688,7 @@ test('culling with recursive transform move', () => { test('culling with transform scale', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -762,7 +763,7 @@ test('culling when ScrollView parent has transform', () => { test('culling inside of Modal', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -823,7 +824,7 @@ test('nesting inside FlatList with item resizing', () => { const root = Fantom.createRoot({viewportHeight: 100, viewportWidth: 100}); let _setIsExpanded = null; function ExpandableComponent() { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); _setIsExpanded = setIsExpanded; return {isExpanded && }; } @@ -872,7 +873,7 @@ test('nesting inside FlatList with item resizing', () => { describe('reparenting', () => { test('view flattening with culling', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -1246,7 +1247,7 @@ describe('reparenting', () => { test('parent-child flattening with child culled', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -1416,7 +1417,7 @@ describe('reparenting', () => { 'Insert {type: "ScrollView", parentNativeID: (root), index: 0, nativeID: (N/A)}', ]); - const nodeRef = React.createRef(); + const nodeRef = createRef(); // Now update opacity to unflattned the container and add a child that has a culled descendant. Fantom.runTask(() => { @@ -1497,7 +1498,7 @@ describe('reparenting', () => { 'Insert {type: "ScrollView", parentNativeID: (root), index: 0, nativeID: (N/A)}', ]); - const nodeRef = React.createRef(); + const nodeRef = createRef(); // Now update opacity to unflattned the container and add a child that has a culled descendant. Fantom.runTask(() => { @@ -1757,7 +1758,7 @@ describe('reparenting', () => { 'Insert {type: "ScrollView", parentNativeID: (root), index: 0, nativeID: (N/A)}', ]); - const nodeRef = React.createRef(); + const nodeRef = createRef(); // Now change unflattened view container to flattened and change its child to be unflattened. Fantom.runTask(() => { @@ -1847,7 +1848,7 @@ describe('reparenting', () => { 'Insert {type: "ScrollView", parentNativeID: (root), index: 0, nativeID: (N/A)}', ]); - const nodeRef = React.createRef(); + const nodeRef = createRef(); // Now change unflattened view container to flattened and change its child to be unflattened. Fantom.runTask(() => { @@ -2025,7 +2026,7 @@ describe('reparenting', () => { test('reparenting with reparented subtree changing its marginTop', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( @@ -2112,7 +2113,7 @@ describe('reparenting', () => { test('reparenting deep tree with reparented subtree changing its marginTop', () => { const root = Fantom.createRoot({viewportWidth: 100, viewportHeight: 100}); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render( diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 94fd01ff3b6299..f0aa13ff6a1e26 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -60,7 +60,7 @@ import TextInputState from './TextInputState'; import invariant from 'invariant'; import nullthrows from 'nullthrows'; import * as React from 'react'; -import {useCallback, useLayoutEffect, useRef, useState} from 'react'; +import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react'; let AndroidTextInput; let AndroidTextInputCommands; @@ -578,7 +578,7 @@ function InternalTextInput(props: TextInputProps): React.Node { rejectResponderTermination, } = props; - const config = React.useMemo( + const config = useMemo( () => ({ hitSlop, onPress: (event: GestureResponderEvent) => { diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js index 86c5506cacbb17..281666675f16bb 100644 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js +++ b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js @@ -16,7 +16,7 @@ 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 {useEffect, useLayoutEffect, useRef} from 'react'; +import {createRef, useEffect, useLayoutEffect, useRef} from 'react'; import {TextInput} from 'react-native'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -102,7 +102,7 @@ describe('focus view command', () => { describe('focus and blur event', () => { it('sends focus and blur events', () => { const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); let focusEvent = jest.fn(); let blurEvent = jest.fn(); @@ -145,7 +145,7 @@ describe('focus and blur event', () => { describe('onChange', () => { it('delivers onChange event', () => { const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); const onChange = jest.fn(); Fantom.runTask(() => { @@ -178,7 +178,7 @@ describe('onChange', () => { describe('onChangeText', () => { it('delivers onChangeText event', () => { const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); const onChangeText = jest.fn(); Fantom.runTask(() => { diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js index 6ecf33c65b15b0..77c93798284e05 100644 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js +++ b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js @@ -15,6 +15,7 @@ const { } = require('../../../Utilities/ReactNativeTestTools'); const TextInput = require('../TextInput').default; const React = require('react'); +const {createRef, useState} = require('react'); const ReactTestRenderer = require('react-test-renderer'); jest.unmock('../TextInput'); @@ -29,12 +30,12 @@ jest.unmock('../TextInput'); beforeEach(async () => { jest.resetModules(); - inputRef = React.createRef(null); + inputRef = createRef(null); onChangeListener = jest.fn(); onChangeTextListener = jest.fn(); function TextInputWrapper() { - const [state, setState] = React.useState({text: initialValue}); + const [state, setState] = useState({text: initialValue}); return ( { - const textInputRe1 = React.createRef(null); - const textInputRe2 = React.createRef(null); + const textInputRe1 = createRef(null); + const textInputRe2 = createRef(null); await create( <> diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js index 28314ffde101b9..6d81eead72ba7b 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js @@ -19,6 +19,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet'; import Platform from '../../Utilities/Platform'; import * as React from 'react'; +import {cloneElement} from 'react'; type AndroidProps = $ReadOnly<{ nextFocusDown?: ?number, @@ -371,7 +372,7 @@ class TouchableHighlightImpl extends React.Component< testID={this.props.testID} ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> - {React.cloneElement(child, { + {cloneElement(child, { style: StyleSheet.compose( child.props.style, this.state.extraStyles?.child, diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js index 1cc6533cd9eb75..4de3b0c790bd41 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js @@ -22,6 +22,7 @@ import Platform from '../../Utilities/Platform'; import {Commands} from '../View/ViewNativeComponent'; import invariant from 'invariant'; import * as React from 'react'; +import {cloneElement} from 'react'; type TVProps = { /** @@ -334,7 +335,7 @@ class TouchableNativeFeedback extends React.Component< const accessibilityLabel = this.props['aria-label'] ?? this.props.accessibilityLabel; - return React.cloneElement( + return cloneElement( element, { ...eventHandlersWithoutBlurAndFocus, diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 037ac5255c1efc..4fe0ac14683827 100755 --- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -23,7 +23,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; import usePressability from '../../Pressability/usePressability'; import {type ViewStyleProp} from '../../StyleSheet/StyleSheet'; import * as React from 'react'; -import {useMemo} from 'react'; +import {cloneElement, useMemo} from 'react'; export type TouchableWithoutFeedbackPropsIOS = {}; @@ -283,5 +283,5 @@ export default function TouchableWithoutFeedback( } // $FlowFixMe[incompatible-call] - return React.cloneElement(element, elementProps, ...children); + return cloneElement(element, elementProps, ...children); } diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js index 4bb849949195cb..2874f59fabc06a 100644 --- a/packages/react-native/Libraries/Components/View/View.js +++ b/packages/react-native/Libraries/Components/View/View.js @@ -14,6 +14,7 @@ import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/Reac import TextAncestor from '../../Text/TextAncestor'; import ViewNativeComponent from './ViewNativeComponent'; import * as React from 'react'; +import {use} from 'react'; export type Props = ViewProps; @@ -30,7 +31,7 @@ type PropsWithRef = $ReadOnly<{ * @see https://reactnative.dev/docs/view */ function View(props: PropsWithRef): React.Node { - const hasTextAncestor = React.use(TextAncestor); + const hasTextAncestor = use(TextAncestor); let actualView; if (ReactNativeFeatureFlags.reduceDefaultPropsInView()) { diff --git a/packages/react-native/Libraries/Image/ImageAnalyticsTagContext.js b/packages/react-native/Libraries/Image/ImageAnalyticsTagContext.js index 81ecba24da5ea0..9cc314b962e2ca 100644 --- a/packages/react-native/Libraries/Image/ImageAnalyticsTagContext.js +++ b/packages/react-native/Libraries/Image/ImageAnalyticsTagContext.js @@ -9,11 +9,11 @@ */ import * as React from 'react'; +import {createContext} from 'react'; type ContextType = ?string; -const Context: React.Context = - React.createContext(null); +const Context: React.Context = createContext(null); if (__DEV__) { Context.displayName = 'ImageAnalyticsTagContext'; diff --git a/packages/react-native/Libraries/Lists/__tests__/FlatList-test.js b/packages/react-native/Libraries/Lists/__tests__/FlatList-test.js index c34d0edfe256bf..f3a642f741de95 100644 --- a/packages/react-native/Libraries/Lists/__tests__/FlatList-test.js +++ b/packages/react-native/Libraries/Lists/__tests__/FlatList-test.js @@ -13,6 +13,7 @@ const {create} = require('../../../jest/renderer'); const FlatList = require('../FlatList').default; const React = require('react'); +const {createRef} = require('react'); describe('FlatList', () => { it('renders simple list', async () => { @@ -96,7 +97,7 @@ describe('FlatList', () => { jest.resetModules(); jest.unmock('../../Components/ScrollView/ScrollView'); - const listRef = React.createRef(null); + const listRef = createRef(null); await create( { function ListItemComponent({item}) { return ; } - const listRef = React.createRef(null); + const listRef = createRef(null); await create( ; function LogBoxButton(props: Props): React.Node { - const [pressed, setPressed] = React.useState(false); + const [pressed, setPressed] = useState(false); let backgroundColor = props.backgroundColor; if (!backgroundColor) { diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js index 1490cc571394ad..d9e0b1a59d5b2b 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js @@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton'; import LogBoxInspectorSection from './LogBoxInspectorSection'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; +import {useState} from 'react'; type Props = $ReadOnly<{ log: LogBoxLog, @@ -49,7 +50,7 @@ function getPrettyFileName(path: string) { return fileName; } function LogBoxInspectorReactFrames(props: Props): React.Node { - const [collapsed, setCollapsed] = React.useState(true); + const [collapsed, setCollapsed] = useState(true); if ( props.log.getAvailableComponentStack() == null || props.log.getAvailableComponentStack().length < 1 diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js index 6831eb70304c2e..678a9b0f186f21 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js @@ -17,6 +17,7 @@ import Text from '../../Text/Text'; import LogBoxButton from './LogBoxButton'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; +import {useEffect, useState} from 'react'; type Props = $ReadOnly<{ onPress?: ?(event: GestureResponderEvent) => void, @@ -24,12 +25,12 @@ type Props = $ReadOnly<{ }>; function LogBoxInspectorSourceMapStatus(props: Props): React.Node { - const [state, setState] = React.useState({ + const [state, setState] = useState({ animation: null, rotate: null, }); - React.useEffect(() => { + useEffect(() => { if (props.status === 'PENDING') { if (state.animation == null) { const animated = new Animated.Value(0); diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js index 0a11fbab799022..48c1b849332cfa 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js @@ -22,6 +22,7 @@ import LogBoxInspectorSourceMapStatus from './LogBoxInspectorSourceMapStatus'; import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; +import {useState} from 'react'; type Props = $ReadOnly<{ log: LogBoxLog, @@ -65,7 +66,7 @@ export function getCollapseMessage( } function LogBoxInspectorStackFrames(props: Props): React.Node { - const [collapsed, setCollapsed] = React.useState(() => { + const [collapsed, setCollapsed] = useState(() => { // Only collapse frames initially if some frames are not collapsed. return props.log.getAvailableStack().some(({collapse}) => !collapse); }); diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js index 1163a4cdac2a28..feef700605079a 100644 --- a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js +++ b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js @@ -24,6 +24,7 @@ import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer'; import StyleSheet from '../StyleSheet/StyleSheet'; import {RootTagContext, createRootTag} from './RootTag'; import * as React from 'react'; +import {useRef} from 'react'; const {useEffect, useState, useCallback} = React; @@ -95,9 +96,9 @@ const AppContainer = ({ WrapperComponent, rootViewStyle, }: Props): React.Node => { - const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null); - const innerViewRef: InspectedViewRef = React.useRef(null); - const debuggingOverlayRef: DebuggingOverlayRef = React.useRef(null); + const appContainerRootViewRef: AppContainerRootViewRef = useRef(null); + const innerViewRef: InspectedViewRef = useRef(null); + const debuggingOverlayRef: DebuggingOverlayRef = useRef(null); useSubscribeToDebuggingOverlayRegistry( appContainerRootViewRef, diff --git a/packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/__tests__/setUpReactFabricPublicInstanceFantomTests.js b/packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/__tests__/setUpReactFabricPublicInstanceFantomTests.js index 2d67903ca992ef..4d83b608564d9b 100644 --- a/packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/__tests__/setUpReactFabricPublicInstanceFantomTests.js +++ b/packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/__tests__/setUpReactFabricPublicInstanceFantomTests.js @@ -21,12 +21,13 @@ import ReactFabricHostComponent from '../ReactFabricHostComponent'; import * as Fantom from '@react-native/fantom'; import nullthrows from 'nullthrows'; import * as React from 'react'; +import {createRef} from 'react'; export default function setUpTests({isModern}: {isModern: boolean}) { // TODO: move these tests to the test file for `ReactNativeElement` when the legacy implementation is removed. describe(`ReactFabricPublicInstance (${isModern ? 'modern' : 'legacy'})`, () => { it('should provide instances of the right class as refs in host components', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -43,7 +44,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('blur', () => { test('blur() invokes TextInputState', () => { const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render(); @@ -68,7 +69,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('focus', () => { test('focus() invokes TextInputState', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render(); @@ -93,7 +94,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('measure', () => { it('component.measure(...) invokes callback', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render( @@ -115,7 +116,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { it('unmounted.measure(...) does nothing', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render( @@ -142,7 +143,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('measureInWindow', () => { it('component.measureInWindow(...) invokes callback', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render( @@ -164,7 +165,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { it('unmounted.measureInWindow(...) does nothing', () => { const root = Fantom.createRoot(); - const ref = React.createRef(); + const ref = createRef(); Fantom.runTask(() => { root.render( @@ -191,8 +192,8 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('measureLayout', () => { it('component.measureLayout(component, ...) invokes callback', () => { const root = Fantom.createRoot(); - const parentRef = React.createRef(); - const childRef = React.createRef(); + const parentRef = createRef(); + const childRef = createRef(); Fantom.runTask(() => { root.render( @@ -219,8 +220,8 @@ export default function setUpTests({isModern}: {isModern: boolean}) { it('unmounted.measureLayout(component, ...) does nothing', () => { const root = Fantom.createRoot(); - const parentRef = React.createRef(); - const childRef = React.createRef(); + const parentRef = createRef(); + const childRef = createRef(); Fantom.runTask(() => { root.render( @@ -252,8 +253,8 @@ export default function setUpTests({isModern}: {isModern: boolean}) { it('component.measureLayout(unmounted, ...) does nothing', () => { const root = Fantom.createRoot(); - const parentRef = React.createRef(); - const childRef = React.createRef(); + const parentRef = createRef(); + const childRef = createRef(); Fantom.runTask(() => { root.render( @@ -285,8 +286,8 @@ export default function setUpTests({isModern}: {isModern: boolean}) { it('unmounted.measureLayout(unmounted, ...) does nothing', () => { const root = Fantom.createRoot(); - const parentRef = React.createRef(); - const childRef = React.createRef(); + const parentRef = createRef(); + const childRef = createRef(); Fantom.runTask(() => { root.render( @@ -318,7 +319,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { describe('setNativeProps', () => { it('should propagate changes to the host component', () => { const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render(); @@ -370,7 +371,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) { expect(RawNativeDOM.setNativeProps).toBeNull(); const root = Fantom.createRoot(); - const nodeRef = React.createRef(); + const nodeRef = createRef(); Fantom.runTask(() => { root.render(); diff --git a/packages/react-native/Libraries/ReactNative/RootTag.js b/packages/react-native/Libraries/ReactNative/RootTag.js index c1b655d21c9314..843489917fa362 100644 --- a/packages/react-native/Libraries/ReactNative/RootTag.js +++ b/packages/react-native/Libraries/ReactNative/RootTag.js @@ -9,11 +9,11 @@ */ import * as React from 'react'; +import {createContext} from 'react'; export opaque type RootTag = number; -export const RootTagContext: React.Context = - React.createContext(0); +export const RootTagContext: React.Context = createContext(0); if (__DEV__) { RootTagContext.displayName = 'RootTagContext'; diff --git a/packages/react-native/Libraries/ReactNative/__tests__/InterruptibleRendering-itest.js b/packages/react-native/Libraries/ReactNative/__tests__/InterruptibleRendering-itest.js index 91ed242cc3491e..d9d0d7efee881b 100644 --- a/packages/react-native/Libraries/ReactNative/__tests__/InterruptibleRendering-itest.js +++ b/packages/react-native/Libraries/ReactNative/__tests__/InterruptibleRendering-itest.js @@ -17,7 +17,13 @@ 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 {startTransition, useDeferredValue, useEffect, useState} from 'react'; +import { + createRef, + startTransition, + useDeferredValue, + useEffect, + useState, +} from 'react'; import {Text, TextInput} from 'react-native'; import {NativeEventCategory} from 'react-native/src/private/testing/fantom/specs/NativeFantom'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -29,9 +35,9 @@ function ensureReactNativeElement(value: mixed): ReactNativeElement { describe('discrete event category', () => { it('interrupts React rendering and higher priority update is committed first', () => { const root = Fantom.createRoot(); - const textInputRef = React.createRef(); - const importantTextNodeRef = React.createRef(); - const deferredTextNodeRef = React.createRef(); + const textInputRef = createRef(); + const importantTextNodeRef = createRef(); + const deferredTextNodeRef = createRef(); let interruptRendering = false; let effectMock = jest.fn(); let afterUpdate; @@ -134,9 +140,9 @@ describe('discrete event category', () => { describe('continuous event category', () => { it('interrupts React rendering but update from continous event is delayed', () => { const root = Fantom.createRoot(); - const textInputRef = React.createRef(); - const importantTextNodeRef = React.createRef(); - const deferredTextNodeRef = React.createRef(); + const textInputRef = createRef(); + const importantTextNodeRef = createRef(); + const deferredTextNodeRef = createRef(); let interruptRendering = false; let effectMock = jest.fn(); diff --git a/packages/react-native/Libraries/ReactNative/__tests__/State-ForcedCloneCommitHook-itest.js b/packages/react-native/Libraries/ReactNative/__tests__/State-ForcedCloneCommitHook-itest.js index 45a775439b5370..df0bee6ce4d204 100644 --- a/packages/react-native/Libraries/ReactNative/__tests__/State-ForcedCloneCommitHook-itest.js +++ b/packages/react-native/Libraries/ReactNative/__tests__/State-ForcedCloneCommitHook-itest.js @@ -17,6 +17,7 @@ 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, View} from 'react-native'; import NativeFantomTestSpecificMethods from 'react-native/src/private/testing/fantom/specs/NativeFantomTestSpecificMethods'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -26,7 +27,7 @@ NativeFantomTestSpecificMethods.registerForcedCloneCommitHook(); describe('ScrollViewShadowNode', () => { it('maintains state after commit hook processing', () => { const root = Fantom.createRoot(); - const scrollViewRef = React.createRef(); + const scrollViewRef = createRef(); Fantom.runTask(() => { root.render( diff --git a/packages/react-native/Libraries/Text/TextAncestor.js b/packages/react-native/Libraries/Text/TextAncestor.js index 105ee7d4883829..c1fd4216c357ad 100644 --- a/packages/react-native/Libraries/Text/TextAncestor.js +++ b/packages/react-native/Libraries/Text/TextAncestor.js @@ -10,12 +10,13 @@ 'use strict'; -const React = require('react'); +import * as React from 'react'; +import {createContext} from 'react'; /** * Whether the current element is the descendant of a element. */ -const TextAncestorContext: React.Context = React.createContext(false); +const TextAncestorContext: React.Context = createContext(false); if (__DEV__) { TextAncestorContext.displayName = 'TextAncestorContext'; } diff --git a/packages/react-native/Libraries/Utilities/PerformanceLoggerContext.js b/packages/react-native/Libraries/Utilities/PerformanceLoggerContext.js index cb17ae33076db7..f0baf48ff3ef89 100644 --- a/packages/react-native/Libraries/Utilities/PerformanceLoggerContext.js +++ b/packages/react-native/Libraries/Utilities/PerformanceLoggerContext.js @@ -12,7 +12,7 @@ import type {IPerformanceLogger} from './createPerformanceLogger'; import GlobalPerformanceLogger from './GlobalPerformanceLogger'; import * as React from 'react'; -import {useContext} from 'react'; +import {createContext, useContext} from 'react'; /** * This is a React Context that provides a scoped instance of IPerformanceLogger. @@ -21,7 +21,7 @@ import {useContext} from 'react'; * See React docs about using Context: https://react.dev/docs/context.html */ const PerformanceLoggerContext: React.Context = - React.createContext(GlobalPerformanceLogger); + createContext(GlobalPerformanceLogger); if (__DEV__) { PerformanceLoggerContext.displayName = 'PerformanceLoggerContext'; } diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 4b1035b4ce691e..9e0ff4f8979d04 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -7831,8 +7831,7 @@ declare export default typeof TextImpl; `; exports[`public API should not change unintentionally Libraries/Text/TextAncestor.js 1`] = ` -"declare const React: $FlowFixMe; -declare const TextAncestorContext: React.Context; +"declare const TextAncestorContext: React.Context; declare export default typeof TextAncestorContext; " `; diff --git a/packages/react-native/jest/mockNativeComponent.js b/packages/react-native/jest/mockNativeComponent.js index da1cf85e2025a5..ea5dd406f42db6 100644 --- a/packages/react-native/jest/mockNativeComponent.js +++ b/packages/react-native/jest/mockNativeComponent.js @@ -10,6 +10,7 @@ 'use strict'; const React = require('react'); +const {createElement} = require('react'); let nativeTag = 1; @@ -18,7 +19,7 @@ export default viewName => { _nativeTag = nativeTag++; render() { - return React.createElement(viewName, this.props, this.props.children); + return createElement(viewName, this.props, this.props.children); } // The methods that exist on host components diff --git a/packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js b/packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js index 442c4a8fca5c90..5edba8b0437a24 100644 --- a/packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js +++ b/packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js @@ -77,7 +77,7 @@ describe('Native Animated', () => { const {Animated} = importModules(); const opacity = new Animated.Value(0); - const ref = React.createRef(null); + const ref = createRef(null); Animated.timing(opacity, { toValue: 10, @@ -1085,7 +1085,7 @@ describe('Native Animated', () => { const {Animated} = importModules(); const opacity = new Animated.Value(0); - const ref = React.createRef(null); + const ref = createRef(null); await create(); diff --git a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js index 9ebdac4f99a98b..64adcf3aa80363 100644 --- a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js +++ b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js @@ -18,6 +18,7 @@ import isUnreachable from '../../../../__tests__/utilities/isUnreachable'; import * as Fantom from '@react-native/fantom'; import nullthrows from 'nullthrows'; import * as React from 'react'; +import {createRef} from 'react'; import {View} from 'react-native'; import ReactNativeDocument from 'react-native/src/private/webapis/dom/nodes/ReactNativeDocument'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -25,7 +26,7 @@ import ReadOnlyNode from 'react-native/src/private/webapis/dom/nodes/ReadOnlyNod describe('ReactNativeDocument', () => { it('is connected until the surface is destroyed', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -51,7 +52,7 @@ describe('ReactNativeDocument', () => { }); it('allows traversal as a regular node', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -70,7 +71,7 @@ describe('ReactNativeDocument', () => { }); it('allows traversal through document-specific methods', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -88,7 +89,7 @@ describe('ReactNativeDocument', () => { }); it('implements the abstract methods from ReadOnlyNode', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -105,7 +106,7 @@ describe('ReactNativeDocument', () => { }); it('provides a documentElement node that behaves like a regular element', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot({viewportWidth: 200, viewportHeight: 100}); Fantom.runTask(() => { @@ -125,7 +126,7 @@ describe('ReactNativeDocument', () => { }); it('implements compareDocumentPosition correctly', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -172,7 +173,7 @@ describe('ReactNativeDocument', () => { }); it('is released when the root is destroyed', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { diff --git a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeElement-itest.js b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeElement-itest.js index f45a6bf57903e5..b8ad745a9e7867 100644 --- a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeElement-itest.js +++ b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeElement-itest.js @@ -16,6 +16,7 @@ import type {HostInstance} from 'react-native'; import ensureInstance from '../../../../__tests__/utilities/ensureInstance'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; +import {createRef} from 'react'; import {ScrollView, View} from 'react-native'; import { NativeText, @@ -35,7 +36,7 @@ function ensureReactNativeElement(value: mixed): ReactNativeElement { describe('ReactNativeElement', () => { it('should be used to create public instances when the `enableAccessToHostTreeInFabric` feature flag is enabled', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -47,7 +48,7 @@ describe('ReactNativeElement', () => { describe('extends `ReadOnlyNode`', () => { it('should be an instance of `ReadOnlyNode`', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -59,10 +60,10 @@ describe('ReactNativeElement', () => { describe('nodeType', () => { it('returns ReadOnlyNode.ELEMENT_NODE', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); - const childNodeBRef = React.createRef(); - const childNodeCRef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); + const childNodeBRef = createRef(); + const childNodeCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -90,10 +91,10 @@ describe('ReactNativeElement', () => { describe('nodeValue', () => { it('returns null', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); - const childNodeBRef = React.createRef(); - const childNodeCRef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); + const childNodeBRef = createRef(); + const childNodeCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -121,10 +122,10 @@ describe('ReactNativeElement', () => { describe('childNodes / hasChildNodes()', () => { it('returns updated child nodes information', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); - const childNodeBRef = React.createRef(); - const childNodeCRef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); + const childNodeBRef = createRef(); + const childNodeCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -186,10 +187,10 @@ describe('ReactNativeElement', () => { describe('getRootNode()', () => { // This is the desired implementation (not implemented yet). it('returns a root node representing the document', () => { - const parentANodeRef = React.createRef(); - const parentBNodeRef = React.createRef(); - const childANodeRef = React.createRef(); - const childBNodeRef = React.createRef(); + const parentANodeRef = createRef(); + const parentBNodeRef = createRef(); + const childANodeRef = createRef(); + const childBNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -244,10 +245,10 @@ describe('ReactNativeElement', () => { describe('firstChild / lastChild / previousSibling / nextSibling / parentNode / parentElement', () => { it('return updated relative nodes', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); - const childNodeBRef = React.createRef(); - const childNodeCRef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); + const childNodeBRef = createRef(); + const childNodeCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -382,11 +383,11 @@ describe('ReactNativeElement', () => { describe('compareDocumentPosition / contains', () => { it('handles containment, order and connection', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); - const childNodeAARef = React.createRef(); - const childNodeBRef = React.createRef(); - const childNodeBBRef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); + const childNodeAARef = createRef(); + const childNodeBRef = createRef(); + const childNodeBBRef = createRef(); // Initial render with 2 children const root = Fantom.createRoot(); @@ -491,7 +492,7 @@ describe('ReactNativeElement', () => { expect(childNodeBB.compareDocumentPosition(childNodeBB)).toBe(0); expect(childNodeBB.contains(childNodeBB)).toBe(true); - const altParentNodeRef = React.createRef(); + const altParentNodeRef = createRef(); // Similar structure in a different tree const root2 = Fantom.createRoot(); @@ -548,7 +549,7 @@ describe('ReactNativeElement', () => { describe('extends `ReadOnlyElement`', () => { it('should be an instance of `ReadOnlyElement`', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -560,10 +561,10 @@ describe('ReactNativeElement', () => { describe('children / childElementCount', () => { it('return updated element children information', () => { - const parentRef = React.createRef(); - const childElementARef = React.createRef(); - const childElementBRef = React.createRef(); - const childElementCRef = React.createRef(); + const parentRef = createRef(); + const childElementARef = createRef(); + const childElementBRef = createRef(); + const childElementCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -630,10 +631,10 @@ describe('ReactNativeElement', () => { describe('firstElementChild / lastElementChild / previousElementSibling / nextElementSibling', () => { it('return updated relative elements', () => { - const parentRef = React.createRef(); - const childElementARef = React.createRef(); - const childElementBRef = React.createRef(); - const childElementCRef = React.createRef(); + const parentRef = createRef(); + const childElementARef = createRef(); + const childElementBRef = createRef(); + const childElementCRef = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -742,8 +743,8 @@ describe('ReactNativeElement', () => { describe('textContent', () => { it('should return the concatenated values of all its text node descendants (using DFS)', () => { - const parentRef = React.createRef(); - const childNodeARef = React.createRef(); + const parentRef = createRef(); + const childNodeARef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -763,7 +764,7 @@ describe('ReactNativeElement', () => { expect(parentNode.textContent).toBe('Hello world!'); expect(childNodeA.textContent).toBe('world!'); - const childNodeBRef = React.createRef(); + const childNodeBRef = createRef(); Fantom.runTask(() => { root.render( @@ -793,7 +794,7 @@ describe('ReactNativeElement', () => { describe('getBoundingClientRect', () => { it('returns a DOMRect with its size and position, or an empty DOMRect when disconnected', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); @@ -837,7 +838,7 @@ describe('ReactNativeElement', () => { describe('scrollLeft / scrollTop', () => { it('return the scroll position on each axis', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -866,7 +867,7 @@ describe('ReactNativeElement', () => { describe('scrollWidth / scrollHeight', () => { it('return the scroll size on each axis', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -896,7 +897,7 @@ describe('ReactNativeElement', () => { describe('clientWidth / clientHeight', () => { it('return the inner size of the node', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -928,7 +929,7 @@ describe('ReactNativeElement', () => { describe('clientLeft / clientTop', () => { it('return the border size of the node', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -960,7 +961,7 @@ describe('ReactNativeElement', () => { describe('id', () => { it('returns the current `id` prop from the node', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -979,7 +980,7 @@ describe('ReactNativeElement', () => { }); it('returns the current `nativeID` prop from the node', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1000,7 +1001,7 @@ describe('ReactNativeElement', () => { describe('tagName', () => { it('returns the normalized tag name for the node', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1016,7 +1017,7 @@ describe('ReactNativeElement', () => { describe('extends `ReactNativeElement`', () => { it('should be an instance of `ReactNativeElement`', () => { - const ref = React.createRef(); + const ref = createRef(); // Initial render with 3 children const root = Fantom.createRoot(); @@ -1030,7 +1031,7 @@ describe('ReactNativeElement', () => { describe('offsetWidth / offsetHeight', () => { it('return the rounded width and height, or 0 when disconnected', () => { - const elementRef = React.createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1065,8 +1066,8 @@ describe('ReactNativeElement', () => { describe('offsetParent / offsetTop / offsetLeft', () => { it('retun the rounded offset values and the parent, or null and zeros when disconnected or hidden', () => { - const parentRef = React.createRef(); - const elementRef = React.createRef(); + const parentRef = createRef(); + const elementRef = createRef(); const root = Fantom.createRoot(); diff --git a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReadOnlyText-itest.js b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReadOnlyText-itest.js index 0490f2e7f20935..0f0a0fa7efc1f7 100644 --- a/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReadOnlyText-itest.js +++ b/packages/react-native/src/private/webapis/dom/nodes/__tests__/ReadOnlyText-itest.js @@ -17,6 +17,7 @@ import ensureInstance from '../../../../__tests__/utilities/ensureInstance'; import * as Fantom from '@react-native/fantom'; import invariant from 'invariant'; import * as React from 'react'; +import {createRef} from 'react'; import {NativeText} from 'react-native/Libraries/Text/TextNativeComponent'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; import ReadOnlyNode from 'react-native/src/private/webapis/dom/nodes/ReadOnlyNode'; @@ -36,7 +37,7 @@ function ensureReactNativeElement(value: mixed): ReactNativeElement { describe('ReadOnlyText', () => { it('should be used to create public text instances when the `enableAccessToHostTreeInFabric` feature flag is enabled', () => { - const parentNodeRef = React.createRef(); + const parentNodeRef = createRef(); const root = Fantom.createRoot(); @@ -53,7 +54,7 @@ describe('ReadOnlyText', () => { describe('extends `ReadOnlyNode`', () => { describe('nodeName', () => { it('returns "#text"', () => { - const parentNodeRef = React.createRef(); + const parentNodeRef = createRef(); const root = Fantom.createRoot(); @@ -70,7 +71,7 @@ describe('ReadOnlyText', () => { describe('nodeType', () => { it('returns ReadOnlyNode.TEXT_NODE', () => { - const parentNodeRef = React.createRef(); + const parentNodeRef = createRef(); const root = Fantom.createRoot(); @@ -87,7 +88,7 @@ describe('ReadOnlyText', () => { describe('nodeValue / textContent', () => { it('returns the string data contained in the node', () => { - const parentNodeRef = React.createRef(); + const parentNodeRef = createRef(); const root = Fantom.createRoot(); @@ -105,8 +106,8 @@ describe('ReadOnlyText', () => { describe('traversal', () => { it('only preserves text nodes when their contents do not change', () => { - const parentElementRef = React.createRef(); - const childElementARef = React.createRef(); + const parentElementRef = createRef(); + const childElementARef = createRef(); const root = Fantom.createRoot(); @@ -174,7 +175,7 @@ describe('ReadOnlyText', () => { describe('extends `ReadOnlyCharacterData`', () => { describe('data / length', () => { it('returns the string data and its length, respectively', () => { - const parentNodeRef = React.createRef(); + const parentNodeRef = createRef(); const root = Fantom.createRoot(); @@ -194,10 +195,10 @@ describe('ReadOnlyText', () => { describe('previousElementSibling / nextElementSibling', () => { it('return updated relative elements', () => { - const parentElementRef = React.createRef(); - const childElementARef = React.createRef(); - const childElementBRef = React.createRef(); - const childElementCRef = React.createRef(); + const parentElementRef = createRef(); + const childElementARef = createRef(); + const childElementBRef = createRef(); + const childElementCRef = createRef(); const root = Fantom.createRoot(); @@ -276,7 +277,7 @@ describe('ReadOnlyText', () => { describe('substringData', () => { it('returns a slice of the text content', () => { - const parentElementRef = React.createRef(); + const parentElementRef = createRef(); const root = Fantom.createRoot(); diff --git a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-benchmark-itest.js b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-benchmark-itest.js index 00f90f8c989051..8b4688f7eb4245 100644 --- a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-benchmark-itest.js +++ b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-benchmark-itest.js @@ -19,6 +19,7 @@ import type IntersectionObserverType from 'react-native/src/private/webapis/inte import ensureInstance from '../../../__tests__/utilities/ensureInstance'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; +import {createRef} from 'react'; import ScrollView from 'react-native/Libraries/Components/ScrollView/ScrollView'; import View from 'react-native/Libraries/Components/View/View'; import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver'; @@ -28,10 +29,10 @@ declare const IntersectionObserver: Class; setUpIntersectionObserver(); -const nodeRef = React.createRef(); +const nodeRef = createRef(); let node: ReactNativeElement; -const scrollViewRef = React.createRef(); +const scrollViewRef = createRef(); let scrollViewNode: ReactNativeElement; let observer: IntersectionObserverType; const VIEWPORT_HEIGHT = 100; diff --git a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js index 3c118ce89308c6..c096237bff5f7a 100644 --- a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js +++ b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js @@ -19,6 +19,7 @@ import ensureInstance from '../../../__tests__/utilities/ensureInstance'; import {createShadowNodeReferenceCountingRef} from '../../../__tests__/utilities/ShadowNodeReferenceCounter'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; +import {createRef} from 'react'; import {ScrollView, View} from 'react-native'; import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -90,7 +91,7 @@ describe('IntersectionObserver', () => { }); it('should throw if `root` is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -329,7 +330,7 @@ describe('IntersectionObserver', () => { }); it('should start observing the target when called for the first time (using normalized thresholds)', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, viewportHeight: 1000, @@ -381,7 +382,7 @@ describe('IntersectionObserver', () => { }); it('should ignore subsequent calls to observe a target already being observed', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -419,7 +420,7 @@ describe('IntersectionObserver', () => { }); it('should ignore disconnected targets', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -445,8 +446,8 @@ describe('IntersectionObserver', () => { }); it('should report completely non-intersecting initial state correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -508,8 +509,8 @@ describe('IntersectionObserver', () => { }); it('should report partial non-intersecting initial state correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -572,8 +573,8 @@ describe('IntersectionObserver', () => { }); it('should report partial intersecting initial state correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -634,8 +635,8 @@ describe('IntersectionObserver', () => { }); it('should report subsequent updates correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -727,7 +728,7 @@ describe('IntersectionObserver', () => { it('should report updates to the right observers', () => { let maybeNode1; let maybeNode2; - const scrollNodeRef = React.createRef(); + const scrollNodeRef = createRef(); let observer1: IntersectionObserver; let observer2: IntersectionObserver; @@ -884,7 +885,7 @@ describe('IntersectionObserver', () => { describe('rootThreshold', () => { it('should report partial intersecting initial state correctly', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -939,8 +940,8 @@ describe('IntersectionObserver', () => { }); it('should report partial non-intersecting initial state correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -1000,8 +1001,8 @@ describe('IntersectionObserver', () => { }); it('should report completely non-intersecting initial state correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -1061,8 +1062,8 @@ describe('IntersectionObserver', () => { }); it('should report subsequent updates correctly', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot({ viewportWidth: 1000, @@ -1184,7 +1185,7 @@ describe('IntersectionObserver', () => { }); it('should ignore the call if `target` was not observed (not fail)', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1203,8 +1204,8 @@ describe('IntersectionObserver', () => { }); it('should stop observing the target if it was observed', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot(); // View is not intersecting with ScrollView @@ -1252,7 +1253,7 @@ describe('IntersectionObserver', () => { }); it('should stop observing the target if it was observed (detached target after observing)', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1285,7 +1286,7 @@ describe('IntersectionObserver', () => { }); it('should stop observing the target if it was observed (detached target before observing)', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1305,7 +1306,7 @@ describe('IntersectionObserver', () => { }); it('should not report the initial state if the target is unobserved before it is delivered', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1326,8 +1327,8 @@ describe('IntersectionObserver', () => { }); it('should not report updates if the target is unobserved before they are delivered', () => { - const nodeRef = React.createRef(); - const scrollNodeRef = React.createRef(); + const nodeRef = createRef(); + const scrollNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -1450,7 +1451,7 @@ describe('IntersectionObserver', () => { // target was incorrectly cleaned up when a single observer stopped // observing it. it('should work with multiple intersection observer instances', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); let observer1: IntersectionObserver; let observer2: IntersectionObserver; diff --git a/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js b/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js index af73dc71a71f7f..122e30086a984f 100644 --- a/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js +++ b/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js @@ -21,6 +21,7 @@ import NativeMutationObserver from '../specs/NativeMutationObserver'; import * as Fantom from '@react-native/fantom'; import nullthrows from 'nullthrows'; import * as React from 'react'; +import {createRef} from 'react'; import {View} from 'react-native'; import setUpMutationObserver from 'react-native/src/private/setup/setUpMutationObserver'; import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'; @@ -92,7 +93,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `childList` option is not provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -129,7 +130,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `attributes` option is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -147,7 +148,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `attributeFilter` option is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -165,7 +166,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `attributeOldValue` option is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -184,7 +185,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `characterData` option is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -202,7 +203,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should throw if the `characterDataOldValue` option is provided', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -223,7 +224,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should ignore calls to observe disconnected targets', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -247,7 +248,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should report direct children added to and removed from an observed node (childList: true, subtree: false) ', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -266,8 +267,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); // Does not report anything initially expect(observerCallbackCallArgs.length).toBe(0); - const childNode1Ref = React.createRef(); - const childNode2Ref = React.createRef(); + const childNode1Ref = createRef(); + const childNode2Ref = createRef(); Fantom.runTask(() => { root.render( @@ -329,7 +330,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should NOT report changes in transitive children when `subtree` is not set to true', () => { - const observedNodeRef = React.createRef(); + const observedNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -373,7 +374,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should report changes in transitive children when `subtree` is set to true', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -393,7 +394,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); // Does not report anything initially expect(observerCallback).not.toHaveBeenCalled(); - const node111Ref = React.createRef(); + const node111Ref = createRef(); Fantom.runTask(() => { root.render( @@ -432,7 +433,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should report changes in different parts of the subtree as separate entries (subtree = true)', () => { - const nodeRef = React.createRef(); + const nodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -453,8 +454,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); // Does not report anything initially expect(observerCallback).not.toHaveBeenCalled(); - const node111Ref = React.createRef(); - const node121Ref = React.createRef(); + const node111Ref = createRef(); + const node121Ref = createRef(); Fantom.runTask(() => { root.render( @@ -504,8 +505,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); describe('multiple observers', () => { it('should report changes to multiple observers observing different subtrees', () => { - const node1Ref = React.createRef(); - const node2Ref = React.createRef(); + const node1Ref = createRef(); + const node2Ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -532,8 +533,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); expect(observerCallback1).not.toHaveBeenCalled(); expect(observerCallback2).not.toHaveBeenCalled(); - const childNode11Ref = React.createRef(); - const childNode21Ref = React.createRef(); + const childNode11Ref = createRef(); + const childNode21Ref = createRef(); Fantom.runTask(() => { root.render( @@ -594,8 +595,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should report changes to multiple observers observing the same subtree', () => { - const node1Ref = React.createRef(); - const node2Ref = React.createRef(); + const node1Ref = createRef(); + const node2Ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -621,7 +622,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); expect(observerCallback1).not.toHaveBeenCalled(); expect(observerCallback2).not.toHaveBeenCalled(); - const childNode111Ref = React.createRef(); + const childNode111Ref = createRef(); Fantom.runTask(() => { root.render( @@ -686,8 +687,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); describe('multiple observed nodes in the same observer', () => { it('should report changes in disjoint observations', () => { - const node1Ref = React.createRef(); - const node2Ref = React.createRef(); + const node1Ref = createRef(); + const node2Ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -710,8 +711,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); // Does not report anything initially expect(observerCallback).not.toHaveBeenCalled(); - const childNode11Ref = React.createRef(); - const childNode21Ref = React.createRef(); + const childNode11Ref = createRef(); + const childNode21Ref = createRef(); Fantom.runTask(() => { root.render( @@ -760,8 +761,8 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should report changes in joint observations', () => { - const node1Ref = React.createRef(); - const node11Ref = React.createRef(); + const node1Ref = createRef(); + const node11Ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -783,7 +784,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); // Does not report anything initially expect(observerCallback).not.toHaveBeenCalled(); - const childNode111Ref = React.createRef(); + const childNode111Ref = createRef(); Fantom.runTask(() => { root.render( @@ -834,7 +835,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); const [getReferenceCount, childRef] = createShadowNodeReferenceCountingRef(); - const parentRef = React.createRef(); + const parentRef = createRef(); Fantom.runTask(() => { root.render( @@ -868,7 +869,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); describe('disconnect()', () => { it('should stop observing targets', () => { - const observedNodeRef = React.createRef(); + const observedNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -909,7 +910,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should correctly unobserve targets that are disconnected after observing', () => { - const observedNodeRef = React.createRef(); + const observedNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { @@ -934,7 +935,7 @@ const nativeUnobserveAll = nullthrows(NativeMutationObserver?.unobserveAll); }); it('should correctly unobserve targets that are disconnected before observing', () => { - const observedNodeRef = React.createRef(); + const observedNodeRef = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { diff --git a/packages/react-native/src/private/webapis/structuredClone/__tests__/structuredClone-itest.js b/packages/react-native/src/private/webapis/structuredClone/__tests__/structuredClone-itest.js index 81616108a6a67a..6497df0e2c1088 100644 --- a/packages/react-native/src/private/webapis/structuredClone/__tests__/structuredClone-itest.js +++ b/packages/react-native/src/private/webapis/structuredClone/__tests__/structuredClone-itest.js @@ -16,6 +16,7 @@ import type {HostInstance} from 'react-native'; import ensureInstance from '../../../__tests__/utilities/ensureInstance'; import * as Fantom from '@react-native/fantom'; import * as React from 'react'; +import {createRef} from 'react'; import {View} from 'react-native'; import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver'; import setUpMutationObserver from 'react-native/src/private/setup/setUpMutationObserver'; @@ -335,7 +336,7 @@ describe('structuredClone', () => { describe('non-serializable platform objects', () => { it('does NOT clone ReadOnlyNode', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { root.render(); @@ -381,7 +382,7 @@ describe('structuredClone', () => { }); it('does NOT clone IntersectionObserverEntry', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { root.render(); @@ -411,7 +412,7 @@ describe('structuredClone', () => { }); it('does NOT clone MutationRecord', () => { - const ref = React.createRef(); + const ref = createRef(); const root = Fantom.createRoot(); Fantom.runTask(() => { root.render(); diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js index 8cdd4207e3852b..b0a268ba9d95c1 100644 --- a/packages/rn-tester/js/RNTesterAppShared.js +++ b/packages/rn-tester/js/RNTesterAppShared.js @@ -28,6 +28,7 @@ import { initialNavigationState, } from './utils/testerStateUtils'; import * as React from 'react'; +import {useCallback, useEffect, useMemo, useReducer} from 'react'; import { BackHandler, Button, @@ -64,7 +65,7 @@ const RNTesterApp = ({ }, customBackButton?: BackButton, }): React.Node => { - const [state, dispatch] = React.useReducer( + const [state, dispatch] = useReducer( RNTesterNavigationReducer, initialNavigationState, ); @@ -81,19 +82,19 @@ const RNTesterApp = ({ const isScreenTiny = useWindowDimensions().height < 600; - const examplesList = React.useMemo( + const examplesList = useMemo( () => getExamplesListWithRecentlyUsed({recentlyUsed, testList}), [recentlyUsed, testList], ); - const handleBackPress = React.useCallback(() => { + const handleBackPress = useCallback(() => { if (activeModuleKey != null) { dispatch({type: RNTesterNavigationActionsType.BACK_BUTTON_PRESS}); } }, [dispatch, activeModuleKey]); // Setup hardware back button press listener - React.useEffect(() => { + useEffect(() => { const handleHardwareBackPress = () => { if (activeModuleKey) { handleBackPress(); @@ -109,7 +110,7 @@ const RNTesterApp = ({ return () => subscription.remove(); }, [activeModuleKey, handleBackPress]); - const handleModuleCardPress = React.useCallback( + const handleModuleCardPress = useCallback( ({exampleType, key, title}: any) => { dispatch({ type: RNTesterNavigationActionsType.MODULE_CARD_PRESS, @@ -119,7 +120,7 @@ const RNTesterApp = ({ [dispatch], ); - const handleModuleExampleCardPress = React.useCallback( + const handleModuleExampleCardPress = useCallback( (exampleName: string) => { dispatch({ type: RNTesterNavigationActionsType.EXAMPLE_CARD_PRESS, @@ -129,7 +130,7 @@ const RNTesterApp = ({ [dispatch], ); - const handleNavBarPress = React.useCallback( + const handleNavBarPress = useCallback( (args: {screen: ScreenTypes}) => { if (args.screen === 'playgrounds') { dispatch({ @@ -151,7 +152,7 @@ const RNTesterApp = ({ ); // Setup Linking event subscription - const handleOpenUrlRequest = React.useCallback( + const handleOpenUrlRequest = useCallback( ({url}: {url: string, ...}) => { // Supported URL pattern(s): // * rntester://example/ @@ -229,7 +230,7 @@ const RNTesterApp = ({ }, [dispatch], ); - React.useEffect(() => { + useEffect(() => { // Initial deeplink Linking.getInitialURL() .then(url => url != null && handleOpenUrlRequest({url: url})) diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js index 11a927447b857d..22051f0b983041 100644 --- a/packages/rn-tester/js/components/ListExampleShared.js +++ b/packages/rn-tester/js/components/ListExampleShared.js @@ -12,6 +12,7 @@ import RNTesterText from './RNTesterText'; import React from 'react'; +import {memo} from 'react'; import { ActivityIndicator, Animated, @@ -162,7 +163,7 @@ class SeparatorComponent extends React.PureComponent<{...}> { } } -const LoadingComponent: React.ComponentType<{}> = React.memo(() => ( +const LoadingComponent: React.ComponentType<{}> = memo(() => ( diff --git a/packages/rn-tester/js/components/RNTConfigurationBlock.js b/packages/rn-tester/js/components/RNTConfigurationBlock.js index a0fddb9a3002ac..e1a9c165690f56 100644 --- a/packages/rn-tester/js/components/RNTConfigurationBlock.js +++ b/packages/rn-tester/js/components/RNTConfigurationBlock.js @@ -12,6 +12,7 @@ import {RNTesterThemeContext} from './RNTesterTheme'; import * as React from 'react'; +import {useContext} from 'react'; import {StyleSheet, View} from 'react-native'; type Props = $ReadOnly<{ @@ -23,7 +24,7 @@ type Props = $ReadOnly<{ * Container view for a block of configuration options for an example. */ export default function RNTConfigurationBlock(props: Props): React.Node { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( ['style']; @@ -35,7 +36,7 @@ export default function RNTPressableRow({ style, accessibilityLabel, }: Props): React.Node { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); const label = accessibilityLabel ?? `${title} ${description ?? ''}`; return ( ; const RNTesterBlock = ({description, title, children}: Props): React.Node => { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( { // Filter platform-specific es const {title, description, platform, render: ExampleComponent} = e; diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js index 0af3c21d7c61dd..7d93feb24ecb17 100644 --- a/packages/rn-tester/js/components/RNTesterModuleList.js +++ b/packages/rn-tester/js/components/RNTesterModuleList.js @@ -10,6 +10,7 @@ import {RNTesterThemeContext} from './RNTesterTheme'; import RNTPressableRow from './RNTPressableRow'; +import {memo} from 'react'; const RNTesterExampleFilter = require('./RNTesterExampleFilter'); const React = require('react'); @@ -61,7 +62,7 @@ const renderSectionHeader = ({section}: {section: any, ...}) => ( ); -const RNTesterModuleList: React.ComponentType = React.memo( +const RNTesterModuleList: React.ComponentType = memo( ({sections, handleModuleCardPress}: any) => { const filter = ({example, filterRegex, category}: any) => filterRegex.test(example.module.title) && diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js index 8faadf3775abb6..84f5eaa3b74dce 100644 --- a/packages/rn-tester/js/components/RNTesterNavbar.js +++ b/packages/rn-tester/js/components/RNTesterNavbar.js @@ -13,6 +13,7 @@ import type {RNTesterTheme} from './RNTesterTheme'; import {RNTesterThemeContext} from './RNTesterTheme'; import * as React from 'react'; +import {useContext} from 'react'; import {Image, Pressable, StyleSheet, Text, View} from 'react-native'; type NavBarOnPressHandler = ({screen: ScreenTypes}) => void; @@ -126,7 +127,7 @@ const RNTesterNavbar = ({ screen, isExamplePageOpen, }: Props): React.Node => { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); const isAPIActive = screen === 'apis' && !isExamplePageOpen; const isComponentActive = screen === 'components' && !isExamplePageOpen; diff --git a/packages/rn-tester/js/components/RNTesterTheme.js b/packages/rn-tester/js/components/RNTesterTheme.js index 8cc4cf6f0a7b3c..62894cab233db0 100644 --- a/packages/rn-tester/js/components/RNTesterTheme.js +++ b/packages/rn-tester/js/components/RNTesterTheme.js @@ -11,6 +11,7 @@ import type {ColorValue, ImageSource} from 'react-native'; import * as React from 'react'; +import {createContext} from 'react'; import {Appearance} from 'react-native'; export type RNTesterTheme = { @@ -137,7 +138,6 @@ export const RNTesterDarkTheme = { }; export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme}; -export const RNTesterThemeContext: React.Context = - React.createContext( - Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light, - ); +export const RNTesterThemeContext: React.Context = createContext( + Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light, +); diff --git a/packages/rn-tester/js/components/TextLegend.js b/packages/rn-tester/js/components/TextLegend.js index da8c4521ada785..3a5c62dc9b4917 100644 --- a/packages/rn-tester/js/components/TextLegend.js +++ b/packages/rn-tester/js/components/TextLegend.js @@ -11,6 +11,7 @@ import RNTesterText from '../components/RNTesterText'; import RNTOption from './RNTOption'; import * as React from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; const PANGRAMS = { @@ -39,11 +40,11 @@ const PANGRAMS = { }; export default function TextLegend(): React.Node { - const [language, setLanguage] = React.useState('english'); - const [alignment, setAlignment] = React.useState('left'); + const [language, setLanguage] = useState('english'); + const [alignment, setAlignment] = useState('left'); // $FlowFixMe[missing-empty-array-annot] - const [textMetrics, setTextMetrics] = React.useState([]); - const [fontSize, setFontSize] = React.useState(50); + const [textMetrics, setTextMetrics] = useState([]); + const [fontSize, setFontSize] = useState(50); return ( setFontSize(fontSize + 3)}> diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index d7c4b9e89de381..351abea1e13b19 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -17,7 +17,7 @@ import RNTesterText from '../../components/RNTesterText'; import checkImageSource from './check.png'; import mixedCheckboxImageSource from './mixed.png'; import uncheckImageSource from './uncheck.png'; -import React, {createRef} from 'react'; +import React, {createRef, useEffect, useRef, useState} from 'react'; import { AccessibilityInfo, Alert, @@ -1314,7 +1314,7 @@ class AnnounceForAccessibility extends React.Component<{}> { } function SetAccessibilityFocusExample(props: {}): React.Node { - const myRef = React.useRef>(null); + const myRef = useRef>(null); const onPress = () => { if (myRef && myRef.current) { @@ -1561,8 +1561,8 @@ function DisplayOptionStatusExample({ optionChecker: () => Promise, optionName: string, }) { - const [statusEnabled, setStatusEnabled] = React.useState(false); - React.useEffect(() => { + const [statusEnabled, setStatusEnabled] = useState(false); + useEffect(() => { const listener = AccessibilityInfo.addEventListener( // $FlowFixMe[prop-missing] // $FlowFixMe[invalid-computed-prop] @@ -1589,7 +1589,7 @@ function DisplayOptionStatusExample({ } function AccessibilityExpandedExample(): React.Node { - const [expand, setExpanded] = React.useState(false); + const [expand, setExpanded] = useState(false); const expandAction = {name: 'expand'}; const collapseAction = {name: 'collapse'}; return ( diff --git a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js index 29e19c9aacc465..ee42a28f7c9474 100644 --- a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js +++ b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js @@ -13,6 +13,7 @@ import type {HostInstance} from 'react-native'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; +import {createRef} from 'react'; const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager'); const React = require('react'); @@ -207,7 +208,7 @@ class ActionSheetAnchorExample extends React.Component< clicked: 'none', }; - anchorRef: {current: null | HostInstance} = React.createRef(); + anchorRef: {current: null | HostInstance} = createRef(); render(): React.Node { return ( @@ -434,7 +435,7 @@ class ShareScreenshotAnchorExample extends React.Component< text: '', }; - anchorRef: {current: null | HostInstance} = React.createRef(); + anchorRef: {current: null | HostInstance} = createRef(); render(): React.Node { return ( diff --git a/packages/rn-tester/js/examples/Alert/AlertExample.js b/packages/rn-tester/js/examples/Alert/AlertExample.js index 6c0f1a7353ee69..027614271aa021 100644 --- a/packages/rn-tester/js/examples/Alert/AlertExample.js +++ b/packages/rn-tester/js/examples/Alert/AlertExample.js @@ -12,6 +12,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes'; import RNTesterText from '../../components/RNTesterText'; import * as React from 'react'; +import {useState} from 'react'; import {Alert, Pressable, StyleSheet, Text, View} from 'react-native'; // Shows log on the screen @@ -46,7 +47,7 @@ const AlertWithDefaultButton = () => { }; const AlertWithTwoButtons = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = 'Your subscription has expired!'; @@ -70,7 +71,7 @@ const AlertWithTwoButtons = () => { }; const AlertWithThreeButtons = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = 'Do you want to save your changes?'; @@ -96,7 +97,7 @@ const AlertWithThreeButtons = () => { }; const AlertWithManyButtons = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' + @@ -126,7 +127,7 @@ const AlertWithManyButtons = () => { }; const AlertWithCancelableTrue = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = 'Tapping outside this dialog will dismiss this alert.'; @@ -158,7 +159,7 @@ const AlertWithCancelableTrue = () => { }; const AlertWithStyles = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = 'Look at the button styles!'; @@ -195,7 +196,7 @@ const AlertWithStyles = () => { }; const AlertWithStylesPreferred = () => { - const [message, setMessage] = React.useState(''); + const [message, setMessage] = useState(''); const alertMessage = "The Preferred button is styled with 'preferred', so it is emphasized over the cancel button."; @@ -228,7 +229,7 @@ const AlertWithStylesPreferred = () => { }; const PromptOptions = () => { - const [promptValue, setPromptValue] = React.useState< + const [promptValue, setPromptValue] = useState< string | {login: string, password: string}, >(''); diff --git a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js index 548e0fd7dc234a..7b44870e6c2de1 100644 --- a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js +++ b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js @@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) { @@ -123,7 +124,7 @@ function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) { } function AnimatedColorStyleExample(): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/Animated/CombineExample.js b/packages/rn-tester/js/examples/Animated/CombineExample.js index 90117168024aac..700dfcab23069e 100644 --- a/packages/rn-tester/js/examples/Animated/CombineExample.js +++ b/packages/rn-tester/js/examples/Animated/CombineExample.js @@ -13,7 +13,9 @@ import type {Numeric} from 'react-native/Libraries/Animated/AnimatedImplementati import RNTesterButton from '../../components/RNTesterButton'; import * as React from 'react'; +import {useState} from 'react'; import {Animated, StyleSheet, Text, TextInput, View} from 'react-native'; + export default ({ title: 'Combine Example', name: 'Combine View', @@ -23,8 +25,8 @@ export default ({ }: RNTesterModuleExample); const CombineExample = () => { - const [aValue, setAValue] = React.useState('0.4'); - const [bValue, setBValue] = React.useState('0.5'); + const [aValue, setAValue] = useState('0.4'); + const [bValue, setBValue] = useState('0.5'); const a = new Animated.Value(parseFloat(aValue)); const b = new Animated.Value(parseFloat(bValue)); const add = Animated.add(a, b); @@ -33,7 +35,7 @@ const CombineExample = () => { const divide = parseFloat(aValue) !== 0 ? Animated.divide(b, a) : new Animated.Value(1); const mod = Animated.modulo(a, parseFloat(bValue)); - const [animation, setAnimation] = React.useState(add); + const [animation, setAnimation] = useState(add); return ( diff --git a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js index 413e0a450598eb..5b72071a31108f 100644 --- a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js +++ b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js @@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import * as React from 'react'; +import {useContext} from 'react'; import {Animated, Easing, StyleSheet, Text, View} from 'react-native'; const styles = StyleSheet.create({ @@ -30,7 +31,7 @@ const styles = StyleSheet.create({ function CompositeAnimationsWithEasingExample(): React.Node { const anims = [1, 2, 3].map(() => new Animated.Value(0)); - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( diff --git a/packages/rn-tester/js/examples/Animated/ComposingExample.js b/packages/rn-tester/js/examples/Animated/ComposingExample.js index f894035bff1f7a..c05a916a135097 100644 --- a/packages/rn-tester/js/examples/Animated/ComposingExample.js +++ b/packages/rn-tester/js/examples/Animated/ComposingExample.js @@ -17,6 +17,7 @@ import RNTesterButton from '../../components/RNTesterButton'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useContext, useMemo, useRef, useState} from 'react'; import { Animated, FlatList, @@ -146,14 +147,12 @@ function ComposingExampleItem({ // Figure out how far along the x axis we should translate the box by taking into // account the window width, box size, and padding const maxXTranslation = windowWidth - boxSize - 4 * padding; - const boxIndexes = React.useMemo(() => [0, 1, 2, 3, 4], []); - const xTranslations = React.useRef( - boxIndexes.map(() => new Animated.Value(0)), - ); - const animation = React.useRef( + const boxIndexes = useMemo(() => [0, 1, 2, 3, 4], []); + const xTranslations = useRef(boxIndexes.map(() => new Animated.Value(0))); + const animation = useRef( compositeAnimation(xTranslations.current, useNativeDriver), ); - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( @@ -208,7 +207,7 @@ function ComposingExampleItem({ } function ComposingExample(props: Props): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( <> diff --git a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js index 8656015bb2678d..2c4fea2dc5ab5c 100644 --- a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js +++ b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js @@ -12,10 +12,11 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import * as React from 'react'; +import {useContext} from 'react'; import {Text} from 'react-native'; function AnimatedContinuousInteractionsExample(): React.Node { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( Checkout the Gratuitous Animation App! diff --git a/packages/rn-tester/js/examples/Animated/EasingExample.js b/packages/rn-tester/js/examples/Animated/EasingExample.js index 2ec1fc78a1b7a7..af9612ffded4b9 100644 --- a/packages/rn-tester/js/examples/Animated/EasingExample.js +++ b/packages/rn-tester/js/examples/Animated/EasingExample.js @@ -15,6 +15,7 @@ import RNTesterButton from '../../components/RNTesterButton'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useContext, useRef, useState} from 'react'; import { Animated, Easing, @@ -86,8 +87,8 @@ function EasingItem({ item: EasingListItem, useNativeDriver: boolean, }): React.Node { - const opacityAndScale = React.useRef(new Animated.Value(1)); - const animation = React.useRef( + const opacityAndScale = useRef(new Animated.Value(1)); + const animation = useRef( Animated.timing(opacityAndScale.current, { toValue: 1, duration: 1200, @@ -104,7 +105,7 @@ function EasingItem({ }, ]; - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( @@ -128,7 +129,7 @@ function EasingItem({ } function EasingExample(props: Props): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( <> diff --git a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js index 3043a3f9b7de01..56b8d4028054ed 100644 --- a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js +++ b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js @@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useEffect, useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; const styles = StyleSheet.create({ @@ -36,8 +37,8 @@ function FadeInView({ children: React.Node, }) { //opacity 0 - const [fadeAnim] = React.useState(() => new Animated.Value(0)); - React.useEffect(() => { + const [fadeAnim] = useState(() => new Animated.Value(0)); + useEffect(() => { Animated.timing( // Uses easing functions fadeAnim, // The value to drive @@ -64,8 +65,8 @@ function FadeInView({ } function FadeInExample(): React.Node { - const [show, setShow] = React.useState(true); - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [show, setShow] = useState(true); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/Animated/LoopingExample.js b/packages/rn-tester/js/examples/Animated/LoopingExample.js index ffa891294f94ac..4e24cf3f28e236 100644 --- a/packages/rn-tester/js/examples/Animated/LoopingExample.js +++ b/packages/rn-tester/js/examples/Animated/LoopingExample.js @@ -14,7 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; -import {useEffect} from 'react'; +import {useEffect, useMemo, useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; export default ({ @@ -31,8 +31,8 @@ function LoopingView({ useNativeDriver: boolean, running: boolean, }) { - const opacity = React.useMemo(() => new Animated.Value(1), []); - const scale = React.useMemo(() => new Animated.Value(1), []); + const opacity = useMemo(() => new Animated.Value(1), []); + const scale = useMemo(() => new Animated.Value(1), []); useEffect(() => { if (!running) { @@ -65,8 +65,8 @@ function LoopingView({ } function LoopingExample(props: {}): React.Node { - const [running, setRunning] = React.useState(false); - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [running, setRunning] = useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js index 2ead9f1743fc70..12694ca92c4429 100644 --- a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js +++ b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js @@ -14,7 +14,9 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; + const containerWidth = 200; const boxSize = 50; @@ -57,9 +59,9 @@ const styles = StyleSheet.create({ type Props = $ReadOnly<{}>; function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) { - const x = React.useRef(new Animated.Value(0)); - const [update, setUpdate] = React.useState(0); - const [boxVisible, setBoxVisible] = React.useState(true); + const x = useRef(new Animated.Value(0)); + const [update, setUpdate] = useState(0); + const [boxVisible, setBoxVisible] = useState(true); const moveTo = (pos: number) => { Animated.timing(x.current, { @@ -110,7 +112,7 @@ function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) { } function MovingBoxExample(props: Props): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( <> diff --git a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js b/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js index e6d462ca99e303..2b92ca80a27327 100644 --- a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js +++ b/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js @@ -11,13 +11,14 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {Animated, Button, Text, View} from 'react-native'; const componentList: number[] = Array.from({length: 100}, (_, i) => i + 1); function PressableWithNativeDriver() { - const currScroll = React.useRef(new Animated.Value(0)).current; - const [count, setCount] = React.useState(0); + const currScroll = useRef(new Animated.Value(0)).current; + const [count, setCount] = useState(0); return ( diff --git a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js b/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js index 7962dd758ef6d0..d1a7c24cf03fb6 100644 --- a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js +++ b/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js @@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useState} from 'react'; import {Animated, StyleSheet, View} from 'react-native'; const styles = StyleSheet.create({ @@ -84,7 +85,7 @@ function RotatingImagesView({useNativeDriver}: {useNativeDriver: boolean}) { } function RotatingImagesExample(): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js b/packages/rn-tester/js/examples/Animated/TransformBounceExample.js index 55361d55e118c9..bed88330164019 100644 --- a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js +++ b/packages/rn-tester/js/examples/Animated/TransformBounceExample.js @@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock'; import RNTesterButton from '../../components/RNTesterButton'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; const styles = StyleSheet.create({ @@ -91,7 +92,7 @@ function TransformBounceView({useNativeDriver}: {useNativeDriver: boolean}) { } function TransformBounceExample(): React.Node { - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [useNativeDriver, setUseNativeDriver] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js index 33bafe4c391002..0187e6b024cafb 100644 --- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js +++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js @@ -16,6 +16,7 @@ import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import RNTOption from '../../components/RNTOption'; import ToggleNativeDriver from './utils/ToggleNativeDriver'; import * as React from 'react'; +import {useContext, useState} from 'react'; import {Animated, StyleSheet, Text, View} from 'react-native'; const transformProperties = { @@ -78,8 +79,8 @@ function AnimatedView({ } function AnimatedTransformStyleExample(): React.Node { - const [properties, setProperties] = React.useState(transformProperties); - const [useNativeDriver, setUseNativeDriver] = React.useState(false); + const [properties, setProperties] = useState(transformProperties); + const [useNativeDriver, setUseNativeDriver] = useState(false); const onToggle = (property: string) => setProperties({ ...properties, @@ -90,7 +91,7 @@ function AnimatedTransformStyleExample(): React.Node { selected: !properties[property].selected, }, }); - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( diff --git a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js index 29e7068ad065a8..3aa434688824da 100644 --- a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js +++ b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js @@ -10,6 +10,7 @@ import {RNTesterThemeContext} from '../../../components/RNTesterTheme'; import * as React from 'react'; +import {useContext} from 'react'; import {StyleSheet, Switch, Text, View} from 'react-native'; type ViewStyleProp = React.ElementConfig['style']; @@ -25,7 +26,7 @@ export default function ToggleNativeDriver({ onValueChange, style, }: Props): React.Node { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); return ( Use Native Driver diff --git a/packages/rn-tester/js/examples/ContentURLAndroid/ContentURLAndroid.js b/packages/rn-tester/js/examples/ContentURLAndroid/ContentURLAndroid.js index 225396f33cffde..97b926a5c5112d 100644 --- a/packages/rn-tester/js/examples/ContentURLAndroid/ContentURLAndroid.js +++ b/packages/rn-tester/js/examples/ContentURLAndroid/ContentURLAndroid.js @@ -14,6 +14,7 @@ import RNTesterBlock from '../../components/RNTesterBlock'; import RNTesterPage from '../../components/RNTesterPage'; import RNTesterText from '../../components/RNTesterText'; import React from 'react'; +import {useCallback, useState} from 'react'; import { Image, Platform, @@ -39,8 +40,8 @@ function blobToBase64(blob: Blob) { } const ContentSelector = (): React.Node => { - const [base64Image, setBase64Image] = React.useState(''); - const imageSelector = React.useCallback(async () => { + const [base64Image, setBase64Image] = useState(''); + const imageSelector = useCallback(async () => { try { const NativeSampleTurboModule = require('react-native/Libraries/TurboModule/samples/NativeSampleTurboModule').default; diff --git a/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js b/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js index c56357bbdb2cfa..d2bd7a96f171c9 100644 --- a/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js +++ b/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js @@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../../types/RNTesterTypes'; import ToggleNativeDriver from '../../Animated/utils/ToggleNativeDriver'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {Animated, StyleSheet, Text} from 'react-native'; const WIDTH = 200; @@ -38,9 +39,9 @@ const styles = StyleSheet.create({ }); function CompatibilityAnimatedPointerMove(): React.Node { - const xCoord = React.useRef(new Animated.Value(0)).current; - const yCoord = React.useRef(new Animated.Value(0)).current; - const [useNativeDriver, setUseNativeDriver] = React.useState(true); + const xCoord = useRef(new Animated.Value(0)).current; + const yCoord = useRef(new Animated.Value(0)).current; + const [useNativeDriver, setUseNativeDriver] = useState(true); return ( <> diff --git a/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js b/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js index c11dc11cdc4dc7..538e11239dc08d 100644 --- a/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js +++ b/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js @@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../../types/RNTesterTypes'; import type {PointerEvent} from 'react-native'; import * as React from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; const styles = StyleSheet.create({ @@ -43,7 +44,7 @@ function getModifiersText(evt: PointerEvent['nativeEvent']): string { } function ManyPointersPropertiesExample(): React.Node { - const [data, setData] = React.useState<{}>({}); + const [data, setData] = useState<{}>({}); const onPointerMove = (event: PointerEvent) => { const pointerId = event.nativeEvent.pointerId; // $FlowFixMe[invalid-computed-prop] diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js index 4458a2c63a5649..091fc0b64846a6 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -18,7 +18,7 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import RNTesterPlatformTestMinimizedResultView from './RNTesterPlatformTestMinimizedResultView'; import RNTesterPlatformTestResultsText from './RNTesterPlatformTestResultsText'; import * as React from 'react'; -import {useCallback, useMemo, useState} from 'react'; +import {memo, useCallback, useMemo, useState} from 'react'; import { Button, FlatList, @@ -144,35 +144,33 @@ function TableHeader() { ); } -const TableRow = React.memo( - ({testResult}: {testResult: PlatformTestResult}) => { - return ( - - - - {DISPLAY_STATUS_MAPPING[testResult.status]} - - - - {testResult.name} - - - {testResult.assertions.map((assertion, assertionIdx) => { - if (assertion.passing) { - return null; - } - return ( - - {assertion.name}: {assertion.description}{' '} - {assertion.failureMessage} - - ); - })} - +const TableRow = memo(({testResult}: {testResult: PlatformTestResult}) => { + return ( + + + + {DISPLAY_STATUS_MAPPING[testResult.status]} + - ); - }, -); + + {testResult.name} + + + {testResult.assertions.map((assertion, assertionIdx) => { + if (assertion.passing) { + return null; + } + return ( + + {assertion.name}: {assertion.description}{' '} + {assertion.failureMessage} + + ); + })} + + + ); +}); function renderTableRow({item}: ListRenderItemInfo) { return ; diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsEventfulView.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsEventfulView.js index 27e75cedc01030..62d20442d115cb 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsEventfulView.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsEventfulView.js @@ -11,6 +11,7 @@ import type {PointerEvent, ViewProps} from 'react-native'; import * as React from 'react'; +import {useEffect, useRef, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default function EventfulView(props: { @@ -35,8 +36,8 @@ export default function EventfulView(props: { log: string => void, ...ViewProps, }): React.Node { - const ref = React.useRef>(); - React.useEffect(() => { + const ref = useRef>(); + useEffect(() => { // $FlowFixMe[prop-missing] Using private property setTag(ref.current?._nativeTag); }, [ref]); @@ -64,7 +65,7 @@ export default function EventfulView(props: { onCancelCapture, ...restProps } = props; - const [tag, setTag] = React.useState(''); + const [tag, setTag] = useState(''); const eventLog = (eventName: string, handler: ?(e: PointerEvent) => void) => diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js index 85e21967ad68d1..7df67b48fba1a2 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js @@ -29,6 +29,7 @@ import PointerEventPointerOverOut from './W3CPointerEventPlatformTests/PointerEv import PointerEventPrimaryTouchPointer from './W3CPointerEventPlatformTests/PointerEventPrimaryTouchPointer'; import EventfulView from './W3CPointerEventsEventfulView'; import * as React from 'react'; +import {useState} from 'react'; import {Button, ScrollView, StyleSheet, Text, View} from 'react-native'; function AbsoluteChildExample({log}: {log: string => void}) { @@ -105,7 +106,7 @@ function PointerEventScaffolding({ }: { Example: component(log: (string) => void), }) { - const [eventsLog, setEventsLog] = React.useState(''); + const [eventsLog, setEventsLog] = useState(''); const clear = () => setEventsLog(''); const log = (eventStr: string) => { setEventsLog(currentEventsLog => `${eventStr}\n${currentEventsLog}`); diff --git a/packages/rn-tester/js/examples/Filter/FilterExample.js b/packages/rn-tester/js/examples/Filter/FilterExample.js index 46642348c78b98..d980f2d7490ea3 100644 --- a/packages/rn-tester/js/examples/Filter/FilterExample.js +++ b/packages/rn-tester/js/examples/Filter/FilterExample.js @@ -14,6 +14,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import React from 'react'; +import {useState} from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; const alphaHotdog = require('../../assets/alpha-hotdog.png'); @@ -54,7 +55,7 @@ function StaticViewAndImageComparison(props: Props): React.Node { } function StaticViewAndImageWithState(props: Props): React.Node { - const [s, setS] = React.useState(true); + const [s, setS] = useState(true); setTimeout(() => setS(!s), 5000); return ( diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js index af5110eea2dd66..ac20136573d678 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js @@ -14,6 +14,7 @@ import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; import BaseFlatListExample from './BaseFlatListExample'; import * as React from 'react'; +import {useCallback, useRef, useState} from 'react'; import {FlatList, StyleSheet, View} from 'react-native'; type FlatListProps = React.ElementProps; @@ -31,8 +32,8 @@ export function FlatList_BaseOnViewableItemsChanged(props: { waitForInteraction?: ?boolean, }): React.Node { const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props; - const [output, setOutput] = React.useState(''); - const onViewableItemsChanged = React.useCallback( + const [output, setOutput] = useState(''); + const onViewableItemsChanged = useCallback( (info: {changed: Array, viewableItems: Array, ...}) => setOutput( info.viewableItems @@ -52,7 +53,7 @@ export function FlatList_BaseOnViewableItemsChanged(props: { horizontal, }; - const ref = React.useRef(null); + const ref = useRef(null); const onTest = useScrollRefScroll === true ? () => { diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js b/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js index 8717e8e19b577d..059c685a5edfd8 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-contentInset.js @@ -12,15 +12,16 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import BaseFlatListExample from './BaseFlatListExample'; import * as React from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; export function FlatList_contentInset(): React.Node { const [initialContentInset, toggledContentInset] = [44, 88]; - const [output, setOutput] = React.useState( + const [output, setOutput] = useState( `contentInset top: ${initialContentInset.toString()}`, ); - const [exampleProps, setExampleProps] = React.useState({ + const [exampleProps, setExampleProps] = useState({ automaticallyAdjustContentInsets: false, contentInset: {top: initialContentInset}, contentOffset: {y: -initialContentInset, x: 0}, diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js b/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js index e90e55f132505b..7b8190409a0321 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js @@ -12,10 +12,11 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import BaseFlatListExample from './BaseFlatListExample'; import * as React from 'react'; +import {useState} from 'react'; export function FlatList_inverted(): React.Node { - const [output, setOutput] = React.useState('inverted false'); - const [exampleProps, setExampleProps] = React.useState({ + const [output, setOutput] = useState('inverted false'); + const [exampleProps, setExampleProps] = useState({ inverted: false, }); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js index 45cdacbb035385..06c073a4eba911 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js @@ -27,17 +27,18 @@ import { } from '../../components/ListExampleShared'; import RNTesterPage from '../../components/RNTesterPage'; import RNTesterText from '../../components/RNTesterText'; -import React from 'react'; +import * as React from 'react'; +import {useState} from 'react'; import {Alert, FlatList, StyleSheet, View} from 'react-native'; import infoLog from 'react-native/Libraries/Utilities/infoLog'; function MultiColumnExample(): React.Node { - const [data, setData] = React.useState(genNewerItems(1000)); - const [filterText, setFilterText] = React.useState(''); - const [fixedHeight, setFixedHeight] = React.useState(true); - const [logViewable, setLogViewable] = React.useState(false); - const [numColumns, setNumColumns] = React.useState(2); - const [virtualized, setVirtualized] = React.useState(true); + const [data, setData] = useState(genNewerItems(1000)); + const [filterText, setFilterText] = useState(''); + const [fixedHeight, setFixedHeight] = useState(true); + const [logViewable, setLogViewable] = useState(false); + const [numColumns, setNumColumns] = useState(2); + const [virtualized, setVirtualized] = useState(true); const _onChangeFilterText = (_filterText: string) => { setFilterText(_filterText); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js b/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js index a7d3042c6ae258..14ac62cdd03f4f 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js @@ -9,19 +9,21 @@ */ 'use strict'; + import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import BaseFlatListExample from './BaseFlatListExample'; import * as React from 'react'; +import {useRef, useState} from 'react'; export function FlatList_onEndReached(): React.Node { - const [output, setOutput] = React.useState(''); + const [output, setOutput] = useState(''); const exampleProps = { onEndReached: (info: {distanceFromEnd: number, ...}) => setOutput('onEndReached'), onEndReachedThreshold: 0, }; - const ref = React.useRef(null); + const ref = useRef(null); const onTest = () => { const scrollResponder = ref?.current?.getScrollResponder(); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onStartReached.js b/packages/rn-tester/js/examples/FlatList/FlatList-onStartReached.js index de1d2f4c9ba823..91697fa7a122db 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onStartReached.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onStartReached.js @@ -9,14 +9,16 @@ */ 'use strict'; + import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import BaseFlatListExample, {ITEM_HEIGHT} from './BaseFlatListExample'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {FlatList} from 'react-native'; export function FlatList_onStartReached(): React.Node { - const [output, setOutput] = React.useState(''); + const [output, setOutput] = useState(''); const exampleProps = { onStartReached: (info: {distanceFromStart: number, ...}) => setOutput('onStartReached'), @@ -28,7 +30,7 @@ export function FlatList_onStartReached(): React.Node { index, }), }; - const ref = React.useRef>(null); + const ref = useRef>(null); const onTest = () => { ref.current?.scrollToOffset({offset: 0}); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js b/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js index f046e26e2cdedf..2ced8706deb71b 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js @@ -9,10 +9,12 @@ */ 'use strict'; + import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import BaseFlatListExample from './BaseFlatListExample'; import * as React from 'react'; +import {useRef} from 'react'; import {StyleSheet, Text, View} from 'react-native'; const Separator = @@ -44,7 +46,7 @@ export function FlatList_withSeparators(): React.Node { const exampleProps = { ItemSeparatorComponent: Separator('lightgreen', 'green'), }; - const ref = React.useRef<$FlowFixMe>(null); + const ref = useRef<$FlowFixMe>(null); return ; } diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 4a4b01294be12e..be221d94f52d84 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -17,6 +17,7 @@ import RNTesterButton from '../../components/RNTesterButton'; import RNTesterText from '../../components/RNTesterText'; import ImageCapInsetsExample from './ImageCapInsetsExample'; import React from 'react'; +import {useEffect, useState} from 'react'; import {Image, ImageBackground, StyleSheet, Text, View} from 'react-native'; const IMAGE1 = @@ -38,9 +39,9 @@ type BlobImageProps = $ReadOnly<{ }>; const BlobImage = ({url}: BlobImageProps): React.Node => { - const [objectURL, setObjectURL] = React.useState(null); + const [objectURL, setObjectURL] = useState(null); - React.useEffect(() => { + useEffect(() => { // $FlowFixMe[unused-promise] (async () => { const result = await fetch(url); @@ -86,11 +87,11 @@ const NetworkImageCallbackExample = ({ source, prefetchedSource, }: NetworkImageCallbackExampleProps): React.Node => { - const [events, setEvents] = React.useState<$ReadOnlyArray>([]); - const [startLoadPrefetched, setStartLoadPrefetched] = React.useState(false); - const [mountTime, setMountTime] = React.useState(Date.now()); + const [events, setEvents] = useState<$ReadOnlyArray>([]); + const [startLoadPrefetched, setStartLoadPrefetched] = useState(false); + const [mountTime, setMountTime] = useState(Date.now()); - React.useEffect(() => { + useEffect(() => { setMountTime(Date.now()); }, []); @@ -595,7 +596,7 @@ const VectorDrawableExample = () => { }; function CacheControlAndroidExample(): React.Node { - const [reload, setReload] = React.useState(0); + const [reload, setReload] = useState(0); const onReload = () => { setReload(prevReload => prevReload + 1); diff --git a/packages/rn-tester/js/examples/Linking/LinkingExample.js b/packages/rn-tester/js/examples/Linking/LinkingExample.js index 789d698148f27d..d200ad1ac025ef 100644 --- a/packages/rn-tester/js/examples/Linking/LinkingExample.js +++ b/packages/rn-tester/js/examples/Linking/LinkingExample.js @@ -12,6 +12,7 @@ import RNTesterBlock from '../../components/RNTesterBlock'; import RNTesterText from '../../components/RNTesterText'; import React from 'react'; +import {useState} from 'react'; import { Button, Linking, @@ -65,7 +66,7 @@ class OpenSettingsExample extends React.Component { } const SendIntentButton = ({action, extras}: Props) => { - const [isOpeningIntent, setIsOpeningIntent] = React.useState(false); + const [isOpeningIntent, setIsOpeningIntent] = useState(false); const handleIntent = async () => { setIsOpeningIntent(true); diff --git a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js index d84ac777591b65..8226a81409743a 100644 --- a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js +++ b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js @@ -13,6 +13,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import React from 'react'; +import {useState} from 'react'; import {Image, ImageBackground, StyleSheet, Text, View} from 'react-native'; type Props = $ReadOnly<{ @@ -60,14 +61,14 @@ function LayeredImage(props: Props) { } function LayeredViewWithState(props: Props): React.Node { - const [s, setS] = React.useState(true); + const [s, setS] = useState(true); setTimeout(() => setS(!s), 5000); return ; } function LayeredImageWithState(props: Props): React.Node { - const [s, setS] = React.useState(true); + const [s, setS] = useState(true); setTimeout(() => setS(!s), 5000); return ( diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js index 0e795dc07bd683..9e4b343088bfc9 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js @@ -16,12 +16,12 @@ import type {ItemDataType} from '../components/itemData'; import {generateRandomItems} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; -import {StrictMode, useCallback, useEffect, useState} from 'react'; +import {StrictMode, memo, useCallback, useEffect, useState} from 'react'; import {Text} from 'react-native'; const TIMEOUT = 500; const FETCH_COUNT = 250; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function ItemFetcherBadExample(props: { onFetched: (items: ItemDataType[]) => void, @@ -65,8 +65,8 @@ function ItemFetcherGoodExample(props: { }, [onFetched, count]); } -const ItemFetcherBadExampleMemo = React.memo(ItemFetcherBadExample); -const ItemFetcherGoodExampleMemo = React.memo(ItemFetcherGoodExample); +const ItemFetcherBadExampleMemo = memo(ItemFetcherBadExample); +const ItemFetcherGoodExampleMemo = memo(ItemFetcherGoodExample); function EffectInRenderBadExample(): React.Node { const [visibleItems, setVisibleItems] = useState([]); const [fetchedItems, setFetchedItems] = useState([]); diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js index 58b81f9e0aa705..06b69481b10c71 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js @@ -16,10 +16,11 @@ import type {ScrollEvent} from 'react-native'; import {LIST_100_ITEMS} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; +import {memo} from 'react'; import {Text} from 'react-native'; const {useCallback, useState} = React; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function ReRenderWithNonPureChildBadExample(): React.Node { const [scrollOffset, setScrollOffset] = useState(0); diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js index fd11f96d320938..1c133ba144445a 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js @@ -16,10 +16,11 @@ import type {ScrollEvent} from 'react-native'; import {LIST_100_ITEMS} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; +import {memo} from 'react'; import {Text} from 'react-native'; const {useState, useCallback} = React; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function ReRenderWithObjectPropBadExample(): React.Node { const [scrollOffset, setScrollOffset] = useState(0); diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js index 4a5a3a30580039..9c829d43a75fd0 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js @@ -14,8 +14,9 @@ import {LIST_100_ITEMS} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; +import {memo} from 'react'; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function RenderOffscreenContentBadExample(): React.Node { return ; diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js index d3acfffc03f7e5..cd4025cc42ec5e 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js @@ -16,9 +16,10 @@ import type {ItemDataType} from '../components/itemData'; import {LIST_1000_ITEMS} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; +import {memo} from 'react'; const {useState, useEffect} = React; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function BadExample(props: {listData: ItemDataType[], filteredText: string}) { const {listData, filteredText} = props; diff --git a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js index d3acfffc03f7e5..cd4025cc42ec5e 100644 --- a/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js +++ b/packages/rn-tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js @@ -16,9 +16,10 @@ import type {ItemDataType} from '../components/itemData'; import {LIST_1000_ITEMS} from '../components/itemData'; import ItemList from '../components/ItemList'; import * as React from 'react'; +import {memo} from 'react'; const {useState, useEffect} = React; -const ItemListMemo = React.memo(ItemList); +const ItemListMemo = memo(ItemList); function BadExample(props: {listData: ItemDataType[], filteredText: string}) { const {listData, filteredText} = props; diff --git a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js index c8fd8fb92d56e7..b216527852dc72 100644 --- a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js +++ b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js @@ -16,13 +16,14 @@ import RNTesterButton from '../../components/RNTesterButton'; import RNTesterText from '../../components/RNTesterText'; import RNTOption from '../../components/RNTOption'; import * as React from 'react'; +import {useState} from 'react'; import {PermissionsAndroid, StyleSheet, View} from 'react-native'; function PermissionsExample() { - const [permission, setPermission] = React.useState( + const [permission, setPermission] = useState( PermissionsAndroid.PERMISSIONS.CAMERA, ); - const [hasPermission, setHasPermission] = React.useState('Not Checked'); + const [hasPermission, setHasPermission] = useState('Not Checked'); const requestPermission = async () => { let result; diff --git a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js index dc7839941e5718..519e515632c19b 100644 --- a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js +++ b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js @@ -12,11 +12,12 @@ import RNTesterText from '../../components/RNTesterText'; import {RNTesterThemeContext} from '../../components/RNTesterTheme'; -import React, {useState} from 'react'; +import * as React from 'react'; +import {useContext, useState} from 'react'; import {Button, PixelRatio, StyleSheet, TextInput, View} from 'react-native'; function LayoutSizeToPixel() { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); const [layoutDPSize, setLayoutDPSize] = useState(0); const pixelSize = PixelRatio.getPixelSizeForLayoutSize( layoutDPSize ? layoutDPSize : 0, @@ -54,7 +55,7 @@ function LayoutSizeToPixel() { } function RoundToNearestPixel() { - const theme = React.useContext(RNTesterThemeContext); + const theme = useContext(RNTesterThemeContext); const [layoutDPSizeText, setLayoutDPSizeText] = useState(''); const layoutDPSize = parseFloat(layoutDPSizeText); diff --git a/packages/rn-tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js b/packages/rn-tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js index 8e54bd12432bf3..fed5c839305f25 100644 --- a/packages/rn-tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js +++ b/packages/rn-tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js @@ -15,13 +15,14 @@ import type {Node} from 'react'; import PopupMenuAndroid from '@react-native/popup-menu-android'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; type Fruit = 'Apple' | 'Pear' | 'Banana' | 'Orange' | 'Kiwi'; const PopupMenu = () => { - const popupRef = React.useRef(); - const [fruit, setFruit] = React.useState(); + const popupRef = useRef(); + const [fruit, setFruit] = useState(); const fruits: Array = ['Apple', 'Pear', 'Banana', 'Orange', 'Kiwi']; const items = fruits.map(item => ({ label: item, diff --git a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js index 8a9e96873ff3df..d5905a95acfff0 100644 --- a/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js +++ b/packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js @@ -12,6 +12,7 @@ import RNTesterText from '../../components/RNTesterText'; import React from 'react'; +import {useState} from 'react'; import { Button, DeviceInfo, @@ -22,7 +23,7 @@ import { } from 'react-native'; function SafeAreaViewExample(): React.Node { - const [modalVisible, setModalVisible] = React.useState(false); + const [modalVisible, setModalVisible] = useState(false); const toggleModal = (visible: boolean) => { setModalVisible(visible); diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js index c0d44afaa77416..518b93d0af4a34 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js @@ -15,7 +15,7 @@ import RNTesterText from '../../components/RNTesterText'; import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample'; import nullthrows from 'nullthrows'; import * as React from 'react'; -import {useCallback, useState} from 'react'; +import {cloneElement, useCallback, useRef, useState} from 'react'; import { Platform, RefreshControl, @@ -84,7 +84,7 @@ class AppendingList extends React.Component< style={styles.scrollView}> {this.state.items.map(item => // $FlowFixMe[prop-missing] React.Element internal inspection - React.cloneElement(item, {key: item.props.msg}), + cloneElement(item, {key: item.props.msg}), )} {this.state.items.map(item => // $FlowFixMe[prop-missing] React.Element internal inspection - React.cloneElement(item, {key: item.props.msg, style: null}), + cloneElement(item, {key: item.props.msg, style: null}), )} @@ -127,7 +127,7 @@ class AppendingList extends React.Component< onPress={() => { this.setState(state => ({ items: [ - React.cloneElement(state.items[0], { + cloneElement(state.items[0], { style: {paddingBottom: Math.random() * 40}, }), ].concat(state.items.slice(1)), @@ -159,7 +159,7 @@ class AppendingList extends React.Component< onPress={() => { this.setState(state => ({ items: state.items.slice(0, -1).concat( - React.cloneElement(state.items[state.items.length - 1], { + cloneElement(state.items[state.items.length - 1], { style: {paddingBottom: Math.random() * 40}, }), ), @@ -569,7 +569,7 @@ const HorizontalScrollView = (props: { itemCount?: number, }) => { const {direction} = props; - const scrollRef = React.useRef>(); + const scrollRef = useRef>(); const title = direction === 'ltr' ? 'LTR Layout' : 'RTL Layout'; const items = props.itemCount == null ? ITEMS : ITEMS.slice(0, props.itemCount); @@ -1013,7 +1013,7 @@ const KeyboardExample = () => { const InvertStickyHeaders = () => { const [invertStickyHeaders, setInvertStickyHeaders] = useState(false); - const _scrollView = React.useRef>(null); + const _scrollView = useRef>(null); return ( {/* $FlowFixMe[incompatible-use] */} @@ -1054,7 +1054,7 @@ const InvertStickyHeaders = () => { }; const MultipleStickyHeaders = () => { - const _scrollView = React.useRef>(null); + const _scrollView = useRef>(null); const stickyHeaderStyle = {backgroundColor: 'yellow'}; return ( diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js index d820dfe904c554..7b4faf11d33287 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js @@ -8,6 +8,7 @@ 'use strict'; import * as React from 'react'; +import {useState} from 'react'; import { Button, Modal, @@ -20,8 +21,8 @@ import { } from 'react-native'; export function ScrollViewIndicatorInsetsExample() { - const [automaticallyAdjustsScrollIndicatorInsets, setAutomaticallyAdjustsScrollIndicatorInsets] = React.useState(true); - const [modalVisible, setModalVisible] = React.useState(false); + const [automaticallyAdjustsScrollIndicatorInsets, setAutomaticallyAdjustsScrollIndicatorInsets] = useState(true); + const [modalVisible, setModalVisible] = useState(false); const { height, width } = useWindowDimensions(); return ( diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js index 95f64433acac44..e664c12ea9a023 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js @@ -8,6 +8,7 @@ 'use strict'; import * as React from 'react'; +import {useState} from 'react'; import { FlatList, ScrollView, @@ -19,10 +20,10 @@ import { } from 'react-native'; export function ScrollViewKeyboardInsetsExample() { - const [automaticallyAdjustKeyboardInsets, setAutomaticallyAdjustKeyboardInsets] = React.useState(true); - const [flatList, setFlatList] = React.useState(false); - const [inverted, setInverted] = React.useState(false); - const [heightRestricted, setHeightRestricted] = React.useState(false); + const [automaticallyAdjustKeyboardInsets, setAutomaticallyAdjustKeyboardInsets] = useState(true); + const [flatList, setFlatList] = useState(false); + const [inverted, setInverted] = useState(false); + const [heightRestricted, setHeightRestricted] = useState(false); const scrollViewProps = { style: heightRestricted && styles.scrollViewHeightRestricted, diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js index bc400223a4c450..bc40525ddfa815 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js @@ -9,6 +9,7 @@ */ import * as React from 'react'; +import {useRef, useState} from 'react'; import { Button, Pressable, @@ -19,7 +20,7 @@ import { } from 'react-native'; function StickyHeader() { - const [backgroundColor, setBackgroundColor] = React.useState('blue'); + const [backgroundColor, setBackgroundColor] = useState('blue'); return ( (null); + const scrollRef = useRef<$FlowFixMe>(null); const components = []; for (var i = 1; i < 10; i++) { components.push(renderComponent1(i)); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js index 748cf11529c54b..093d69155689d8 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js @@ -12,6 +12,7 @@ import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; +import {useRef, useState} from 'react'; import {SectionList, StyleSheet, View} from 'react-native'; type SectionListProps = React.ElementProps; @@ -29,7 +30,7 @@ export function SectionList_BaseOnViewableItemsChanged(props: { waitForInteraction?: ?boolean, }): React.Node { const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props; - const [output, setOutput] = React.useState(''); + const [output, setOutput] = useState(''); const viewabilityConfig: ViewabilityConfig = { ...BASE_VIEWABILITY_CONFIG, waitForInteraction: waitForInteraction ?? false, @@ -49,7 +50,7 @@ export function SectionList_BaseOnViewableItemsChanged(props: { viewabilityConfig, horizontal, }; - const ref = React.useRef(null); + const ref = useRef(null); const onTest = useScrollRefScroll === true ? () => { diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js b/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js index 95c6ebf85e3f9c..426e9cd2efb92f 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js @@ -14,15 +14,16 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; export function SectionList_contentInset(): React.Node { const [initialContentInset, toggledContentInset] = [44, 88]; - const [output, setOutput] = React.useState( + const [output, setOutput] = useState( `contentInset top: ${initialContentInset.toString()}`, ); - const [exampleProps, setExampleProps] = React.useState({ + const [exampleProps, setExampleProps] = useState({ automaticallyAdjustContentInsets: false, contentInset: {top: initialContentInset}, contentOffset: {y: -initialContentInset, x: 0}, diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js b/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js index cab5d421605c39..9a95287180e2e8 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js @@ -9,12 +9,14 @@ */ 'use strict'; + import SectionListBaseExample from './SectionListBaseExample'; +import {useState} from 'react'; import * as React from 'react'; export function SectionList_inverted(): React.Node { - const [output, setOutput] = React.useState('inverted false'); - const [exampleProps, setExampleProps] = React.useState({ + const [output, setOutput] = useState('inverted false'); + const [exampleProps, setExampleProps] = useState({ inverted: false, }); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js b/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js index 4ca950e0d1182a..d0c4f1214546b4 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js @@ -10,15 +10,16 @@ import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; +import {useRef, useState} from 'react'; export function SectionList_onEndReached(): React.Node { - const [output, setOutput] = React.useState(''); + const [output, setOutput] = useState(''); const exampleProps = { onEndReached: (info: {distanceFromEnd: number, ...}) => setOutput('onEndReached'), onEndReachedThreshold: 0, }; - const ref = React.useRef(null); + const ref = useRef(null); const onTest = () => { const scrollResponder = ref?.current?.getScrollResponder(); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js index 6a1bd9806fd08a..565646e6fb1550 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js @@ -28,6 +28,7 @@ import { import RNTesterPage from '../../components/RNTesterPage'; import RNTesterText from '../../components/RNTesterText'; import React from 'react'; +import {useRef, useState} from 'react'; import { Alert, Animated, @@ -178,12 +179,12 @@ export function SectionList_scrollable(Props: {...}): React.MixedElement { [{nativeEvent: {contentOffset: {y: scrollPos}}}], {useNativeDriver: true}, ); - const [filterText, setFilterText] = React.useState(''); - const [virtualized, setVirtualized] = React.useState(true); - const [logViewable, setLogViewable] = React.useState(false); - const [debug, setDebug] = React.useState(false); - const [inverted, setInverted] = React.useState(false); - const [data, setData] = React.useState(genNewerItems(1000)); + const [filterText, setFilterText] = useState(''); + const [virtualized, setVirtualized] = useState(true); + const [logViewable, setLogViewable] = useState(false); + const [debug, setDebug] = useState(false); + const [inverted, setInverted] = useState(false); + const [data, setData] = useState(genNewerItems(1000)); const filterRegex = new RegExp(String(filterText), 'i'); const filter = (item: Item) => @@ -212,7 +213,7 @@ export function SectionList_scrollable(Props: {...}): React.MixedElement { setData([...data.slice(0, index), item, ...data.slice(index + 1)]); }; - const ref = React.useRef>>(null); + const ref = useRef>>(null); const scrollToLocation = (sectionIndex: number, itemIndex: number) => { // $FlowFixMe[method-unbinding] added when improving typing for this parameters if (ref != null && ref.current?.scrollToLocation != null) { diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js b/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js index dcd5b89aa0d917..4ccd4f340084c4 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js @@ -9,14 +9,14 @@ */ 'use strict'; + import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; +import {useState} from 'react'; export function SectionList_stickySectionHeadersEnabled(): React.Node { - const [output, setOutput] = React.useState( - 'stickySectionHeadersEnabled false', - ); - const [exampleProps, setExampleProps] = React.useState({ + const [output, setOutput] = useState('stickySectionHeadersEnabled false'); + const [exampleProps, setExampleProps] = useState({ stickySectionHeadersEnabled: false, }); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js index 80358011cc9fff..c7823baf1def90 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js @@ -10,6 +10,7 @@ import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; +import {useRef} from 'react'; import {StyleSheet, Text, View} from 'react-native'; const Separator = @@ -37,7 +38,7 @@ export function SectionList_withSeparators(): React.Node { ItemSeparatorComponent: Separator('lightgreen', 'green', false), SectionSeparatorComponent: Separator('lightblue', 'blue', true), }; - const ref = React.useRef(null); + const ref = useRef(null); return ; } diff --git a/packages/rn-tester/js/examples/Share/ShareExample.js b/packages/rn-tester/js/examples/Share/ShareExample.js index 0b470daba987ed..720fbb36685378 100644 --- a/packages/rn-tester/js/examples/Share/ShareExample.js +++ b/packages/rn-tester/js/examples/Share/ShareExample.js @@ -12,6 +12,7 @@ import RNTesterText from '../../components/RNTesterText'; import React from 'react'; +import {useState} from 'react'; import {Button, Share, StyleSheet, View} from 'react-native'; const shareMessage = () => { @@ -81,7 +82,7 @@ const ShareMessageWithTitle = () => { }; const SharedAction = () => { - const [shared, setShared] = React.useState(); + const [shared, setShared] = useState(); const sharedAction = async () => { try { diff --git a/packages/rn-tester/js/examples/SwipeableCardExample/SwipeableCardExample.js b/packages/rn-tester/js/examples/SwipeableCardExample/SwipeableCardExample.js index ffc872314b2622..df711a3a887a4d 100644 --- a/packages/rn-tester/js/examples/SwipeableCardExample/SwipeableCardExample.js +++ b/packages/rn-tester/js/examples/SwipeableCardExample/SwipeableCardExample.js @@ -11,6 +11,7 @@ import type {ListRenderItemInfo} from 'react-native'; import * as React from 'react'; +import {useEffect, useMemo, useRef, useState} from 'react'; import { Animated, FlatList, @@ -43,7 +44,7 @@ module.exports = { function SwipeableCardExample() { const cardColors = ['red', 'blue', 'pink', 'aquamarine']; - const [currentIndex, setCurrentIndex] = React.useState(0); + const [currentIndex, setCurrentIndex] = useState(0); const nextIndex = currentIndex + 1; @@ -87,10 +88,9 @@ function SwipeableCard(props: { color: string, onSwipedOut: () => void, }) { - // eslint-disable-next-line react-hooks/exhaustive-deps - const movementX = React.useMemo(() => new Animated.Value(0), [props.color]); + const movementX = useMemo(() => new Animated.Value(0), []); - const panResponder = React.useMemo( + const panResponder = useMemo( () => PanResponder.create({ onMoveShouldSetPanResponderCapture: (e, gestureState) => { @@ -148,9 +148,9 @@ function Card(props: {color: string}) { const separatorComponent = () => ; - const listRef = React.useRef>(); + const listRef = useRef>(); - React.useEffect(() => { + useEffect(() => { listRef.current?.scrollToOffset({offset: 0, animated: false}); }, [props.color]); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js index 948635ff940109..025215a1df808c 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js @@ -18,10 +18,11 @@ import type { import ExampleTextInput from './ExampleTextInput'; import TextInputSharedExamples from './TextInputSharedExamples'; import React from 'react'; +import {useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; const ToggleDefaultPaddingExample = (): React.Node => { - const [hasPadding, setHasPadding] = React.useState(false); + const [hasPadding, setHasPadding] = useState(false); return ( diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 28eaa39d487094..eadeccba10975e 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -20,6 +20,7 @@ import RNTesterText from '../../components/RNTesterText'; import ExampleTextInput from './ExampleTextInput'; import TextInputSharedExamples from './TextInputSharedExamples'; import React from 'react'; +import {useRef} from 'react'; import { Alert, Button, @@ -210,9 +211,9 @@ class SecureEntryExample extends React.Component<$FlowFixMeProps, any> { } const TextInputWithFocusButton = () => { - const inputToFocusRef = React.useRef | null>(null); + const inputToFocusRef = useRef | null>( + null, + ); return ( }; class BlurOnSubmitExample extends React.Component<{...}> { - ref1: ExampleRef = React.createRef(); - ref2: ExampleRef = React.createRef(); - ref3: ExampleRef = React.createRef(); - ref4: ExampleRef = React.createRef(); - ref5: ExampleRef = React.createRef(); + ref1: ExampleRef = createRef(); + ref2: ExampleRef = createRef(); + ref3: ExampleRef = createRef(); + ref4: ExampleRef = createRef(); + ref5: ExampleRef = createRef(); render(): React.Node { return ( @@ -272,17 +272,17 @@ class BlurOnSubmitExample extends React.Component<{...}> { } class SubmitBehaviorExample extends React.Component<{...}> { - ref1: ExampleRef = React.createRef(); - ref2: ExampleRef = React.createRef(); - ref3: ExampleRef = React.createRef(); - ref4: ExampleRef = React.createRef(); - ref5: ExampleRef = React.createRef(); - ref6: ExampleRef = React.createRef(); - ref7: ExampleRef = React.createRef(); - ref8: ExampleRef = React.createRef(); - ref9: ExampleRef = React.createRef(); - ref10: ExampleRef = React.createRef(); - ref11: ExampleRef = React.createRef(); + ref1: ExampleRef = createRef(); + ref2: ExampleRef = createRef(); + ref3: ExampleRef = createRef(); + ref4: ExampleRef = createRef(); + ref5: ExampleRef = createRef(); + ref6: ExampleRef = createRef(); + ref7: ExampleRef = createRef(); + ref8: ExampleRef = createRef(); + ref9: ExampleRef = createRef(); + ref10: ExampleRef = createRef(); + ref11: ExampleRef = createRef(); render(): React.Node { return ( @@ -608,7 +608,7 @@ class SelectionExample extends React.Component< } function UncontrolledExample() { - const [isFocused, setIsFocused] = React.useState(false); + const [isFocused, setIsFocused] = useState(false); return ( { +const TextStylesExample = memo(() => { const theme = useContext(RNTesterThemeContext); return ( @@ -887,10 +887,10 @@ function AutogrowingTextInputExample({ style, ...props }: React.ElementConfig) { - const [multiline, setMultiline] = React.useState(true); - const [fullWidth, setFullWidth] = React.useState(true); - const [text, setText] = React.useState(''); - const [contentSize, setContentSize] = React.useState({width: 0, height: 0}); + const [multiline, setMultiline] = useState(true); + const [fullWidth, setFullWidth] = useState(true); + const [text, setText] = useState(''); + const [contentSize, setContentSize] = useState({width: 0, height: 0}); return ( diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js index 21b70de5d6111f..e1a844e1ce8037 100644 --- a/packages/rn-tester/js/examples/Transform/TransformExample.js +++ b/packages/rn-tester/js/examples/Transform/TransformExample.js @@ -8,7 +8,8 @@ * @flow */ -import React, {useEffect, useState} from 'react'; +import * as React from 'react'; +import {useEffect, useRef, useState} from 'react'; import {Animated, Easing, StyleSheet, Text, View} from 'react-native'; function AnimateTransformSingleProp() { @@ -49,7 +50,7 @@ function AnimateTransformSingleProp() { } function TransformOriginExample() { - const rotateAnim = React.useRef(new Animated.Value(0)).current; + const rotateAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.loop( diff --git a/packages/rn-tester/js/utils/useJsStalls.js b/packages/rn-tester/js/utils/useJsStalls.js index e8c4a7fdd27bc9..7f602ac5c63917 100644 --- a/packages/rn-tester/js/utils/useJsStalls.js +++ b/packages/rn-tester/js/utils/useJsStalls.js @@ -10,7 +10,7 @@ import type {RNTesterJsStallsState} from '../types/RNTesterTypes'; -import * as React from 'react'; +import {useCallback, useEffect, useState} from 'react'; const INITIAL_STATE: RNTesterJsStallsState = { stallIntervalId: null, @@ -30,20 +30,20 @@ const useJsStalls = (): ({ state: RNTesterJsStallsState, }) => { const [stallsState, setStallsState] = - React.useState(INITIAL_STATE); + useState(INITIAL_STATE); const {stallIntervalId} = stallsState; - React.useEffect(() => { + useEffect(() => { return () => clearInterval(stallIntervalId); }, [stallIntervalId]); - const onDisableForceJsStalls = React.useCallback( + const onDisableForceJsStalls = useCallback( () => setStallsState(state => ({...state, stallIntervalId: null})), [], ); - const onEnableForceJsStalls = React.useCallback(() => { + const onEnableForceJsStalls = useCallback(() => { const intervalId = setInterval(() => { const start = Date.now(); @@ -55,7 +55,7 @@ const useJsStalls = (): ({ setStallsState(state => ({...state, stallIntervalId: intervalId})); }, []); - const onEnableJsStallsTracking = React.useCallback(() => { + const onEnableJsStallsTracking = useCallback(() => { const JSEventLoopWatchdog = require('react-native/Libraries/Interaction/JSEventLoopWatchdog').default; @@ -82,7 +82,7 @@ const useJsStalls = (): ({ }); }, []); - const onDisableJsStallsTracking = React.useCallback(() => { + const onDisableJsStallsTracking = useCallback(() => { console.warn('Cannot disable yet...'); }, []); diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index bd29ced5c6ff2b..173858f8d3cd16 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -54,6 +54,7 @@ import { import invariant from 'invariant'; import nullthrows from 'nullthrows'; import * as React from 'react'; +import {cloneElement} from 'react'; import { I18nManager, Platform, @@ -902,7 +903,7 @@ class VirtualizedList extends StateSafePureComponent< return element; } - return React.cloneElement(element, { + return cloneElement(element, { onLayout: (event: LayoutChangeEvent) => { this._onLayoutEmpty(event); // $FlowFixMe[prop-missing] React.Element internal inspection @@ -1129,7 +1130,7 @@ class VirtualizedList extends StateSafePureComponent< registerAsNestedChild: this._registerAsNestedChild, unregisterAsNestedChild: this._unregisterAsNestedChild, }}> - {React.cloneElement( + {cloneElement( ( this.props.renderScrollComponent || this._defaultRenderScrollComponent diff --git a/packages/virtualized-lists/Lists/VirtualizedListContext.js b/packages/virtualized-lists/Lists/VirtualizedListContext.js index b40128f2dd2b26..9897ecd7e95df4 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListContext.js +++ b/packages/virtualized-lists/Lists/VirtualizedListContext.js @@ -11,7 +11,7 @@ import typeof VirtualizedList from './VirtualizedList'; import * as React from 'react'; -import {useContext, useMemo} from 'react'; +import {createContext, useContext, useMemo} from 'react'; type Context = $ReadOnly<{ cellKey: ?string, @@ -35,7 +35,7 @@ type Context = $ReadOnly<{ }>; export const VirtualizedListContext: React.Context = - React.createContext(null); + createContext(null); if (__DEV__) { VirtualizedListContext.displayName = 'VirtualizedListContext'; } diff --git a/packages/virtualized-lists/Lists/VirtualizedSectionList.js b/packages/virtualized-lists/Lists/VirtualizedSectionList.js index b2a662380e92ea..14cb93ca3bdc58 100644 --- a/packages/virtualized-lists/Lists/VirtualizedSectionList.js +++ b/packages/virtualized-lists/Lists/VirtualizedSectionList.js @@ -15,6 +15,7 @@ import VirtualizedList from './VirtualizedList'; import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils'; import invariant from 'invariant'; import * as React from 'react'; +import {useEffect, useState} from 'react'; type DefaultSectionT = { data: any, @@ -509,11 +510,11 @@ function ItemWithSeparator( } = props; const [leadingSeparatorHiglighted, setLeadingSeparatorHighlighted] = - React.useState(false); + useState(false); - const [separatorHighlighted, setSeparatorHighlighted] = React.useState(false); + const [separatorHighlighted, setSeparatorHighlighted] = useState(false); - const [leadingSeparatorProps, setLeadingSeparatorProps] = React.useState< + const [leadingSeparatorProps, setLeadingSeparatorProps] = useState< ItemWithSeparatorCommonProps, >({ leadingItem: props.leadingItem, @@ -522,7 +523,7 @@ function ItemWithSeparator( trailingItem: props.item, trailingSection: props.trailingSection, }); - const [separatorProps, setSeparatorProps] = React.useState< + const [separatorProps, setSeparatorProps] = useState< ItemWithSeparatorCommonProps, >({ leadingItem: props.item, @@ -532,7 +533,7 @@ function ItemWithSeparator( trailingSection: props.trailingSection, }); - React.useEffect(() => { + useEffect(() => { setSelfHighlightCallback(cellKey, setSeparatorHighlighted); // $FlowFixMe[incompatible-call] setSelfUpdatePropsCallback(cellKey, setSeparatorProps); diff --git a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js index d0dae16b5d0f01..b813e4f0568730 100644 --- a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js +++ b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js @@ -13,6 +13,7 @@ import VirtualizedList from '../VirtualizedList'; import {format} from 'node:util'; import * as React from 'react'; +import {createElement, createRef} from 'react'; import {act, create} from 'react-test-renderer'; jest.useFakeTimers(); @@ -164,7 +165,7 @@ describe('VirtualizedList', () => { }); it('scrollToEnd works with null list', async () => { - const listRef = React.createRef(null); + const listRef = createRef(null); await act(() => { create( { }); it('empty component returns the original element if it is a React.Fragment', () => { - const listRef = React.createRef(); + const listRef = createRef(); const fragment = (
Test
@@ -363,7 +364,7 @@ describe('VirtualizedList', () => { }); it('empty component clones the element and adds onLayout and style props if not a Fragment', () => { - const listRef = React.createRef(); + const listRef = createRef(); const element =
Test
; const inversionStyle = {transform: [{scaleY: -1}]}; @@ -396,7 +397,7 @@ describe('VirtualizedList', () => { }); it('empty component preserves original onLayout handler if present', () => { - const listRef = React.createRef(); + const listRef = createRef(); const originalOnLayout = jest.fn(); const element =
Test
; const inversionStyle = {transform: [{scaleY: -1}]}; @@ -494,7 +495,7 @@ describe('VirtualizedList', () => { }); it('getScrollRef for case where it returns a ScrollView', async () => { - const listRef = React.createRef(null); + const listRef = createRef(null); await act(() => { create( @@ -516,7 +517,7 @@ describe('VirtualizedList', () => { }); it('getScrollRef for case where it returns a View', async () => { - const listRef = React.createRef(null); + const listRef = createRef(null); await act(() => { create( @@ -888,7 +889,7 @@ describe('VirtualizedList', () => { await act(() => { component = create( React.createElement('Header')} + ListHeaderComponent={() => createElement('Header')} initialNumToRender={10} {...baseItemProps(items)} {...fixedHeightItemLayoutProps(ITEM_HEIGHT)} @@ -1068,7 +1069,7 @@ it('gracefully handles too large initialScrollIndex', async () => { const items = generateItems(10); const ITEM_HEIGHT = 10; - const listRef = React.createRef(); + const listRef = createRef(); const mockWarn = jest.spyOn(console, 'warn').mockImplementation(() => {}); @@ -1128,7 +1129,7 @@ it('scrolls after content sizing with integer initialScrollIndex', async () => { const items = generateItems(10); const ITEM_HEIGHT = 10; - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -1160,7 +1161,7 @@ it('scrolls after content sizing with near-zero initialScrollIndex', async () => const items = generateItems(10); const ITEM_HEIGHT = 10; - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -1192,7 +1193,7 @@ it('scrolls after content sizing with near-end initialScrollIndex', async () => const items = generateItems(10); const ITEM_HEIGHT = 10; - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -1229,7 +1230,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (getItemLayo index, }); - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -1259,7 +1260,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (getItemLayo it('scrolls after content sizing with fractional initialScrollIndex (cached layout)', async () => { const items = generateItems(10); - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -1300,7 +1301,7 @@ it('scrolls after content sizing with fractional initialScrollIndex (cached layo it('scrolls after content sizing with fractional initialScrollIndex (layout estimation)', async () => { const items = generateItems(10); - const listRef = React.createRef(null); + const listRef = createRef(null); let component; await act(() => { @@ -2557,7 +2558,7 @@ function baseItemProps(items) { return { data: items, renderItem: ({item}) => - React.createElement('MockCellItem', {value: item.key, ...item}), + createElement('MockCellItem', {value: item.key, ...item}), getItem: (data, index) => data[index], getItemCount: data => data.length, stickyHeaderIndices: stickyHeaderIndices(items),