RCTSlider (#23048)

Summary:
Changelog:

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

Differential Revision: D13760373

Pulled By: cpojer

fbshipit-source-id: ff8cc9d468dc3bac55fc3d4156ad695dcdd10ab8

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);

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;
- }
- props.onValueChange &&
- userEvent &&
- props.onValueChange(event.nativeEvent.value);
- });
+ const {onValueChange, onSlidingComplete, ...localProps} = props;
 
- const onChange = onValueChange;
+ 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);
+ }
+ : null;
 
- 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}