Make remaining FBiOS/FB4A components export SVCs via __INTERNAL_VIEW_…

…CONFIG Summary: The static ViewConfig codegen generates the static ViewConfig inside the JavaScript module [under an exported constant](https://github.com/facebook/react-native/blob/a0a2958cdac767f50084c2d5bee6cf224ffb9db3/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js#L127-L129): ``` export const __INTERNAL_VIEW_CONFIG = VIEW_CONFIG; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); ``` This exported constant allows us to build a test page that requires all components, and compares their static ViewConfigs with their native ViewConfig. This diff makes components with hand-written static ViewConfigs also export this __INTERNAL_VIEW_CONFIG const. Changelog: [Internal] Reviewed By: p-sun Differential Revision: D34541868 fbshipit-source-id: f55dd3f1b161038baaf84cbbf75c1f4041c34647
facebook · Mar 2, 2022 · 5c8d95b · 5c8d95b
1 parent ec27141
commit 5c8d95b
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 192 deletions.
diff --git a/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js b/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js
@@ -9,46 +9,54 @@
  */
 
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'AndroidHorizontalScrollView',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {
+    decelerationRate: true,
+    disableIntervalMomentum: true,
+    endFillColor: {process: require('../../StyleSheet/processColor')},
+    fadingEdgeLength: true,
+    nestedScrollEnabled: true,
+    overScrollMode: true,
+    pagingEnabled: true,
+    persistentScrollbar: true,
+    scrollEnabled: true,
+    scrollPerfTag: true,
+    sendMomentumEvents: true,
+    showsHorizontalScrollIndicator: true,
+    snapToAlignment: true,
+    snapToEnd: true,
+    snapToInterval: true,
+    snapToStart: true,
+    snapToOffsets: true,
+    contentOffset: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderRadius: true,
+    borderStyle: true,
+    borderRightColor: {process: require('../../StyleSheet/processColor')},
+    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderTopLeftRadius: true,
+    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    removeClippedSubviews: true,
+    borderTopRightRadius: true,
+    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+  },
+};
+
 const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('AndroidHorizontalScrollView', () => ({
-    uiViewClassName: 'AndroidHorizontalScrollView',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {
-      decelerationRate: true,
-      disableIntervalMomentum: true,
-      endFillColor: {process: require('../../StyleSheet/processColor')},
-      fadingEdgeLength: true,
-      nestedScrollEnabled: true,
-      overScrollMode: true,
-      pagingEnabled: true,
-      persistentScrollbar: true,
-      scrollEnabled: true,
-      scrollPerfTag: true,
-      sendMomentumEvents: true,
-      showsHorizontalScrollIndicator: true,
-      snapToAlignment: true,
-      snapToEnd: true,
-      snapToInterval: true,
-      snapToStart: true,
-      snapToOffsets: true,
-      contentOffset: true,
-      borderBottomLeftRadius: true,
-      borderBottomRightRadius: true,
-      borderRadius: true,
-      borderStyle: true,
-      borderRightColor: {process: require('../../StyleSheet/processColor')},
-      borderColor: {process: require('../../StyleSheet/processColor')},
-      borderBottomColor: {process: require('../../StyleSheet/processColor')},
-      borderTopLeftRadius: true,
-      borderTopColor: {process: require('../../StyleSheet/processColor')},
-      removeClippedSubviews: true,
-      borderTopRightRadius: true,
-      borderLeftColor: {process: require('../../StyleSheet/processColor')},
-    },
-  }));
+  NativeComponentRegistry.get<Props>(
+    'AndroidHorizontalScrollView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 export default AndroidHorizontalScrollViewNativeComponent;
diff --git a/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js b/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js
@@ -8,16 +8,24 @@
  * @flow
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import type {ViewProps as Props} from '../View/ViewPropTypes';
 
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'RCTScrollContentView',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {},
+};
+
 const ScrollContentViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('RCTScrollContentView', () => ({
-    uiViewClassName: 'RCTScrollContentView',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {},
-  }));
+  NativeComponentRegistry.get<Props>(
+    'RCTScrollContentView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 export default ScrollContentViewNativeComponent;
diff --git a/Libraries/Components/ScrollView/ScrollViewNativeComponent.js b/Libraries/Components/ScrollView/ScrollViewNativeComponent.js
@@ -9,12 +9,15 @@
  */
 
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
 import Platform from '../../Utilities/Platform';
 
-const RCTScrollViewViewConfig =
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
   Platform.OS === 'android'
     ? {
         uiViewClassName: 'RCTScrollView',
@@ -153,7 +156,7 @@ const RCTScrollViewViewConfig =
 const ScrollViewNativeComponent: HostComponent<Props> =
   NativeComponentRegistry.get<Props>(
     'RCTScrollView',
-    () => RCTScrollViewViewConfig,
+    () => __INTERNAL_VIEW_CONFIG,
   );
 
 export default ScrollViewNativeComponent;
diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js
@@ -17,7 +17,10 @@ import type {
   Int32,
   WithDefault,
 } from '../../Types/CodegenTypes';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
 import type {
   TextStyleProp,
   ViewStyleProp,
@@ -593,123 +596,125 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
 });
 
-let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
-  'AndroidTextInput',
-  () => ({
-    uiViewClassName: 'AndroidTextInput',
-    bubblingEventTypes: {
-      topBlur: {
-        phasedRegistrationNames: {
-          bubbled: 'onBlur',
-          captured: 'onBlurCapture',
-        },
-      },
-      topEndEditing: {
-        phasedRegistrationNames: {
-          bubbled: 'onEndEditing',
-          captured: 'onEndEditingCapture',
-        },
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'AndroidTextInput',
+  bubblingEventTypes: {
+    topBlur: {
+      phasedRegistrationNames: {
+        bubbled: 'onBlur',
+        captured: 'onBlurCapture',
       },
-      topFocus: {
-        phasedRegistrationNames: {
-          bubbled: 'onFocus',
-          captured: 'onFocusCapture',
-        },
-      },
-      topKeyPress: {
-        phasedRegistrationNames: {
-          bubbled: 'onKeyPress',
-          captured: 'onKeyPressCapture',
-        },
+    },
+    topEndEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onEndEditing',
+        captured: 'onEndEditingCapture',
       },
-      topSubmitEditing: {
-        phasedRegistrationNames: {
-          bubbled: 'onSubmitEditing',
-          captured: 'onSubmitEditingCapture',
-        },
+    },
+    topFocus: {
+      phasedRegistrationNames: {
+        bubbled: 'onFocus',
+        captured: 'onFocusCapture',
       },
-      topTextInput: {
-        phasedRegistrationNames: {
-          bubbled: 'onTextInput',
-          captured: 'onTextInputCapture',
-        },
+    },
+    topKeyPress: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyPress',
+        captured: 'onKeyPressCapture',
       },
     },
-    directEventTypes: {
-      topScroll: {
-        registrationName: 'onScroll',
+    topSubmitEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onSubmitEditing',
+        captured: 'onSubmitEditingCapture',
       },
     },
-    validAttributes: {
-      maxFontSizeMultiplier: true,
-      adjustsFontSizeToFit: true,
-      minimumFontScale: true,
-      autoFocus: true,
-      placeholder: true,
-      inlineImagePadding: true,
-      contextMenuHidden: true,
-      textShadowColor: {process: require('../../StyleSheet/processColor')},
-      maxLength: true,
-      selectTextOnFocus: true,
-      textShadowRadius: true,
-      underlineColorAndroid: {
-        process: require('../../StyleSheet/processColor'),
+    topTextInput: {
+      phasedRegistrationNames: {
+        bubbled: 'onTextInput',
+        captured: 'onTextInputCapture',
       },
-      textDecorationLine: true,
-      blurOnSubmit: true,
-      textAlignVertical: true,
-      fontStyle: true,
-      textShadowOffset: true,
-      selectionColor: {process: require('../../StyleSheet/processColor')},
-      selection: true,
-      placeholderTextColor: {process: require('../../StyleSheet/processColor')},
-      importantForAutofill: true,
-      lineHeight: true,
-      textTransform: true,
-      returnKeyType: true,
-      keyboardType: true,
-      multiline: true,
-      color: {process: require('../../StyleSheet/processColor')},
-      autoComplete: true,
-      numberOfLines: true,
-      letterSpacing: true,
-      returnKeyLabel: true,
-      fontSize: true,
-      onKeyPress: true,
-      cursorColor: {process: require('../../StyleSheet/processColor')},
-      text: true,
-      showSoftInputOnFocus: true,
-      textAlign: true,
-      autoCapitalize: true,
-      autoCorrect: true,
-      caretHidden: true,
-      secureTextEntry: true,
-      textBreakStrategy: true,
-      onScroll: true,
-      onContentSizeChange: true,
-      disableFullscreenUI: true,
-      includeFontPadding: true,
-      fontWeight: true,
-      fontFamily: true,
-      allowFontScaling: true,
-      onSelectionChange: true,
-      mostRecentEventCount: true,
-      inlineImageLeft: true,
-      editable: true,
-      fontVariant: true,
-      borderBottomRightRadius: true,
-      borderBottomColor: {process: require('../../StyleSheet/processColor')},
-      borderRadius: true,
-      borderRightColor: {process: require('../../StyleSheet/processColor')},
-      borderColor: {process: require('../../StyleSheet/processColor')},
-      borderTopRightRadius: true,
-      borderStyle: true,
-      borderBottomLeftRadius: true,
-      borderLeftColor: {process: require('../../StyleSheet/processColor')},
-      borderTopLeftRadius: true,
-      borderTopColor: {process: require('../../StyleSheet/processColor')},
     },
-  }),
+  },
+  directEventTypes: {
+    topScroll: {
+      registrationName: 'onScroll',
+    },
+  },
+  validAttributes: {
+    maxFontSizeMultiplier: true,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: true,
+    autoFocus: true,
+    placeholder: true,
+    inlineImagePadding: true,
+    contextMenuHidden: true,
+    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    maxLength: true,
+    selectTextOnFocus: true,
+    textShadowRadius: true,
+    underlineColorAndroid: {
+      process: require('../../StyleSheet/processColor'),
+    },
+    textDecorationLine: true,
+    blurOnSubmit: true,
+    textAlignVertical: true,
+    fontStyle: true,
+    textShadowOffset: true,
+    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selection: true,
+    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    importantForAutofill: true,
+    lineHeight: true,
+    textTransform: true,
+    returnKeyType: true,
+    keyboardType: true,
+    multiline: true,
+    color: {process: require('../../StyleSheet/processColor')},
+    autoComplete: true,
+    numberOfLines: true,
+    letterSpacing: true,
+    returnKeyLabel: true,
+    fontSize: true,
+    onKeyPress: true,
+    cursorColor: {process: require('../../StyleSheet/processColor')},
+    text: true,
+    showSoftInputOnFocus: true,
+    textAlign: true,
+    autoCapitalize: true,
+    autoCorrect: true,
+    caretHidden: true,
+    secureTextEntry: true,
+    textBreakStrategy: true,
+    onScroll: true,
+    onContentSizeChange: true,
+    disableFullscreenUI: true,
+    includeFontPadding: true,
+    fontWeight: true,
+    fontFamily: true,
+    allowFontScaling: true,
+    onSelectionChange: true,
+    mostRecentEventCount: true,
+    inlineImageLeft: true,
+    editable: true,
+    fontVariant: true,
+    borderBottomRightRadius: true,
+    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderRadius: true,
+    borderRightColor: {process: require('../../StyleSheet/processColor')},
+    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderTopRightRadius: true,
+    borderStyle: true,
+    borderBottomLeftRadius: true,
+    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderTopLeftRadius: true,
+    borderTopColor: {process: require('../../StyleSheet/processColor')},
+  },
+};
+
+let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
+  'AndroidTextInput',
+  () => __INTERNAL_VIEW_CONFIG,
 );
 
 // flowlint-next-line unclear-type:off