occ-mobile/app/components/InteractableView.js

import React, { Component } from 'react'
import ReactNative, {
  requireNativeComponent,
  Animated,
  NativeModules,
  UIManager,
  Platform,
} from 'react-native'

// this is required in order to perform imperative commands
const NativeViewManager = NativeModules.InteractableViewManager

const NativeInteractableView = requireNativeComponent('InteractableView', null)

class WrappedInteractableView extends Component {
  render() {
    return (
      <NativeInteractableView
        {...this.props}
        ref={ref => (this._nativeViewRef = ref)}
      />
    )
  }

  getScrollableNode() {
    return ReactNative.findNodeHandle(this._nativeViewRef)
  }
}

// this is required in order to support native events:
const AnimatedInteractableView = Animated.createAnimatedComponent(
  WrappedInteractableView
)

class WrappedAnimatedInteractableView extends Component {
  constructor(props) {
    super(props)
    if (this.props.animatedValueX || this.props.animatedValueY) {
      this._animatedEvent = Animated.event(
        [
          {
            nativeEvent: {
              x: this.props.animatedValueX,
              y: this.props.animatedValueY,
            },
          },
        ],
        { useNativeDriver: !!this.props.animatedNativeDriver }
      )
    }
  }

  componentWillMount() {
    // this.chokeTheBridge();
  }

  // this helps us verify that useNativeDriver actually works and we don't rely on the bridge
  chokeTheBridge() {
    let j = 0
    setInterval(() => {
      for (var index = 0; index < 1e9; index++) {
        j++
      }
    }, 500)
  }

  render() {
    return (
      <AnimatedInteractableView
        dragToss={0.1}
        {...this.props}
        animatedValueX={undefined}
        animatedValueY={undefined}
        onAnimatedEvent={this._animatedEvent}
        reportOnAnimatedEvents={!!this._animatedEvent}
      />
    )
  }

  setVelocity(params) {
    if (Platform.OS === 'ios') {
      NativeViewManager.setVelocity(ReactNative.findNodeHandle(this), params)
    } else if (Platform.OS === 'android') {
      UIManager.dispatchViewManagerCommand(
        ReactNative.findNodeHandle(this),
        UIManager.InteractableView.Commands.setVelocity,
        [params]
      )
    }
  }

  snapTo(params) {
    if (Platform.OS === 'ios') {
      NativeViewManager.snapTo(ReactNative.findNodeHandle(this), params)
    } else if (Platform.OS === 'android') {
      UIManager.dispatchViewManagerCommand(
        ReactNative.findNodeHandle(this),
        UIManager.InteractableView.Commands.snapTo,
        [params]
      )
    }
  }

  changePosition(params) {
    if (Platform.OS === 'ios') {
      NativeViewManager.changePosition(ReactNative.findNodeHandle(this), params)
    } else if (Platform.OS === 'android') {
      UIManager.dispatchViewManagerCommand(
        ReactNative.findNodeHandle(this),
        UIManager.InteractableView.Commands.changePosition,
        [params]
      )
    }
  }

  bringToFront() {
    if (Platform.OS === 'android') {
      UIManager.dispatchViewManagerCommand(
        ReactNative.findNodeHandle(this),
        UIManager.InteractableView.Commands.bringToFront,
        []
      )
    }
  }
}

export default WrappedAnimatedInteractableView