Remove create-react-class dependency

Libraries/Components/Touchable/TouchableBounce.js

@@ -19,7 +19,7 @@ const React = require('React');
 const Touchable = require('Touchable');
 const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
-const createReactClass = require('create-react-class');
+const reactMixin = require('@ericlewis/react-mixin');
 
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type {ViewStyleProp} from 'StyleSheet';
@@ -40,7 +40,7 @@ type Props = $ReadOnly<{|
   onPressAnimationComplete?: ?() => void,
   pressRetentionOffset?: ?EdgeInsetsProp,
   releaseVelocity?: ?number,
-  releaseBounciness?: ?number,
+  releaseBounciness: ?number,
   style?: ?ViewStyleProp,
 |}>;
 
@@ -51,92 +51,81 @@ type Props = $ReadOnly<{|
  * `TouchableMixin` expects us to implement some abstract methods to handle
  * interesting interactions such as `handleTouchablePress`.
  */
-const TouchableBounce = ((createReactClass({
-  displayName: 'TouchableBounce',
-  mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur, NativeMethodsMixin],
 
-  propTypes: {
-    /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.89 was deployed. To see the error, delete this
-     * comment and run Flow. */
-    ...TouchableWithoutFeedback.propTypes,
-    // The function passed takes a callback to start the animation which should
-    // be run after this onPress handler is done. You can use this (for example)
-    // to update UI before starting the animation.
-    onPressWithCompletion: PropTypes.func,
-    // the function passed is called after the animation is complete
-    onPressAnimationComplete: PropTypes.func,
-    /**
-     * When the scroll view is disabled, this defines how far your touch may
-     * move off of the button, before deactivating the button. Once deactivated,
-     * try moving it back and you'll see that the button is once again
-     * reactivated! Move it back and forth several times while the scroll view
-     * is disabled. Ensure you pass in a constant to reduce memory allocations.
-     */
-    pressRetentionOffset: DeprecatedEdgeInsetsPropType,
-    releaseVelocity: PropTypes.number.isRequired,
-    releaseBounciness: PropTypes.number.isRequired,
-    /**
-     * Style to apply to the container/underlay. Most commonly used to make sure
-     * rounded corners match the wrapped component.
-     */
-    style: DeprecatedViewPropTypes.style,
-  },
-
-  getDefaultProps: function() {
-    return {releaseBounciness: 10, releaseVelocity: 10};
-  },
-
-  getInitialState: function(): State {
-    return {
-      ...this.touchableGetInitialState(),
+class TouchableBounce extends React.Component<Props, State> {
+  static defaultProps = {
+    releaseBounciness: 10,
+    releaseVelocity: 10,
+  };
+
+  touchableHandleResponderGrant: ?(
+    event: PressEvent,
+    dispatchID: string,
+  ) => void;
+  touchableHandleStartShouldSetResponder: () => boolean;
+  touchableHandleResponderMove: ?(event: PressEvent) => void;
+  touchableHandleResponderRelease: ?(event: PressEvent) => void;
+  touchableHandleResponderTerminate: ?(event: PressEvent) => void;
+  touchableHandleResponderTerminationRequest: ?() => boolean;
+
+  constructor(props: Props) {
+    super(props);
+
+    Object.keys(Touchable.Mixin.withoutDefaultFocusAndBlur).forEach(name => {
+      if ((this: any)[name] && (this: any)[name].bind) {
+        (this: any)[name] = (this: any)[name].bind(this);
+      }
+    });
+
+    this.state = {
+      ...Touchable.Mixin.touchableGetInitialState(),
       scale: new Animated.Value(1),
     };
-  },
+  }
 
-  bounceTo: function(
+  bounceTo = (
     value: number,
     velocity: number,
     bounciness: number,
     callback?: ?() => void,
-  ) {
+  ) => {
     Animated.spring(this.state.scale, {
       toValue: value,
       velocity,
       bounciness,
       useNativeDriver: true,
     }).start(callback);
-  },
+  };
 
   /**
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
    */
-  touchableHandleActivePressIn: function(e: PressEvent) {
+  touchableHandleActivePressIn = (e: PressEvent) => {
     this.bounceTo(0.93, 0.1, 0);
     this.props.onPressIn && this.props.onPressIn(e);
-  },
+  };
 
-  touchableHandleActivePressOut: function(e: PressEvent) {
+  touchableHandleActivePressOut = (e: PressEvent) => {
     this.bounceTo(1, 0.4, 0);
     this.props.onPressOut && this.props.onPressOut(e);
-  },
+  };
 
-  touchableHandleFocus: function(e: Event) {
+  touchableHandleFocus = (e: Event) => {
     if (Platform.isTV) {
       this.bounceTo(0.93, 0.1, 0);
     }
     this.props.onFocus && this.props.onFocus(e);
-  },
+  };
 
-  touchableHandleBlur: function(e: Event) {
+  touchableHandleBlur = (e: Event) => {
     if (Platform.isTV) {
       this.bounceTo(1, 0.4, 0);
     }
     this.props.onBlur && this.props.onBlur(e);
-  },
+  };
 
-  touchableHandlePress: function(e: PressEvent) {
+  touchableHandlePress = (e: PressEvent) => {
     const onPressWithCompletion = this.props.onPressWithCompletion;
     if (onPressWithCompletion) {
       onPressWithCompletion(() => {
@@ -158,21 +147,21 @@ const TouchableBounce = ((createReactClass({
       this.props.onPressAnimationComplete,
     );
     this.props.onPress && this.props.onPress(e);
-  },
+  };
 
-  touchableGetPressRectOffset: function(): typeof PRESS_RETENTION_OFFSET {
+  touchableGetPressRectOffset = (): typeof PRESS_RETENTION_OFFSET => {
     return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
-  },
+  };
 
-  touchableGetHitSlop: function(): ?EdgeInsetsProp {
+  touchableGetHitSlop = (): ?EdgeInsetsProp => {
     return this.props.hitSlop;
-  },
+  };
 
-  touchableGetHighlightDelayMS: function(): number {
+  touchableGetHighlightDelayMS = (): number => {
     return 0;
-  },
+  };
 
-  render: function(): React.Element<any> {
+  render(): React.Element<any> {
     return (
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
@@ -199,7 +188,40 @@ const TouchableBounce = ((createReactClass({
         })}
       </Animated.View>
     );
-  },
-}): any): React.ComponentType<Props>);
+  }
+}
+
+TouchableBounce.displayName = 'TouchableBounce';
+
+TouchableBounce.propTypes = {
+  /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an
+     * error found when Flow v0.89 was deployed. To see the error, delete this
+     * comment and run Flow. */
+  ...TouchableWithoutFeedback.propTypes,
+  // The function passed takes a callback to start the animation which should
+  // be run after this onPress handler is done. You can use this (for example)
+  // to update UI before starting the animation.
+  onPressWithCompletion: PropTypes.func,
+  // the function passed is called after the animation is complete
+  onPressAnimationComplete: PropTypes.func,
+  /**
+   * When the scroll view is disabled, this defines how far your touch may
+   * move off of the button, before deactivating the button. Once deactivated,
+   * try moving it back and you'll see that the button is once again
+   * reactivated! Move it back and forth several times while the scroll view
+   * is disabled. Ensure you pass in a constant to reduce memory allocations.
+   */
+  pressRetentionOffset: DeprecatedEdgeInsetsPropType,
+  releaseVelocity: PropTypes.number.isRequired,
+  releaseBounciness: PropTypes.number.isRequired,
+  /**
+   * Style to apply to the container/underlay. Most commonly used to make sure
+   * rounded corners match the wrapped component.
+   */
+  style: DeprecatedViewPropTypes.style,
+};
+
+reactMixin.onClass(TouchableBounce, NativeMethodsMixin);
+reactMixin.onClass(TouchableBounce, Touchable.Mixin.withoutDefaultFocusAndBlur);
 
 module.exports = TouchableBounce;