Eliminate exact React.Element types in react-native codebase

Summary: Changelog: [Internal] Reviewed By: alexmckenley Differential Revision: D61389820 fbshipit-source-id: 566a4904c570e24f5beb965734020f8b9c1ed819
Saadnajmi · Aug 16, 2024 · 77154c6 · 77154c6
1 parent db80d78
commit 77154c6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 23 deletions.
diff --git a/packages/react-native-test-renderer/src/renderer/index.js b/packages/react-native-test-renderer/src/renderer/index.js
@@ -10,8 +10,6 @@
 
 'use strict';
 
-import type {Element, ElementType} from 'react';
-
 import * as FabricUIManager from 'react-native/Libraries/ReactNative/__mocks__/FabricUIManager';
 import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
 import {act} from 'react-test-renderer';
@@ -51,7 +49,7 @@ function buildRenderResult(rootNode: ReactNode): RenderResult {
   };
 }
 
-export function render(element: Element<ElementType>): RenderResult {
+export function render(element: React.MixedElement): RenderResult {
   const manager = FabricUIManager.getFabricUIManager();
   if (!manager) {
     throw new Error('No FabricUIManager found');

diff --git a/packages/react-native/Libraries/Lists/SectionListModern.js b/packages/react-native/Libraries/Lists/SectionListModern.js
@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {AbstractComponent, Element, ElementRef} from 'react';
+import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -56,7 +56,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

diff --git a/packages/react-native/Libraries/ReactNative/RendererImplementation.js b/packages/react-native/Libraries/ReactNative/RendererImplementation.js
@@ -14,7 +14,7 @@ import type {
   Node,
 } from '../Renderer/shims/ReactNativeTypes';
 import type ReactFabricHostComponent from './ReactFabricPublicInstance/ReactFabricHostComponent';
-import type {Element, ElementRef, ElementType} from 'react';
+import type {ElementRef, ElementType} from 'react';
 
 import {
   onCaughtError,
@@ -28,7 +28,7 @@ export function renderElement({
   useFabric,
   useConcurrentRoot,
 }: {
-  element: Element<ElementType>,
+  element: React.MixedElement,
   rootTag: number,
   useFabric: boolean,
   useConcurrentRoot: boolean,

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
@@ -5819,7 +5819,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   extraData?: any,
   initialNumToRender?: ?number,
   inverted?: ?boolean,
@@ -7572,7 +7572,7 @@ declare module.exports: ReactNativeRuntimeDiagnostics;
 
 exports[`public API should not change unintentionally Libraries/ReactNative/RendererImplementation.js 1`] = `
 "declare export function renderElement({
-  element: Element<ElementType>,
+  element: React.MixedElement,
   rootTag: number,
   useFabric: boolean,
   useConcurrentRoot: boolean,

diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js
@@ -8,8 +8,6 @@
  * @flow
  */
 
-import type {Element, Node} from 'react';
-
 import React, {useEffect, useState} from 'react';
 import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
 
@@ -297,15 +295,15 @@ exports.examples = [
   {
     title: 'Perspective, Rotate, Animation',
     description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
-    render(): Element<any> {
+    render(): React.Node {
       return <Flip />;
     },
   },
   {
     title: 'Translate, Rotate, Scale',
     description:
       "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box1} />
@@ -317,7 +315,7 @@ exports.examples = [
     title: 'Scale, Translate, Rotate, ',
     description:
       "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box2} />
@@ -328,7 +326,7 @@ exports.examples = [
   {
     title: 'Rotate',
     description: "rotate: '30deg'",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box3step1} />
@@ -339,7 +337,7 @@ exports.examples = [
   {
     title: 'Rotate, Scale',
     description: "rotate: '30deg', scaleX: 2, scaleY: 2",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box3step2} />
@@ -351,7 +349,7 @@ exports.examples = [
     title: 'Rotate, Scale, Translate ',
     description:
       "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box3step3} />
@@ -362,7 +360,7 @@ exports.examples = [
   {
     title: 'Translate, Scale, Rotate',
     description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={styles.box4} />
@@ -373,7 +371,7 @@ exports.examples = [
   {
     title: 'Translate, Rotate, Scale',
     description: "translate: [-50, 35], rotate: '50deg', scale: 2",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={[styles.box5, styles.box5Transform]} />
@@ -384,14 +382,14 @@ exports.examples = [
   {
     title: 'Animate Translate single prop',
     description: "rotate: '360deg'",
-    render(): Node {
+    render(): React.Node {
       return <AnimateTransformSingleProp />;
     },
   },
   {
     title: 'Transform using a string',
     description: "transform: 'translate(-50px, 35px) rotate(50deg) scale(2)'",
-    render(): Node {
+    render(): React.Node {
       return (
         <View style={styles.container}>
           <View style={[styles.box7, styles.box7Transform]} />
@@ -402,14 +400,14 @@ exports.examples = [
   {
     title: 'Transform origin',
     description: "transformOrigin: 'top left'",
-    render(): Node {
+    render(): React.Node {
       return <TransformOriginExample />;
     },
   },
   {
     title: 'Translate Percentage',
     description: "transform: 'translate(50%)'",
-    render(): Node {
+    render(): React.Node {
       return <TranslatePercentage />;
     },
   },