Replace React.Element<any> and unnecessarily specific React.Element with React.MixedElement (#45923)

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

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D60872182

fbshipit-source-id: b81fb43968c52cbfdb4a9fa57f1175aabc2a3939

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

@@ -105,7 +105,7 @@ type Props = $ReadOnly<{|
   /**
    * The navigation view that will be rendered to the side of the screen and can be pulled in.
    */
-  renderNavigationView: () => React.Element<any>,
+  renderNavigationView: () => React.MixedElement,
 
   /**
    * Make the drawer take the entire screen and draw the background of the

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

@@ -22,7 +22,7 @@ class RefreshControlMock extends React.Component<{...}> {
   componentDidMount() {
     RefreshControlMock.latestRef = this;
   }
-  render(): React.Element<typeof RCTRefreshControl> {
+  render(): React.MixedElement {
     return <RCTRefreshControl />;
   }
 }

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -335,7 +335,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   _renderItem = ({
     item,
     index,
-  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+  }: RenderItemProps<NetworkRequestInfo>): React.MixedElement => {
     const tableRowViewStyle = [
       styles.tableRow,
       index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,

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

@@ -617,7 +617,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
     renderItem: ?RenderItemType<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,

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

@@ -115,7 +115,7 @@ function expectNoConsoleError() {
 
 async function expectRendersMatchingSnapshot(
   name: string,
-  ComponentProvider: () => React.Element<any>,
+  ComponentProvider: () => React.MixedElement,
   unmockComponent: () => mixed,
 ) {
   let instance;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -9403,7 +9403,7 @@ declare function expectNoConsoleWarn(): void;
 declare function expectNoConsoleError(): void;
 declare function expectRendersMatchingSnapshot(
   name: string,
-  ComponentProvider: () => React.Element<any>,
+  ComponentProvider: () => React.MixedElement,
   unmockComponent: () => mixed
 ): void;
 declare function maximumDepthOfJSON(node: ?ReactTestRendererJSON): number;

packages/react-native/jest/mockModal.js

@@ -12,13 +12,11 @@
 
 'use strict';
 
-import typeof Modal from '../Libraries/Modal/Modal';
-
 const React = require('react');
 
 function mockModal(BaseComponent: $FlowFixMe) {
   class ModalMock extends BaseComponent {
-    render(): React.Element<Modal> | null {
+    render(): React.MixedElement | null {
       if (this.props.visible === false) {
         return null;
       }

packages/react-native/jest/mockScrollView.js

@@ -20,7 +20,7 @@ const RCTScrollView: $FlowFixMe = requireNativeComponent('RCTScrollView');
 
 function mockScrollView(BaseComponent: $FlowFixMe) {
   class ScrollViewMock extends BaseComponent {
-    render(): React.Element<typeof RCTScrollView> {
+    render(): React.MixedElement {
       return (
         <RCTScrollView {...this.props}>
           {this.props.refreshControl}

packages/react-native/jest/renderer.js

@@ -16,7 +16,7 @@ import * as React from 'react';
 import TestRenderer from 'react-test-renderer';
 
 export async function create(
-  Component: React.Element<any>,
+  Component: React.MixedElement,
 ): Promise<ReactTestRenderer> {
   let component;
   await TestRenderer.act(async () => {
@@ -33,7 +33,7 @@ export async function unmount(testRenderer: ReactTestRenderer) {
 
 export async function update(
   testRenderer: ReactTestRenderer,
-  element: React.Element<any>,
+  element: React.MixedElement,
 ) {
   await TestRenderer.act(async () => {
     testRenderer.update(element);

packages/rn-tester/js/components/RNTesterExampleFilter.js

@@ -100,7 +100,7 @@ class RNTesterExampleFilter<T> extends React.Component<Props<T>, State> {
     }
   }
 
-  _renderTextInput(): ?React.Element<any> {
+  _renderTextInput(): ?React.MixedElement {
     if (this.props.disableSearch) {
       return null;
     }

packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js

@@ -277,7 +277,7 @@ exports.description = 'Android specific Accessibility APIs.';
 exports.examples = [
   {
     title: 'Accessibility elements',
-    render(): React.Element<typeof AccessibilityAndroidExample> {
+    render(): React.MixedElement {
       return <AccessibilityAndroidExample />;
     },
   },

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -1809,80 +1809,80 @@ exports.description = 'Examples of using Accessibility APIs.';
 exports.examples = [
   {
     title: 'Accessibility expanded',
-    render(): React.Element<typeof AccessibilityExpandedExample> {
+    render(): React.MixedElement {
       return <AccessibilityExpandedExample />;
     },
   },
   {
     title: 'Accessibility elements',
-    render(): React.Element<typeof AccessibilityExample> {
+    render(): React.MixedElement {
       return <AccessibilityExample />;
     },
   },
   {
     title: 'Automatic Content Grouping',
-    render(): React.Element<typeof AutomaticContentGrouping> {
+    render(): React.MixedElement {
       return <AutomaticContentGrouping />;
     },
   },
   {
     title: 'New accessibility roles and states',
-    render(): React.Element<typeof AccessibilityRoleAndStateExample> {
+    render(): React.MixedElement {
       return <AccessibilityRoleAndStateExample />;
     },
   },
   {
     title: 'Accessibility action examples',
-    render(): React.Element<typeof AccessibilityActionsExample> {
+    render(): React.MixedElement {
       return <AccessibilityActionsExample />;
     },
   },
   {
     title: 'Fake Slider Example',
-    render(): React.Element<typeof FakeSliderExample> {
+    render(): React.MixedElement {
       return <FakeSliderExample />;
     },
   },
   {
     title: 'Fake SliderExample For AccessibilityValue',
-    render(): React.Element<typeof FakeSliderExampleForAccessibilityValue> {
+    render(): React.MixedElement {
       return <FakeSliderExampleForAccessibilityValue />;
     },
   },
   {
     title: 'Check if the display options are enabled',
-    render(): React.Element<typeof DisplayOptionsStatusExample> {
+    render(): React.MixedElement {
       return <DisplayOptionsStatusExample />;
     },
   },
   {
     title: 'Check if the screen reader announces',
-    render(): React.Element<typeof AnnounceForAccessibility> {
+    render(): React.MixedElement {
       return <AnnounceForAccessibility />;
     },
   },
   {
     title: 'Check if accessibility is focused',
-    render(): React.Element<typeof SetAccessibilityFocusExample> {
+    render(): React.MixedElement {
       return <SetAccessibilityFocusExample />;
     },
   },
   {
     title: 'Check if these properties are enabled',
-    render(): React.Element<typeof EnabledExamples> {
+    render(): React.MixedElement {
       return <EnabledExamples />;
     },
   },
   {
     title: 'Testing importantForAccessibility',
-    render(): React.Element<typeof ImportantForAccessibilityExamples> {
+    render(): React.MixedElement {
       return <ImportantForAccessibilityExamples />;
     },
   },
   {
     title:
       'Check if accessibilityState disabled is announced when the screenreader focus moves on the image',
-    render(): React.Element<typeof Image> {
+    render(): React.MixedElement {
       return (
         <Image
           accessible={true}
@@ -1896,9 +1896,7 @@ exports.examples = [
   },
   {
     title: 'TextInput with aria-labelledby attribute',
-    render(): React.Element<
-      typeof AccessibilityTextInputWithArialabelledByAttributeExample,
-    > {
+    render(): React.MixedElement {
       return <AccessibilityTextInputWithArialabelledByAttributeExample />;
     },
   },

packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -79,7 +79,7 @@ exports.description = 'iOS specific Accessibility APIs';
 exports.examples = [
   {
     title: 'iOS Accessibility elements',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AccessibilityIOSExample />;
     },
   },

packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js

@@ -464,61 +464,61 @@ exports.description = "Interface to show iOS' action sheets";
 exports.examples = [
   {
     title: 'Show Action Sheet',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetExample />;
     },
   },
   {
     title: 'Show Action Sheet with tinted buttons',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetTintExample />;
     },
   },
   {
     title: 'Show Action Sheet with cancel tinted button',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetCancelButtonTintExample />;
     },
   },
   {
     title: 'Show Action Sheet with anchor',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetAnchorExample />;
     },
   },
   {
     title: 'Show Action Sheet with disabled buttons',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetDisabledExample />;
     },
   },
   {
     title: 'Show Action Sheet and automatically dismiss it',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ActionSheetDismissExample />;
     },
   },
   {
     title: 'Show Share Action Sheet',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ShareActionSheetExample url="https://code.facebook.com" />;
     },
   },
   {
     title: 'Share Local Image',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ShareActionSheetExample url="bunny.png" />;
     },
   },
   {
     title: 'Share Screenshot',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ShareScreenshotExample />;
     },
   },
   {
     title: 'Share from Anchor',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ShareScreenshotAnchorExample />;
     },
   },

packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js

@@ -29,7 +29,7 @@ export default ({
   description: ('Gesture events, chaining, 2D ' +
     'values, interrupting and transitioning ' +
     'animations, etc.': string),
-  render(): React.Element<typeof AnimatedContinuousInteractionsExample> {
+  render() {
     return <AnimatedContinuousInteractionsExample />;
   },
 }: RNTesterModuleExample);

packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js

@@ -392,7 +392,7 @@ exports.description =
 exports.examples = [
   {
     title: 'And example app',
-    render(): React.Element<typeof AnExApp> {
+    render(): React.MixedElement {
       return <AnExApp />;
     },
   },

packages/rn-tester/js/examples/AppState/AppStateExample.js

@@ -127,13 +127,13 @@ exports.examples = [
     title: 'Subscribed AppState:',
     description:
       'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AppStateSubscription showCurrentOnly={true} />;
     },
   },
   {
     title: 'Previous states:',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AppStateSubscription showCurrentOnly={false} />;
     },
   },
@@ -142,7 +142,7 @@ exports.examples = [
     title: 'Memory Warnings',
     description:
       'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AppStateSubscription showMemoryWarnings={true} />;
     },
   },
@@ -151,7 +151,7 @@ exports.examples = [
     title: 'Focus/Blur Events',
     description:
       'In the Android simulator, toggle the notification drawer to fire events.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AppStateSubscription detectEvents={true} />;
     },
   },

packages/rn-tester/js/examples/Appearance/AppearanceExample.js

@@ -176,13 +176,13 @@ exports.examples = [
   },
   {
     title: 'Non-component `getColorScheme` API',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ColorSchemeSubscription />;
     },
   },
   {
     title: 'Consuming Context',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <RNTesterThemeContext.Consumer>
           {theme => {
@@ -200,7 +200,7 @@ exports.examples = [
   },
   {
     title: 'Context forced to light theme',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <RNTesterThemeContext.Provider value={themes.light}>
           <ThemedContainer>
@@ -214,7 +214,7 @@ exports.examples = [
   },
   {
     title: 'Context forced to dark theme',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <RNTesterThemeContext.Provider value={themes.dark}>
           <ThemedContainer>
@@ -229,7 +229,7 @@ exports.examples = [
   {
     title: 'RNTester App Colors',
     description: 'A light and a dark theme based on standard iOS 13 colors.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <View>
           <RNTesterThemeContext.Provider value={themes.light}>
@@ -245,7 +245,7 @@ exports.examples = [
   {
     title: 'Toggle native appearance',
     description: 'Overwrite application-level appearance mode',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ToggleNativeAppearance />;
     },
   },

packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js

@@ -18,7 +18,7 @@ exports.description = 'Customize the development settings';
 exports.examples = [
   {
     title: 'Add dev menu item',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <Button
           title="Add"
@@ -33,7 +33,7 @@ exports.examples = [
   },
   {
     title: 'Reload the app',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <Button
           title="Reload"

packages/rn-tester/js/examples/Dimensions/DimensionsExample.js

@@ -46,13 +46,13 @@ exports.examples = [
   },
   {
     title: 'Non-component `get` API: window',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <DimensionsSubscription dim="window" />;
     },
   },
   {
     title: 'Non-component `get` API: screen',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <DimensionsSubscription dim="screen" />;
     },
   },

packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js

@@ -351,25 +351,25 @@ exports.description = 'Layout animation';
 exports.examples = [
   {
     title: 'Add and remove views',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AddRemoveExample />;
     },
   },
   {
     title: 'Animate Reparenting Update',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ReparentingExample />;
     },
   },
   {
     title: 'Cross fade views',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <CrossFadeExample />;
     },
   },
   {
     title: 'Layout update during animation',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <LayoutUpdateExample />;
     },
   },

packages/rn-tester/js/examples/Layout/LayoutEventsExample.js

@@ -161,7 +161,7 @@ exports.description = ('Examples that show how Layout events can be used to ' +
 exports.examples = [
   {
     title: 'LayoutEventExample',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <LayoutEventExample />;
     },
   },

packages/rn-tester/js/examples/Layout/LayoutExample.js

@@ -199,7 +199,7 @@ exports.displayName = 'LayoutExample';
 exports.examples = [
   {
     title: 'Simple layout using flexbox',
-    render: function (): React.Element<typeof LayoutExample> {
+    render(): React.MixedElement {
       return <LayoutExample />;
     },
   },

packages/rn-tester/js/examples/Linking/LinkingExample.js

@@ -141,13 +141,13 @@ exports.examples = [
     title: 'Open external URLs',
     description:
       'Custom schemes may require specific apps to be installed on the device. Note: Phone app is not supported in the simulator.',
-    render: function (): React.Element<typeof IntentAndroidExample> {
+    render(): React.MixedElement {
       return <IntentAndroidExample />;
     },
   },
   {
     title: 'Open settings app',
-    render: function (): React.Element<typeof LinkingChangesListenerExample> {
+    render(): React.MixedElement {
       return <OpenSettingsExample />;
     },
   },

packages/rn-tester/js/examples/NewAppScreen/NewAppScreenExample.js

@@ -26,7 +26,7 @@ exports.examples = [
   {
     title: 'New App Screen Header',
     description: 'Displays a welcome to building a React Native app',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <View style={{overflow: 'hidden'}}>
           <Header />
@@ -38,14 +38,14 @@ exports.examples = [
     title: 'Learn More Links',
     description:
       'Learn more about the tools and techniques for building React Native apps.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <LearnMoreLinks />;
     },
   },
   {
     title: 'New App Screen Colors',
     description: 'Consistent colors to use throughout the new app screen.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <View style={{flexDirection: 'row'}}>
           {Object.keys(Colors).map(key => (
@@ -62,7 +62,7 @@ exports.examples = [
     title: 'Debug Instructions',
     description:
       'Platform-specific instructions on how to start debugging a React Native app.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <DebugInstructions />;
     },
   },
@@ -70,7 +70,7 @@ exports.examples = [
     title: 'Reload Instructions',
     description:
       'Platform-specific instructions on how to reload a React Native app.',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ReloadInstructions />;
     },
   },

packages/rn-tester/js/examples/NewArchitecture/NewArchitectureExample.js

@@ -20,7 +20,7 @@ exports.examples = [
   {
     title: 'New Architecture Renderer',
     description: 'Click to change background and opacity',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <>
           <MyNativeView />

packages/rn-tester/js/examples/OSSLibraryExample/OSSLibraryExample.js

@@ -116,7 +116,7 @@ exports.examples = [
   {
     title: 'OSS Library Example',
     description: 'Click to change background and opacity',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return (
         <>
           <SampleNativeComponentContainer />

packages/rn-tester/js/examples/PanResponder/PanResponderExample.js

@@ -139,7 +139,7 @@ exports.description =
 exports.examples = [
   {
     title: 'Basic gesture handling',
-    render(): React.Element<typeof PanResponderExample> {
+    render(): React.MixedElement {
       return <PanResponderExample />;
     },
   },

packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js

@@ -328,25 +328,25 @@ exports.description =
 exports.examples = [
   {
     title: 'Platform Colors',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <PlatformColorsExample />;
     },
   },
   {
     title: 'Fallback Colors',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <FallbackColorsExample />;
     },
   },
   {
     title: 'iOS Dynamic Colors',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <DynamicColorsExample />;
     },
   },
   {
     title: 'Variant Colors',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <VariantColorsExample />;
     },
   },

packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js

@@ -85,13 +85,13 @@ exports.description =
 exports.examples = [
   {
     title: 'Updating app properties in runtime',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <AppPropertiesUpdateExample />;
     },
   },
   {
     title: "RCTRootView's size flexibility",
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <RootViewSizeFlexibilityExample />;
     },
   },

packages/rn-tester/js/examples/RTL/RTLExample.js

@@ -701,13 +701,13 @@ exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
   {
     title: 'Current Layout Direction',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <RTLToggleExample />;
     },
   },
   {
     title: 'A Simple List Item Layout',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <SimpleListItemExample />;
     },
   },
@@ -715,7 +715,7 @@ exports.examples = [
     title: 'Default Text Alignment',
     description: ('In iOS, it depends on active language. ' +
       'In Android, it depends on the text content.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TextAlignmentExample style={styles.fontSizeSmall} />;
     },
   },
@@ -723,7 +723,7 @@ exports.examples = [
     title: "Using textAlign: 'left'",
     description: ('In iOS/Android, text alignment flips regardless of ' +
       'languages or text content.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return (
         <TextAlignmentExample
           style={[styles.fontSizeSmall, styles.textAlignLeft]}
@@ -735,7 +735,7 @@ exports.examples = [
     title: "Using textAlign: 'right'",
     description: ('In iOS/Android, text alignment flips regardless of ' +
       'languages or text content.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return (
         <TextAlignmentExample
           style={[styles.fontSizeSmall, styles.textAlignRight]}
@@ -746,68 +746,68 @@ exports.examples = [
   {
     title: "Using textAlign: 'right' for TextInput",
     description: ('Flip TextInput direction to RTL': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TextInputExample style={[styles.textAlignRight]} />;
     },
   },
   {
     title: 'Working With Icons',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <IconsExample />;
     },
   },
   {
     title: 'Controlling Animation',
     description: 'Animation direction according to layout',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <AnimationContainer />;
     },
   },
   {
     title: 'Padding Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <PaddingExample />;
     },
   },
   {
     title: 'Margin Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <MarginExample />;
     },
   },
   {
     title: 'Position Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <PositionExample />;
     },
   },
   {
     title: 'Border Width Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <BorderWidthExample />;
     },
   },
   {
     title: 'Border Color Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <BorderColorExample />;
     },
   },
   {
     title: 'Border Radii Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <BorderRadiiExample />;
     },
   },
   {
     title: 'Logical Border Radii Start/End',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <LogicalBorderRadiiExample />;
     },
   },
   {
     title: 'Border',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <BorderExample />;
     },
   },

packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js

@@ -121,7 +121,7 @@ exports.description = 'Adds pull-to-refresh support to a scrollview.';
 exports.examples = [
   {
     title: 'Simple refresh',
-    render: function (): React.Element<typeof RefreshControlExample> {
+    render(): React.MixedElement {
       return <RefreshControlExample />;
     },
   },

packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js

@@ -92,7 +92,7 @@ exports.description = 'Component that is animated when ScrollView is offset.';
 exports.examples = [
   {
     title: 'Animated by scroll view',
-    render: function (): React.Element<typeof ScrollViewAnimatedExample> {
+    render(): React.MixedElement {
       return <ScrollViewAnimatedExample />;
     },
   },

packages/rn-tester/js/examples/ScrollView/ScrollViewSimpleExample.js

@@ -137,7 +137,7 @@ exports.description =
 exports.examples = [
   {
     title: 'Simple scroll view',
-    render: function (): React.Element<typeof ScrollViewSimpleExample> {
+    render(): React.MixedElement {
       return <ScrollViewSimpleExample />;
     },
   },

packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js

@@ -166,9 +166,7 @@ const SectionSeparatorComponent = info => (
   <CustomSeparatorComponent {...info} text="SECTION SEPARATOR" />
 );
 
-export function SectionList_scrollable(Props: {
-  ...
-}): React.Element<typeof RNTesterPage> {
+export function SectionList_scrollable(Props: {...}): React.MixedElement {
   const scrollPos = new Animated.Value(0);
   const scrollSinkY = Animated.event(
     [{nativeEvent: {contentOffset: {y: scrollPos}}}],

packages/rn-tester/js/examples/Snapshot/SnapshotExample.js

@@ -67,7 +67,7 @@ exports.description = 'API to capture images from the screen.';
 exports.examples = [
   {
     title: 'Take screenshot',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ScreenshotExample />;
     },
   },

packages/rn-tester/js/examples/Switch/SwitchExample.js

@@ -276,47 +276,47 @@ exports.examples = [
   {
     title: 'Switches can be set to true or false',
     name: 'basic',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <BasicSwitchExample />;
     },
   },
   {
     title: 'Switches can be disabled',
     name: 'disabled',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <DisabledSwitchExample />;
     },
   },
   {
     title: 'Change events can be detected',
     name: 'events',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <EventSwitchExample />;
     },
   },
   {
     title: 'Switches are controlled components',
     name: 'controlled',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <Switch testID="controlled-switch" />;
     },
   },
   {
     title: 'Custom colors can be provided',
     name: 'custom-colors',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ColorSwitchExample />;
     },
   },
   {
     title: 'OnChange receives the change event as an argument',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <OnChangeExample />;
     },
   },
   {
     title: "The container's background color can be set",
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <ContainerBackgroundColorStyleExample />;
     },
   },
@@ -325,7 +325,7 @@ exports.examples = [
 if (Platform.OS === 'ios') {
   exports.examples.push({
     title: '[iOS Only] Custom background colors can be set',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <IOSBackgroundColEx />;
     },
   });

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -957,7 +957,7 @@ const examples = [
   },
   {
     title: 'Toggling Attributes',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <AttributeToggler />;
     },
   },
@@ -1186,7 +1186,7 @@ const examples = [
   },
   {
     title: 'Dynamic Font Size Adjustment',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <AdjustingFontSize />;
     },
   },

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -974,7 +974,7 @@ module.exports = ([
   },
   {
     title: 'Blur on submit',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <BlurOnSubmitExample />;
     },
   },
@@ -1003,13 +1003,13 @@ module.exports = ([
   },
   {
     title: 'Submit behavior',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <SubmitBehaviorExample />;
     },
   },
   {
     title: 'Event handling',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TextEventsExample />;
     },
   },

packages/rn-tester/js/examples/Touchable/TouchableExample.js

@@ -720,7 +720,7 @@ exports.examples = [
   },
   {
     title: '<Text onPress={fn}> with highlight',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TextOnPressBox />;
     },
   },
@@ -728,7 +728,7 @@ exports.examples = [
     title: 'Touchable feedback events',
     description: ('<Touchable*> components accept onPress, onPressIn, ' +
       'onPressOut, and onLongPress as props.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TouchableFeedbackEvents />;
     },
   },
@@ -737,7 +737,7 @@ exports.examples = [
     description: ('<Touchable*> components also accept delayPressIn, ' +
       'delayPressOut, and delayLongPress as props. These props impact the ' +
       'timing of feedback events.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TouchableDelayEvents />;
     },
   },
@@ -745,7 +745,7 @@ exports.examples = [
     title: '3D Touch / Force Touch',
     description:
       'iPhone 8 and 8 plus support 3D touch, which adds a force property to touches',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <ForceTouchExample />;
     },
     platform: 'ios',
@@ -755,7 +755,7 @@ exports.examples = [
     description:
       ('<Touchable*> components accept hitSlop prop which extends the touch area ' +
         'without changing the view bounds.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TouchableHitSlop />;
     },
   },
@@ -763,7 +763,7 @@ exports.examples = [
     title: 'Touchable Native Methods',
     description:
       ('Some <Touchable*> components expose native methods like `measure`.': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TouchableNativeMethods />;
     },
   },
@@ -771,7 +771,7 @@ exports.examples = [
     title: 'Custom Ripple Radius (Android-only)',
     description:
       ('Ripple radius on TouchableNativeFeedback can be controlled': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <CustomRippleRadius />;
     },
   },
@@ -780,7 +780,7 @@ exports.examples = [
     description:
       ('<Touchable*> components accept disabled prop which prevents ' +
         'any interaction with component': string),
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <TouchableDisabled />;
     },
   },

packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js

@@ -44,7 +44,7 @@ exports.description = 'Transparent view receiving touch events';
 exports.examples = [
   {
     title: 'TransparentHitTestExample',
-    render(): React.Element<any> {
+    render(): React.MixedElement {
       return <TransparentHitTestExample />;
     },
   },

packages/rn-tester/js/examples/TurboModule/LegacyModuleExample.js

@@ -22,7 +22,7 @@ exports.description = 'Usage of legacy Native Module';
 exports.examples = [
   {
     title: 'SampleLegacyModule',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <SampleLegacyModuleExample />;
     },
   },

packages/rn-tester/js/examples/TurboModule/TurboCxxModuleExample.js

@@ -20,7 +20,7 @@ exports.description = 'Usage of Cxx TurboModule';
 exports.examples = [
   {
     title: 'TurboCxxModuleExample',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <NativeCxxModuleExampleExample />;
     },
   },

packages/rn-tester/js/examples/TurboModule/TurboModuleExample.js

@@ -20,7 +20,7 @@ exports.description = 'Usage of TurboModule';
 exports.examples = [
   {
     title: 'SampleTurboModule',
-    render: function (): React.Element<any> {
+    render: function (): React.MixedElement {
       return <SampleTurboModuleExample />;
     },
   },

packages/rn-tester/js/examples/WebSocket/WebSocketExample.js

@@ -34,7 +34,7 @@ const WS_STATES = [
 ];
 
 class Button extends React.Component {
-  render(): React.Element<any> {
+  render(): React.MixedElement {
     const label = <Text style={styles.buttonLabel}>{this.props.label}</Text>;
     if (this.props.disabled) {
       return (
@@ -50,7 +50,7 @@ class Button extends React.Component {
 }
 
 class Row extends React.Component {
-  render(): React.Element<any> {
+  render(): React.MixedElement {
     return (
       <View style={styles.row}>
         <Text>{this.props.label}</Text>
@@ -201,7 +201,7 @@ class WebSocketExample extends React.Component<any, any, State> {
     this.setState({outgoingMessage: ''});
   };
 
-  render(): React.Element<any> {
+  render(): React.MixedElement {
     const socketState = WS_STATES[this.state.socketState || -1];
     const canConnect =
       !this.state.socket || this.state.socket.readyState >= WebSocket.CLOSING;
@@ -350,7 +350,7 @@ exports.description = 'WebSocket API';
 exports.examples = [
   {
     title: 'Basic websocket',
-    render(): React.Element<typeof WebSocketExample> {
+    render(): React.MixedElement {
       return <WebSocketExample />;
     },
   },

packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js

@@ -25,7 +25,7 @@ export type Props<ItemT> = {
   ItemSeparatorComponent: ?React.ComponentType<
     any | {highlighted: boolean, leadingItem: ?ItemT},
   >,
-  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListItemComponent?: ?(React.ComponentType<any> | React.MixedElement),
   cellKey: string,
   horizontal: ?boolean,
   index: number,

packages/virtualized-lists/Lists/VirtualizedSectionList.js

@@ -38,7 +38,7 @@ export type SectionBase<SectionItemT> = {
       ...
     },
     ...
-  }) => null | React.Element<any>,
+  }) => null | React.MixedElement,
   ItemSeparatorComponent?: ?React.ComponentType<any>,
   keyExtractor?: (item: SectionItemT, index?: ?number) => string,
   ...