RCTSlider (#23048)

Summary:
Changelog:

[iOS] [Changed] - Deal with #22990. Move `requireNativeComponent` to a separate file.
Pull Request resolved: https://github.com/facebook/react-native/pull/23048

Differential Revision: D13760373

Pulled By: cpojer

fbshipit-source-id: ff8cc9d468dc3bac55fc3d4156ad695dcdd10ab8

Libraries/Components/Slider/RCTSliderNativeComponent.js

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ImageSource} from 'ImageSource';
+import type {NativeComponent} from 'ReactNative';
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {ViewStyleProp} from 'StyleSheet';
+
+type Event = SyntheticEvent<
+  $ReadOnly<{|
+    value: number,
+    fromUser?: boolean,
+  |}>,
+>;
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  disabled?: ?boolean,
+  enabled?: ?boolean,
+  maximumTrackImage?: ?ImageSource,
+  maximumTrackTintColor?: ?ColorValue,
+  maximumValue?: ?number,
+  minimumTrackImage?: ?ImageSource,
+  minimumTrackTintColor?: ?ColorValue,
+  minimumValue?: ?number,
+  onChange?: ?(event: Event) => void,
+  onSlidingComplete?: ?(event: Event) => void,
+  onValueChange?: ?(event: Event) => void,
+  step?: ?number,
+  testID?: ?string,
+  thumbImage?: ?ImageSource,
+  thumbTintColor?: ?ColorValue,
+  trackImage?: ?ImageSource,
+  value?: ?number,
+|}>;
+
+type RCTSliderType = Class<NativeComponent<NativeProps>>;
+
+module.exports = ((requireNativeComponent('RCTSlider'): any): RCTSliderType);

Libraries/Components/Slider/Slider.js

@@ -5,26 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict-local
+ * @flow
  */
 
 'use strict';
 
-const ReactNative = require('ReactNative');
 const Platform = require('Platform');
+const RCTSliderNativeComponent = require('RCTSliderNativeComponent');
 const React = require('React');
+const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 
-const requireNativeComponent = require('requireNativeComponent');
-
 import type {ImageSource} from 'ImageSource';
 import type {ViewStyleProp} from 'StyleSheet';
 import type {ColorValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
 import type {SyntheticEvent} from 'CoreEventTypes';
 
-const RCTSlider = requireNativeComponent('RCTSlider');
-
 type Event = SyntheticEvent<
   $ReadOnly<{|
     value: number,
@@ -200,45 +197,43 @@ type Props = $ReadOnly<{|
  */
 const Slider = (
   props: Props,
-  forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
+  forwardedRef?: ?React.Ref<typeof RCTSliderNativeComponent>,
 ) => {
   const style = StyleSheet.compose(
     styles.slider,
     props.style,
   );
 
-  const onValueChange =
-    props.onValueChange &&
-    ((event: Event) => {
-      let userEvent = true;
-      if (Platform.OS === 'android') {
-        // On Android there's a special flag telling us the user is
-        // dragging the slider.
-        userEvent =
-          event.nativeEvent.fromUser != null && event.nativeEvent.fromUser;
+  const {onValueChange, onSlidingComplete, ...localProps} = props;
+
+  const onValueChangeEvent = onValueChange
+    ? (event: Event) => {
+        let userEvent = true;
+        if (Platform.OS === 'android') {
+          // On Android there's a special flag telling us the user is
+          // dragging the slider.
+          userEvent =
+            event.nativeEvent.fromUser != null && event.nativeEvent.fromUser;
+        }
+        userEvent && onValueChange(event.nativeEvent.value);
       }
-      props.onValueChange &&
-        userEvent &&
-        props.onValueChange(event.nativeEvent.value);
-    });
+    : null;
 
-  const onChange = onValueChange;
-
-  const onSlidingComplete =
-    props.onSlidingComplete &&
-    ((event: Event) => {
-      props.onSlidingComplete &&
-        props.onSlidingComplete(event.nativeEvent.value);
-    });
+  const onChangeEvent = onValueChangeEvent;
+  const onSlidingCompleteEvent = onSlidingComplete
+    ? (event: Event) => {
+        onSlidingComplete(event.nativeEvent.value);
+      }
+    : null;
 
   return (
-    <RCTSlider
-      {...props}
+    <RCTSliderNativeComponent
+      {...localProps}
       ref={forwardedRef}
       style={style}
-      onChange={onChange}
-      onSlidingComplete={onSlidingComplete}
-      onValueChange={onValueChange}
+      onChange={onChangeEvent}
+      onSlidingComplete={onSlidingCompleteEvent}
+      onValueChange={onValueChangeEvent}
       enabled={!props.disabled}
       onStartShouldSetResponder={() => true}
       onResponderTerminationRequest={() => false}