@tamagui/react-native-web-lite 1.112.5

package/src/ScrollView/index.tsx

@@ -0,0 +1,833 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React from 'react'
+import {
+  Platform,
+  StyleSheet,
+  TextInputState,
+  UIManager,
+  dismissKeyboard,
+  invariant,
+  mergeRefs,
+  warning,
+} from '@tamagui/react-native-web-internals'
+
+import Dimensions from '../Dimensions/index'
+import View from '../View/index'
+import ScrollViewBase from './ScrollViewBase'
+
+const emptyObject = {} as any
+const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16
+
+type Event = Object
+
+class ScrollView extends React.Component<any> {
+  _scrollNodeRef: any
+  _innerViewRef: any
+
+  keyboardWillOpenTo: any = null
+  additionalScrollOffset = 0
+  isTouching = false
+  lastMomentumScrollBeginTime = 0
+  lastMomentumScrollEndTime = 0
+
+  // Reset to false every time becomes responder. This is used to:
+  // - Determine if the scroll view has been scrolled and therefore should
+  // refuse to give up its responder lock.
+  // - Determine if releasing should dismiss the keyboard when we are in
+  // tap-to-dismiss mode (!this.props.keyboardShouldPersistTaps).
+  observedScrollSinceBecomingResponder = false
+  becameResponderWhileAnimating = false
+
+  flashScrollIndicators() {
+    this.scrollResponderFlashScrollIndicators()
+  }
+
+  /**
+   * Returns a reference to the underlying scroll responder, which supports
+   * operations like `scrollTo`. All ScrollView-like components should
+   * implement this method so that they can be composed while providing access
+   * to the underlying scroll responder's methods.
+   */
+  getScrollResponder() {
+    return this.mixin
+  }
+
+  getScrollableNode() {
+    return this._scrollNodeRef
+  }
+
+  getInnerViewRef() {
+    return this._innerViewRef
+  }
+
+  getInnerViewNode() {
+    return this._innerViewRef
+  }
+
+  getNativeScrollRef() {
+    return this._scrollNodeRef
+  }
+
+  /**
+   * Scrolls to a given x, y offset, either immediately or with a smooth animation.
+   * Syntax:
+   *
+   * scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
+   *
+   * Note: The weird argument signature is due to the fact that, for historical reasons,
+   * the function also accepts separate arguments as as alternative to the options object.
+   * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
+   */
+  scrollTo(
+    y?: number | { x?: number; y?: number; animated?: boolean },
+    x?: number,
+    animated?: boolean
+  ) {
+    if (typeof y === 'number') {
+      console.warn(
+        '`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.'
+      )
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      ;({ x, y, animated } = y || emptyObject)
+    }
+
+    this.getScrollResponder().scrollResponderScrollTo({
+      x: x || 0,
+      y: y || 0,
+      animated: animated !== false,
+    })
+  }
+
+  /**
+   * If this is a vertical ScrollView scrolls to the bottom.
+   * If this is a horizontal ScrollView scrolls to the right.
+   *
+   * Use `scrollToEnd({ animated: true })` for smooth animated scrolling,
+   * `scrollToEnd({ animated: false })` for immediate scrolling.
+   * If no options are passed, `animated` defaults to true.
+   */
+  scrollToEnd(options?: { animated?: boolean }) {
+    // Default to true
+    const animated = (options && options.animated) !== false
+    const { horizontal } = this.props
+    const scrollResponder = this.getScrollResponder()
+    const scrollResponderNode = this._scrollNodeRef
+    const x = horizontal ? scrollResponderNode.scrollWidth : 0
+    const y = horizontal ? 0 : scrollResponderNode.scrollHeight
+    scrollResponder.scrollResponderScrollTo({ x, y, animated })
+  }
+
+  render() {
+    const {
+      contentContainerStyle,
+      horizontal,
+      onContentSizeChange,
+      refreshControl,
+      stickyHeaderIndices,
+      pagingEnabled,
+      /* eslint-disable */
+      forwardedRef,
+      keyboardDismissMode,
+      onScroll,
+      centerContent,
+      /* eslint-enable */
+      ...other
+    } = this.props
+
+    if (process.env.NODE_ENV !== 'production' && this.props.style) {
+      const style = StyleSheet.flatten(this.props.style)
+      const childLayoutProps = ['alignItems', 'justifyContent'].filter(
+        (prop) => style && style[prop] !== undefined
+      )
+      invariant(
+        childLayoutProps.length === 0,
+        `ScrollView child layout (${JSON.stringify(childLayoutProps)}) ` +
+          'must be applied through the contentContainerStyle prop.'
+      )
+    }
+
+    let contentSizeChangeProps = {}
+    if (onContentSizeChange) {
+      contentSizeChangeProps = {
+        onLayout: this._handleContentOnLayout.bind(this),
+      }
+    }
+
+    const hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices)
+    const children =
+      hasStickyHeaderIndices || pagingEnabled
+        ? React.Children.map(this.props.children, (child, i) => {
+            const isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1
+            if (child != null && (isSticky || pagingEnabled)) {
+              return (
+                <View
+                  style={StyleSheet.compose(
+                    isSticky && styles.stickyHeader,
+                    pagingEnabled && styles.pagingEnabledChild
+                  )}
+                >
+                  {child}
+                </View>
+              )
+            } else {
+              return child
+            }
+          })
+        : this.props.children
+
+    const contentContainer = (
+      <View
+        {...contentSizeChangeProps}
+        // @ts-ignore
+        collapsable={false}
+        ref={this._setInnerViewRef.bind(this)}
+        style={[
+          horizontal && styles.contentContainerHorizontal,
+          centerContent && styles.contentContainerCenterContent,
+          contentContainerStyle,
+        ]}
+      >
+        {children}
+      </View>
+    )
+
+    const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical
+    const pagingEnabledStyle = horizontal
+      ? styles.pagingEnabledHorizontal
+      : styles.pagingEnabledVertical
+
+    const props = {
+      ...other,
+      style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
+      onTouchStart: this.scrollResponderHandleTouchStart.bind(this),
+      onTouchMove: this.scrollResponderHandleTouchMove.bind(this),
+      onTouchEnd: this.scrollResponderHandleTouchEnd.bind(this),
+      onScrollBeginDrag: this.scrollResponderHandleScrollBeginDrag.bind(this),
+      onScrollEndDrag: this.scrollResponderHandleScrollEndDrag.bind(this),
+      onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin.bind(this),
+      onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd.bind(this),
+      onStartShouldSetResponder:
+        this.scrollResponderHandleStartShouldSetResponder.bind(this),
+      onStartShouldSetResponderCapture:
+        this.scrollResponderHandleStartShouldSetResponderCapture.bind(this),
+      onScrollShouldSetResponder:
+        this.scrollResponderHandleScrollShouldSetResponder.bind(this),
+      onScroll: this._handleScroll.bind(this),
+      onResponderGrant: this.scrollResponderHandleResponderGrant.bind(this),
+      onResponderTerminationRequest:
+        this.scrollResponderHandleTerminationRequest.bind(this),
+      onResponderRelease: this.scrollResponderHandleResponderRelease.bind(this),
+      onResponderReject: this.scrollResponderHandleResponderReject.bind(this),
+    }
+
+    const ScrollViewClass = ScrollViewBase
+
+    invariant(ScrollViewClass !== undefined, 'ScrollViewClass must not be undefined')
+
+    const scrollView = (
+      <ScrollViewClass {...props} ref={this._setScrollNodeRef.bind(this)}>
+        {contentContainer}
+      </ScrollViewClass>
+    )
+
+    if (refreshControl) {
+      return React.cloneElement(refreshControl, { style: props.style }, scrollView)
+    }
+
+    return scrollView
+  }
+
+  _handleContentOnLayout(e: any) {
+    const { width, height } = e.nativeEvent.layout
+    this.props.onContentSizeChange(width, height)
+  }
+
+  _handleScroll(e: Object) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.onScroll && this.props.scrollEventThrottle == null) {
+        console.info(
+          'You specified `onScroll` on a <ScrollView> but not ' +
+            '`scrollEventThrottle`. You will only receive one event. ' +
+            'Using `16` you get all the events but be aware that it may ' +
+            "cause frame drops, use a bigger number if you don't need as " +
+            'much precision.'
+        )
+      }
+    }
+
+    if (this.props.keyboardDismissMode === 'on-drag') {
+      dismissKeyboard()
+    }
+
+    this.scrollResponderHandleScroll(e)
+  }
+
+  _setInnerViewRef(node) {
+    this._innerViewRef = node
+  }
+
+  _setScrollNodeRef(node) {
+    this._scrollNodeRef = node
+    // ScrollView needs to add more methods to the hostNode in addition to those
+    // added by `usePlatformMethods`. This is temporarily until an API like
+    // `ScrollView.scrollTo(hostNode, { x, y })` is added to React Native.
+    if (node != null) {
+      node.getScrollResponder = this.getScrollResponder
+      node.getInnerViewNode = this.getInnerViewNode
+      node.getInnerViewRef = this.getInnerViewRef
+      node.getNativeScrollRef = this.getNativeScrollRef
+      node.getScrollableNode = this.getScrollableNode
+      node.scrollTo = this.scrollTo
+      node.scrollToEnd = this.scrollToEnd
+      node.flashScrollIndicators = this.flashScrollIndicators
+      node.scrollResponderZoomTo = this.scrollResponderZoomTo
+      node.scrollResponderScrollNativeHandleToKeyboard =
+        this.scrollResponderScrollNativeHandleToKeyboard
+    }
+    const ref = mergeRefs(this.props.forwardedRef)
+    ref(node)
+  }
+
+  /**
+   * Invoke this from an `onScroll` event.
+   */
+  scrollResponderHandleScrollShouldSetResponder(): boolean {
+    return this.isTouching
+  }
+
+  /**
+   * Merely touch starting is not sufficient for a scroll view to become the
+   * responder. Being the "responder" means that the very next touch move/end
+   * event will result in an action/movement.
+   *
+   * Invoke this from an `onStartShouldSetResponder` event.
+   *
+   * `onStartShouldSetResponder` is used when the next move/end will trigger
+   * some UI movement/action, but when you want to yield priority to views
+   * nested inside of the view.
+   *
+   * There may be some cases where scroll views actually should return `true`
+   * from `onStartShouldSetResponder`: Any time we are detecting a standard tap
+   * that gives priority to nested views.
+   *
+   * - If a single tap on the scroll view triggers an action such as
+   *   recentering a map style view yet wants to give priority to interaction
+   *   views inside (such as dropped pins or labels), then we would return true
+   *   from this method when there is a single touch.
+   *
+   * - Similar to the previous case, if a two finger "tap" should trigger a
+   *   zoom, we would check the `touches` count, and if `>= 2`, we would return
+   *   true.
+   *
+   */
+  scrollResponderHandleStartShouldSetResponder(): boolean {
+    return false
+  }
+
+  /**
+   * There are times when the scroll view wants to become the responder
+   * (meaning respond to the next immediate `touchStart/touchEnd`), in a way
+   * that *doesn't* give priority to nested views (hence the capture phase):
+   *
+   * - Currently animating.
+   * - Tapping anywhere that is not the focused input, while the keyboard is
+   *   up (which should dismiss the keyboard).
+   *
+   * Invoke this from an `onStartShouldSetResponderCapture` event.
+   */
+  scrollResponderHandleStartShouldSetResponderCapture(e: Event): boolean {
+    // First see if we want to eat taps while the keyboard is up
+    // var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+    // if (!this.props.keyboardShouldPersistTaps &&
+    //   currentlyFocusedTextInput != null &&
+    //   e.target !== currentlyFocusedTextInput) {
+    //   return true;
+    // }
+    return this.scrollResponderIsAnimating()
+  }
+
+  /**
+   * Invoke this from an `onResponderReject` event.
+   *
+   * Some other element is not yielding its role as responder. Normally, we'd
+   * just disable the `UIScrollView`, but a touch has already began on it, the
+   * `UIScrollView` will not accept being disabled after that. The easiest
+   * solution for now is to accept the limitation of disallowing this
+   * altogether. To improve this, find a way to disable the `UIScrollView` after
+   * a touch has already started.
+   */
+  scrollResponderHandleResponderReject() {
+    warning(false, "ScrollView doesn't take rejection well - scrolls anyway")
+  }
+
+  /**
+   * We will allow the scroll view to give up its lock iff it acquired the lock
+   * during an animation. This is a very useful default that happens to satisfy
+   * many common user experiences.
+   *
+   * - Stop a scroll on the left edge, then turn that into an outer view's
+   *   backswipe.
+   * - Stop a scroll mid-bounce at the top, continue pulling to have the outer
+   *   view dismiss.
+   * - However, without catching the scroll view mid-bounce (while it is
+   *   motionless), if you drag far enough for the scroll view to become
+   *   responder (and therefore drag the scroll view a bit), any backswipe
+   *   navigation of a swipe gesture higher in the view hierarchy, should be
+   *   rejected.
+   */
+  scrollResponderHandleTerminationRequest(): boolean {
+    return !this.observedScrollSinceBecomingResponder
+  }
+
+  /**
+   * Invoke this from an `onTouchEnd` event.
+   *
+   * @param {SyntheticEvent} e Event.
+   */
+  scrollResponderHandleTouchEnd(e: Event) {
+    const nativeEvent = e.nativeEvent
+    this.isTouching = nativeEvent.touches.length !== 0
+    this.props.onTouchEnd && this.props.onTouchEnd(e)
+  }
+
+  /**
+   * Invoke this from an `onResponderRelease` event.
+   */
+  scrollResponderHandleResponderRelease(e: Event) {
+    this.props.onResponderRelease && this.props.onResponderRelease(e)
+
+    // By default scroll views will unfocus a textField
+    // if another touch occurs outside of it
+    const currentlyFocusedTextInput = TextInputState.currentlyFocusedField()
+    if (
+      !this.props.keyboardShouldPersistTaps &&
+      currentlyFocusedTextInput != null &&
+      e.target !== currentlyFocusedTextInput &&
+      !this.observedScrollSinceBecomingResponder &&
+      !this.becameResponderWhileAnimating
+    ) {
+      this.props.onScrollResponderKeyboardDismissed &&
+        this.props.onScrollResponderKeyboardDismissed(e)
+      TextInputState.blurTextInput(currentlyFocusedTextInput)
+    }
+  }
+
+  scrollResponderHandleScroll(e: Event) {
+    this.observedScrollSinceBecomingResponder = true
+    this.props.onScroll && this.props.onScroll(e)
+  }
+
+  /**
+   * Invoke this from an `onResponderGrant` event.
+   */
+  scrollResponderHandleResponderGrant(e: Event) {
+    this.observedScrollSinceBecomingResponder = false
+    this.props.onResponderGrant && this.props.onResponderGrant(e)
+    this.becameResponderWhileAnimating = this.scrollResponderIsAnimating()
+  }
+
+  /**
+   * Unfortunately, `onScrollBeginDrag` also fires when *stopping* the scroll
+   * animation, and there's not an easy way to distinguish a drag vs. stopping
+   * momentum.
+   *
+   * Invoke this from an `onScrollBeginDrag` event.
+   */
+  scrollResponderHandleScrollBeginDrag(e: Event) {
+    this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e)
+  }
+
+  /**
+   * Invoke this from an `onScrollEndDrag` event.
+   */
+  scrollResponderHandleScrollEndDrag(e: Event) {
+    this.props.onScrollEndDrag && this.props.onScrollEndDrag(e)
+  }
+
+  /**
+   * Invoke this from an `onMomentumScrollBegin` event.
+   */
+  scrollResponderHandleMomentumScrollBegin(e: Event) {
+    this.lastMomentumScrollBeginTime = Date.now()
+    this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e)
+  }
+
+  /**
+   * Invoke this from an `onMomentumScrollEnd` event.
+   */
+  scrollResponderHandleMomentumScrollEnd(e: Event) {
+    this.lastMomentumScrollEndTime = Date.now()
+    this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e)
+  }
+
+  /**
+   * Invoke this from an `onTouchStart` event.
+   *
+   * Since we know that the `SimpleEventPlugin` occurs later in the plugin
+   * order, after `ResponderEventPlugin`, we can detect that we were *not*
+   * permitted to be the responder (presumably because a contained view became
+   * responder). The `onResponderReject` won't fire in that case - it only
+   * fires when a *current* responder rejects our request.
+   *
+   * @param {SyntheticEvent} e Touch Start event.
+   */
+  scrollResponderHandleTouchStart(e: Event) {
+    this.isTouching = true
+    this.props.onTouchStart && this.props.onTouchStart(e)
+  }
+
+  /**
+   * Invoke this from an `onTouchMove` event.
+   *
+   * Since we know that the `SimpleEventPlugin` occurs later in the plugin
+   * order, after `ResponderEventPlugin`, we can detect that we were *not*
+   * permitted to be the responder (presumably because a contained view became
+   * responder). The `onResponderReject` won't fire in that case - it only
+   * fires when a *current* responder rejects our request.
+   *
+   * @param {SyntheticEvent} e Touch Start event.
+   */
+  scrollResponderHandleTouchMove(e: Event) {
+    this.props.onTouchMove && this.props.onTouchMove(e)
+  }
+
+  /**
+   * A helper function for this class that lets us quickly determine if the
+   * view is currently animating. This is particularly useful to know when
+   * a touch has just started or ended.
+   */
+  scrollResponderIsAnimating(): boolean {
+    const now = Date.now()
+    const timeSinceLastMomentumScrollEnd = now - this.lastMomentumScrollEndTime
+    const isAnimating =
+      timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
+      this.lastMomentumScrollEndTime < this.lastMomentumScrollBeginTime
+    return isAnimating
+  }
+
+  /**
+   * A helper function to scroll to a specific point in the scrollview.
+   * This is currently used to help focus on child textviews, but can also
+   * be used to quickly scroll to any element we want to focus. Syntax:
+   *
+   * scrollResponderScrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
+   *
+   * Note: The weird argument signature is due to the fact that, for historical reasons,
+   * the function also accepts separate arguments as as alternative to the options object.
+   * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
+   */
+  scrollResponderScrollTo(
+    x?:
+      | number
+      | {
+          x?: number
+          y?: number
+          animated?: boolean
+        },
+    y?: number,
+    animated?: boolean
+  ) {
+    if (typeof x === 'number') {
+      console.warn(
+        '`scrollResponderScrollTo(x, y, animated)` is deprecated. Use `scrollResponderScrollTo({x: 5, y: 5, animated: true})` instead.'
+      )
+    } else {
+      ;({ x, y, animated } = x || emptyObject)
+    }
+    const node = this.options.getScrollableNode()
+    const left = x || 0
+    const top = y || 0
+    if (typeof node.scroll === 'function') {
+      node.scroll({ top, left, behavior: !animated ? 'auto' : 'smooth' })
+    } else {
+      node.scrollLeft = left
+      node.scrollTop = top
+    }
+  }
+
+  /**
+   * A helper function to zoom to a specific rect in the scrollview. The argument has the shape
+   * {x: number; y: number; width: number; height: number; animated: boolean = true}
+   *
+   * @platform ios
+   */
+  scrollResponderZoomTo(
+    rect: {
+      x: number
+      y: number
+      width: number
+      height: number
+      animated?: boolean
+    },
+    animated?: boolean // deprecated, put this inside the rect argument instead
+  ) {
+    if (Platform.OS !== 'ios') {
+      invariant('zoomToRect is not implemented')
+    }
+  }
+
+  /**
+   * Displays the scroll indicators momentarily.
+   */
+  scrollResponderFlashScrollIndicators() {}
+
+  /**
+   * This method should be used as the callback to onFocus in a TextInputs'
+   * parent view. Note that any module using this mixin needs to return
+   * the parent view's ref in getScrollViewRef() in order to use this method.
+   * @param {any} nodeHandle The TextInput node handle
+   * @param {number} additionalOffset The scroll view's top "contentInset".
+   *        Default is 0.
+   * @param {bool} preventNegativeScrolling Whether to allow pulling the content
+   *        down to make it meet the keyboard's top. Default is false.
+   */
+  scrollResponderScrollNativeHandleToKeyboard = (
+    nodeHandle: any,
+    additionalOffset?: number,
+    preventNegativeScrollOffset?: boolean
+  ) => {
+    this.additionalScrollOffset = additionalOffset || 0
+    this.preventNegativeScrollOffset = !!preventNegativeScrollOffset
+    UIManager.measureLayout(
+      nodeHandle,
+      this.options.getInnerViewNode(),
+      this.scrollResponderTextInputFocusError,
+      this.scrollResponderInputMeasureAndScrollToKeyboard
+    )
+  }
+
+  /**
+   * The calculations performed here assume the scroll view takes up the entire
+   * screen - even if has some content inset. We then measure the offsets of the
+   * keyboard, and compensate both for the scroll view's "contentInset".
+   *
+   * @param {number} left Position of input w.r.t. table view.
+   * @param {number} top Position of input w.r.t. table view.
+   * @param {number} width Width of the text input.
+   * @param {number} height Height of the text input.
+   */
+  scrollResponderInputMeasureAndScrollToKeyboard = (
+    left: number,
+    top: number,
+    width: number,
+    height: number
+  ) => {
+    let keyboardScreenY = Dimensions.get('window').height
+    if (this.keyboardWillOpenTo) {
+      keyboardScreenY = this.keyboardWillOpenTo.endCoordinates.screenY
+    }
+    let scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset
+
+    // By default, this can scroll with negative offset, pulling the content
+    // down so that the target component's bottom meets the keyboard's top.
+    // If requested otherwise, cap the offset at 0 minimum to avoid content
+    // shifting down.
+    if (this.preventNegativeScrollOffset) {
+      scrollOffsetY = Math.max(0, scrollOffsetY)
+    }
+    this.scrollResponderScrollTo({ x: 0, y: scrollOffsetY, animated: true })
+
+    this.additionalOffset = 0
+    this.preventNegativeScrollOffset = false
+  }
+
+  scrollResponderTextInputFocusError(e: Event) {
+    console.error('Error measuring text field: ', e)
+  }
+
+  /**
+   * Warning, this may be called several times for a single keyboard opening.
+   * It's best to store the information in this method and then take any action
+   * at a later point (either in `keyboardDidShow` or other).
+   *
+   * Here's the order that events occur in:
+   * - focus
+   * - willShow {startCoordinates, endCoordinates} several times
+   * - didShow several times
+   * - blur
+   * - willHide {startCoordinates, endCoordinates} several times
+   * - didHide several times
+   *
+   * The `ScrollResponder` providesModule callbacks for each of these events.
+   * Even though any user could have easily listened to keyboard events
+   * themselves, using these `props` callbacks ensures that ordering of events
+   * is consistent - and not dependent on the order that the keyboard events are
+   * subscribed to. This matters when telling the scroll view to scroll to where
+   * the keyboard is headed - the scroll responder better have been notified of
+   * the keyboard destination before being instructed to scroll to where the
+   * keyboard will be. Stick to the `ScrollResponder` callbacks, and everything
+   * will work.
+   *
+   * WARNING: These callbacks will fire even if a keyboard is displayed in a
+   * different navigation pane. Filter out the events to determine if they are
+   * relevant to you. (For example, only if you receive these callbacks after
+   * you had explicitly focused a node etc).
+   */
+  scrollResponderKeyboardWillShow(e: Event) {
+    this.keyboardWillOpenTo = e
+    this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e)
+  }
+
+  scrollResponderKeyboardWillHide(e: Event) {
+    this.keyboardWillOpenTo = null
+    this.props.onKeyboardWillHide && this.props.onKeyboardWillHide(e)
+  }
+
+  scrollResponderKeyboardDidShow(e: Event) {
+    // TODO(7693961): The event for DidShow is not available on iOS yet.
+    // Use the one from WillShow and do not assign.
+    if (e) {
+      this.keyboardWillOpenTo = e
+    }
+    this.props.onKeyboardDidShow && this.props.onKeyboardDidShow(e)
+  }
+
+  scrollResponderKeyboardDidHide(e: Event) {
+    this.keyboardWillOpenTo = null
+    this.props.onKeyboardDidHide && this.props.onKeyboardDidHide(e)
+  }
+}
+
+const commonStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  // Enable hardware compositing in modern browsers.
+  // Creates a new layer with its own backing surface that can significantly
+  // improve scroll performance.
+  transform: [{ translateZ: 0 }],
+  // iOS native scrolling
+  WebkitOverflowScrolling: 'touch',
+}
+
+const styles = {
+  baseVertical: {
+    ...commonStyle,
+    flexDirection: 'column',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  baseHorizontal: {
+    ...commonStyle,
+    flexDirection: 'row',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+  },
+  contentContainerHorizontal: {
+    flexDirection: 'row',
+  },
+  contentContainerCenterContent: {
+    justifyContent: 'center',
+    flexGrow: 1,
+  },
+  stickyHeader: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+  },
+  pagingEnabledHorizontal: {
+    scrollSnapType: 'x mandatory',
+  },
+  pagingEnabledVertical: {
+    scrollSnapType: 'y mandatory',
+  },
+  pagingEnabledChild: {
+    scrollSnapAlign: 'start',
+  },
+}
+
+const ForwardedScrollView = React.forwardRef((props, forwardedRef) => {
+  return <ScrollView {...props} forwardedRef={forwardedRef} />
+})
+
+ForwardedScrollView.displayName = 'ScrollView'
+
+export default ForwardedScrollView
+
+/**
+ * Mixin that can be integrated in order to handle scrolling that plays well
+ * with `ResponderEventPlugin`. Integrate with your platform specific scroll
+ * views, or even your custom built (every-frame animating) scroll views so that
+ * all of these systems play well with the `ResponderEventPlugin`.
+ *
+ * iOS scroll event timing nuances:
+ * ===============================
+ *
+ *
+ * Scrolling without bouncing, if you touch down:
+ * -------------------------------
+ *
+ * 1. `onMomentumScrollBegin` (when animation begins after letting up)
+ *    ... physical touch starts ...
+ * 2. `onTouchStartCapture`   (when you press down to stop the scroll)
+ * 3. `onTouchStart`          (same, but bubble phase)
+ * 4. `onResponderRelease`    (when lifting up - you could pause forever before * lifting)
+ * 5. `onMomentumScrollEnd`
+ *
+ *
+ * Scrolling with bouncing, if you touch down:
+ * -------------------------------
+ *
+ * 1. `onMomentumScrollBegin` (when animation begins after letting up)
+ *    ... bounce begins ...
+ *    ... some time elapses ...
+ *    ... physical touch during bounce ...
+ * 2. `onMomentumScrollEnd`   (Makes no sense why this occurs first during bounce)
+ * 3. `onTouchStartCapture`   (immediately after `onMomentumScrollEnd`)
+ * 4. `onTouchStart`          (same, but bubble phase)
+ * 5. `onTouchEnd`            (You could hold the touch start for a long time)
+ * 6. `onMomentumScrollBegin` (When releasing the view starts bouncing back)
+ *
+ * So when we receive an `onTouchStart`, how can we tell if we are touching
+ * *during* an animation (which then causes the animation to stop)? The only way
+ * to tell is if the `touchStart` occurred immediately after the
+ * `onMomentumScrollEnd`.
+ *
+ * This is abstracted out for you, so you can just call this.scrollResponderIsAnimating() if
+ * necessary
+ *
+ * `ScrollResponder` also includes logic for blurring a currently focused input
+ * if one is focused while scrolling. The `ScrollResponder` is a natural place
+ * to put this logic since it can support not dismissing the keyboard while
+ * scrolling, unless a recognized "tap"-like gesture has occurred.
+ *
+ * The public lifecycle API includes events for keyboard interaction, responder
+ * interaction, and scrolling (among others). The keyboard callbacks
+ * `onKeyboardWill/Did/*` are *global* events, but are invoked on scroll
+ * responder's props so that you can guarantee that the scroll responder's
+ * internal state has been updated accordingly (and deterministically) by
+ * the time the props callbacks are invoke. Otherwise, you would always wonder
+ * if the scroll responder is currently in a state where it recognizes new
+ * keyboard positions etc. If coordinating scrolling with keyboard movement,
+ * *always* use these hooks instead of listening to your own global keyboard
+ * events.
+ *
+ * Public keyboard lifecycle API: (props callbacks)
+ *
+ * Standard Keyboard Appearance Sequence:
+ *
+ *   this.props.onKeyboardWillShow
+ *   this.props.onKeyboardDidShow
+ *
+ * `onScrollResponderKeyboardDismissed` will be invoked if an appropriate
+ * tap inside the scroll responder's scrollable region was responsible
+ * for the dismissal of the keyboard. There are other reasons why the
+ * keyboard could be dismissed.
+ *
+ *   this.props.onScrollResponderKeyboardDismissed
+ *
+ * Standard Keyboard Hide Sequence:
+ *
+ *   this.props.onKeyboardWillHide
+ *   this.props.onKeyboardDidHide
+ */