RCTSegmentedControl (#23000)

Summary:
Changelog:
----------

[iOS] [Changed] -  follow #22990, move the call to requireNativeComponent from `SegmentedControlIOS.ios.js` to `RCTSegmentedControlNativeComponent.js`
Pull Request resolved: https://github.com/facebook/react-native/pull/23000

Differential Revision: D13697168

Pulled By: TheSavior

fbshipit-source-id: 83a66279d2fcd5a29d2ebc9cf5b5273947d96281

Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+'use strict';
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+  $ReadOnly<{|
+    value: number,
+    selectedSegmentIndex: number,
+  |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+  ...ViewProps,
+  /**
+   * The labels for the control's segment buttons, in order.
+   */
+  values?: $ReadOnlyArray<string>,
+  /**
+   * The index in `props.values` of the segment to be (pre)selected.
+   */
+  selectedIndex?: ?number,
+  /**
+   * Callback that is called when the user taps a segment;
+   * passes the segment's value as an argument
+   */
+  onValueChange?: ?(value: number) => mixed,
+  /**
+   * Callback that is called when the user taps a segment;
+   * passes the event as an argument
+   */
+  onChange?: ?(event: Event) => mixed,
+  /**
+   * If false the user won't be able to interact with the control.
+   * Default value is true.
+   */
+  enabled?: boolean,
+  /**
+   * Accent color of the control.
+   */
+  tintColor?: ?string,
+  /**
+   * If true, then selecting a segment won't persist visually.
+   * The `onValueChange` callback will still work as expected.
+   */
+  momentary?: ?boolean,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+  NativeComponent<SegmentedControlIOSProps>,
+>;
+
+module.exports = ((requireNativeComponent(
+  'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -13,11 +13,10 @@
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 
-const requireNativeComponent = require('requireNativeComponent');
+const RCTSegmentedControlNativeComponent = require('RCTSegmentedControlNativeComponent');
 
 import type {SyntheticEvent} from 'CoreEventTypes';
 import type {ViewProps} from 'ViewPropTypes';
-import type {NativeComponent} from 'ReactNative';
 
 type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -64,13 +63,9 @@ type SegmentedControlIOSProps = $ReadOnly<{|
 
 type Props = $ReadOnly<{|
   ...SegmentedControlIOSProps,
-  forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+  forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
 |}>;
 
-type NativeSegmentedControlIOS = Class<
-  NativeComponent<SegmentedControlIOSProps>,
->;
-
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
  *
@@ -92,10 +87,6 @@ type NativeSegmentedControlIOS = Class<
  * ````
  */
 
-const RCTSegmentedControl = ((requireNativeComponent(
-  'RCTSegmentedControl',
-): any): NativeSegmentedControlIOS);
-
 class SegmentedControlIOS extends React.Component<Props> {
   static defaultProps = {
     values: [],
@@ -111,7 +102,7 @@ class SegmentedControlIOS extends React.Component<Props> {
   render() {
     const {forwardedRef, ...props} = this.props;
     return (
-      <RCTSegmentedControl
+      <RCTSegmentedControlNativeComponent
         {...props}
         ref={forwardedRef}
         style={[styles.segmentedControl, this.props.style]}
@@ -130,7 +121,7 @@ const styles = StyleSheet.create({
 const SegmentedControlIOSWithRef = React.forwardRef(
   (
     props: SegmentedControlIOSProps,
-    forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+    forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
   ) => {
     return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
   },