react-native-tvos/Libraries/Components/TV/TVTextScrollView.js

A framework for building native apps using React

/**
 * Copyright (c) Douglas Lowder.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

import typeof Props from '../ScrollView/ScrollView';

import tagForComponentOrHandle from './tagForComponentOrHandle';

const ScrollView = require('../ScrollView/ScrollView').default;
const {tvFocusEventHandler} = require('./TVFocusEventHandler');
const React = require('react');

/**
 * Convenience wrapper to create a scroll view that will scroll correctly
 * using swipe gestures on tvOS, even if the scroll view has no focusable
 * subviews.
 *
 * The main use case would be when a large scrolling block of text needs
 * to be presented to the user.
 *
 * Props:
 *
 */

class TVTextScrollView extends React.Component<{
  ...Props,
  /**
   * The duration of the scroll animation when a swipe is detected.
   * Default value is 0.3 s
   */
  scrollDuration?: number,
  /**
   * Scrolling distance when a swipe is detected
   * Default value is half the visible height (vertical scroller)
   * or width (horizontal scroller)
   */
  pageSize?: number,
  /**
   * If true, will scroll to start when focus moves out past the beginning
   * of the scroller
   * Defaults to true
   */
  snapToStart?: boolean,
  /**
   * If true, will scroll to end when focus moves out past the end of the
   * scroller
   * Defaults to true
   */
  snapToEnd?: boolean,
  /**
   * Called when the scroller comes into focus (e.g. for highlighting)
   */
  onFocus?: (evt: Event) => void,
  /**
   * Called when the scroller goes out of focus
   */
  onBlur?: (evt: Event) => void,
}> {
  _subscription: any;

  componentDidMount() {
    const cmp = this; // eslint-disable-line consistent-this
    const myTag = tagForComponentOrHandle(this);
    tvFocusEventHandler?.register(myTag, function (evt) {
      if (myTag === evt.tag) {
        if (evt.eventType === 'focus') {
          cmp.props.onFocus && cmp.props.onFocus(evt);
        } else if (evt.eventType === 'blur') {
          cmp.props.onBlur && cmp.props.onBlur(evt);
        }
      }
    });
  }

  componentWillUnmount() {
    const myTag = tagForComponentOrHandle(this);
    tvFocusEventHandler?.unregister(myTag);
  }

  render(): $FlowFixMe {
    const props: $FlowFixMe = {
      ...this.props,
      tvParallaxProperties: {
        pressDuration: this.props.scrollDuration || 0.0,
      },
      isTVSelectable: true,
      snapToInterval: this.props.pageSize || 0.0,
      removeClippedSubviews: false,
      automaticallyAdjustContentInsets: false,
    };
    return <ScrollView {...props}>{this.props.children}</ScrollView>;
  }
}

export default TVTextScrollView;