Migrate import React to import * as React (#50433)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50433

Make React imports consistent across react-native source code to also align with Flow tooling.

flow-api-translator adds `import * as React from 'react';` if there is no React import and React namespace has to be used after translation.

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D72238732

fbshipit-source-id: 5f8cfeab26f397684b1d802731729be7071b5da7

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

@@ -17,7 +17,7 @@ import AndroidSwipeRefreshLayoutNativeComponent, {
 import PullToRefreshViewNativeComponent, {
   Commands as PullToRefreshCommands,
 } from './PullToRefreshViewNativeComponent';
-import React from 'react';
+import * as React from 'react';
 
 const Platform = require('../../Utilities/Platform').default;
 

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

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import React from 'react';
+import * as React from 'react';
 
 type Props = $ReadOnly<{
   /**

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -26,7 +26,7 @@ import type {
   AccessibilityProps,
 } from './ViewAccessibility';
 
-import React from 'react';
+import * as React from 'react';
 
 export type ViewLayout = LayoutRectangle;
 export type ViewLayoutEvent = LayoutChangeEvent;

packages/react-native/Libraries/Image/ImageProps.js

@@ -24,9 +24,10 @@ import type {
 import type {ImageType} from './ImageTypes.flow';
 import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource, ImageURISource} from './ImageSource';
-import type React from 'react';
 import type {ElementRef, RefSetter} from 'react';
 
+import * as React from 'react';
+
 export type ImageSourcePropType = ImageSource;
 
 type ImageProgressEventDataIOS = {

packages/react-native/Libraries/Lists/FlatList.js

@@ -22,7 +22,7 @@ import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import View from '../Components/View/View';
 import VirtualizedLists from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
-import React from 'react';
+import * as React from 'react';
 
 const StyleSheet = require('../StyleSheet/StyleSheet').default;
 const deepDiffer = require('../Utilities/differ/deepDiffer').default;

packages/react-native/Libraries/Lists/SectionListModern.js

@@ -21,7 +21,8 @@ import type {ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import VirtualizedLists from '@react-native/virtualized-lists';
-import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import * as React from 'react';
+import {forwardRef, useImperativeHandle, useRef} from 'react';
 
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 

packages/react-native/Libraries/Modal/Modal.js

@@ -19,7 +19,7 @@ import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
 import VirtualizedLists from '@react-native/virtualized-lists';
-import React from 'react';
+import * as React from 'react';
 
 const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const View = require('../Components/View/View').default;

packages/react-native/Libraries/NewAppScreen/components/DebugInstructions.js

@@ -11,7 +11,7 @@
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import React from 'react';
+import * as React from 'react';
 
 const styles = StyleSheet.create({
   highlight: {

packages/react-native/Libraries/NewAppScreen/components/Header.js

@@ -14,7 +14,7 @@ import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
 import HermesBadge from './HermesBadge';
-import React from 'react';
+import * as React from 'react';
 
 const Header = (): React.Node => {
   const isDarkMode = useColorScheme() === 'dark';

packages/react-native/Libraries/NewAppScreen/components/HermesBadge.js

@@ -13,7 +13,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
-import React from 'react';
+import * as React from 'react';
 
 const HermesBadge = (): React.Node => {
   const isDarkMode = useColorScheme() === 'dark';

packages/react-native/Libraries/NewAppScreen/components/LearnMoreLinks.js

@@ -15,7 +15,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
-import React, {Fragment} from 'react';
+import * as React from 'react';
 
 const links = [
   {
@@ -84,7 +84,7 @@ const LinkList = (): React.Node => {
   return (
     <View style={styles.container}>
       {links.map(({id, title, link, description}) => (
-        <Fragment key={id}>
+        <React.Fragment key={id}>
           <View
             style={[
               styles.separator,
@@ -108,7 +108,7 @@ const LinkList = (): React.Node => {
               {description}
             </Text>
           </TouchableOpacity>
-        </Fragment>
+        </React.Fragment>
       ))}
     </View>
   );

packages/react-native/Libraries/NewAppScreen/components/ReloadInstructions.js

@@ -11,7 +11,7 @@
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import React from 'react';
+import * as React from 'react';
 
 const styles = StyleSheet.create({
   highlight: {

packages/react-native/Libraries/Text/TextProps.js

@@ -25,7 +25,7 @@ import type {
   TextLayoutEvent,
 } from '../Types/CoreEventTypes';
 
-import React from 'react';
+import * as React from 'react';
 
 export type PressRetentionOffset = $ReadOnly<{
   top: number,

packages/react-native/Libraries/Text/__tests__/Text-test.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
-import React from 'react';
+import * as React from 'react';
 
 const render = require('../../../jest/renderer');
 const Text = require('../Text').default;

packages/react-native/Libraries/Utilities/ReactNativeTestTools.js

@@ -13,7 +13,7 @@
 import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-renderer';
 
 import TouchableWithoutFeedback from '../Components/Touchable/TouchableWithoutFeedback';
-import React from 'react';
+import * as React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 
 const Switch = require('../Components/Switch/Switch').default;