Add basic support for React Server Components

Close #2678
Fix #2672

Co-authored-by: evanbacon <[email protected]>

Author: EvanBacon

packages/react-native-web/src/exports/AccessibilityInfo/index.js

@@ -6,6 +6,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 function isScreenReaderEnabled(): Promise<*> {

packages/react-native-web/src/exports/ActivityIndicator/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ViewProps } from '../View';
 
 import * as React from 'react';

packages/react-native-web/src/exports/Animated/index.js

@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import Animated from '../../vendor/react-native/Animated/Animated';
 export default Animated;

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { Application } from './renderApplication';
 import type { ComponentType, Node } from 'react';
 

packages/react-native-web/src/exports/AppState/index.js

@@ -8,6 +8,8 @@
  * @noflow
  */
 
+'use client';
+
 import invariant from 'fbjs/lib/invariant';
 import EventEmitter from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import canUseDOM from '../../modules/canUseDom';

packages/react-native-web/src/exports/Appearance/index.js

@@ -7,6 +7,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 export type ColorSchemeName = 'light' | 'dark';

packages/react-native-web/src/exports/CheckBox/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/Clipboard/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 let clipboardAvailable;
 
 export default class Clipboard {

packages/react-native-web/src/exports/Dimensions/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import invariant from 'fbjs/lib/invariant';
 import canUseDOM from '../../modules/canUseDom';

packages/react-native-web/src/exports/FlatList/index.js

@@ -8,5 +8,7 @@
  * @flow
  */
 
+'use client';
+
 import FlatList from '../../vendor/react-native/FlatList';
 export default FlatList;

packages/react-native-web/src/exports/Image/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ImageProps } from './types';
 
 import * as React from 'react';

packages/react-native-web/src/exports/KeyboardAvoidingView/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { LayoutEvent, LayoutValue } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/Modal/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ViewProps } from '../View';
 
 import * as React from 'react';

packages/react-native-web/src/exports/Picker/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/Pressable/index.js

@@ -7,7 +7,7 @@
  * @flow strict-local
  */
 
-'use strict';
+'use client';
 
 import type { HoverEventsConfig } from '../../modules/useHover';
 import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';

packages/react-native-web/src/exports/ProgressBar/index.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/ScrollView/index.js

@@ -8,6 +8,8 @@
  * @noflow
  */
 
+'use client';
+
 import type { ViewProps, ViewStyle } from '../View/types';
 
 import Dimensions from '../Dimensions';

packages/react-native-web/src/exports/SectionList/index.js

@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import SectionList from '../../vendor/react-native/SectionList';
 export default SectionList;

packages/react-native-web/src/exports/Switch/index.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/Text/TextAncestorContext.js

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+'use client';
+
 import type { Context } from 'react';
 
 import { createContext } from 'react';

packages/react-native-web/src/exports/Text/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { TextProps } from './types';
 

packages/react-native-web/src/exports/TextInput/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { TextInputProps } from './types';
 

packages/react-native-web/src/exports/TouchableHighlight/index.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { ColorValue } from '../../types';
 import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';

packages/react-native-web/src/exports/TouchableOpacity/index.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { Props as TouchableWithoutFeedbackProps } from '../TouchableWithoutFeedback';
 import type { ViewProps } from '../View';

packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+'use client';
 
 import type { PressResponderConfig } from '../../modules/usePressEvents/PressResponder';
 import type { ViewProps } from '../View';

packages/react-native-web/src/exports/View/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { PlatformMethods } from '../../types';
 import type { ViewProps } from './types';
 

packages/react-native-web/src/exports/VirtualizedList/index.js

@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import VirtualizedList from '../../vendor/react-native/VirtualizedList';
 export default VirtualizedList;

packages/react-native-web/src/exports/createElement/index.js

@@ -7,6 +7,8 @@
  * @noflow
  */
 
+'use client';
+
 import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import createDOMProps from '../../modules/createDOMProps';
 import React from 'react';

packages/react-native-web/src/exports/render/index.js

@@ -7,6 +7,8 @@
  * @noflow
  */
 
+'use client';
+
 import {
   hydrate as domLegacyHydrate,
   render as domLegacyRender

packages/react-native-web/src/exports/useColorScheme/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import * as React from 'react';
 import type { ColorSchemeName } from '../Appearance';
 import Appearance from '../Appearance';

packages/react-native-web/src/exports/useLocaleContext/index.js

@@ -7,5 +7,7 @@
  * @flow strict
  */
 
+'use client';
+
 import { useLocaleContext } from '../../modules/useLocale';
 export default useLocaleContext;

packages/react-native-web/src/exports/useWindowDimensions/index.js

@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-'use strict';
+'use client';
 
 import type { DisplayMetrics } from '../Dimensions';
 

packages/react-native-web/src/modules/UnimplementedView/index.js

@@ -6,23 +6,17 @@
  *
  * @flow
  */
-
 import type { Node } from 'React';
+import type { ViewProps } from '../../exports/View/types';
 
 import View from '../../exports/View';
 import React from 'react';
 
 /**
  * Common implementation for a simple stubbed view.
  */
-class UnimplementedView extends React.Component<*, *> {
-  render(): Node {
-    return (
-      <View style={[unimplementedViewStyles, this.props.style]}>
-        {this.props.children}
-      </View>
-    );
-  }
+function UnimplementedView({ style, ...props }: ViewProps): Node {
+  return <View {...props} style={[unimplementedViewStyles, style]} />;
 }
 
 const unimplementedViewStyles =