Package Exports

react-native-scrollable-mixin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-scrollable-mixin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ScrollableMixin

ScrollableMixin lets your scrollable React Native components conform to a standard interface, making it easier to compose components. This lets you compose different types of ScrollView-like components while preserving the ScrollView API, including methods like scrollTo.

See react-native-scrollable-decorator for the decorator version of this mixin.

Installation

npm install react-native-scrollable-mixin

Usage

Add ScrollableMixin to your scrollable React components and implement getScrollResponder(), which must return the underlying scrollable component's scroll responder.

With JavaScript classes

Use Object.assign to copy ScrollableMixin's functions to your class's prototype as instance methods:

class InfiniteScrollView extends React.Component {
  static propTypes = {
    ...ScrollView.propTypes,
    renderScrollComponent: PropTypes.func.isRequired
  };

  /**
   * IMPORTANT: You must return the scroll responder of the underlying
   * scrollable component from getScrollResponder() when using ScrollableMixin.
   */
  getScrollResponder() {
    return this._scrollView.getScrollResponder();
  }

  setNativeProps(props) {
    this._scrollView.setNativeProps(props);
  }

  render() {
    let { renderScrollComponent, ...props } = this.props;
    return React.cloneElement(renderScrollComponent(props), {
      ref: component => { this._scrollView = component; },
    });
  }
}

// Mix in ScrollableMixin's methods as instance methods
Object.assign(InfiniteScrollView.prototype, ScrollableMixin);

With `React.createClass`

let ScrollableMixin = require('react-native-scrollable-mixin');

let InfiniteScrollView = React.createClass({
  mixins: [ScrollableMixin],

  propTypes: {
    ...ScrollView.propTypes,
    renderScrollComponent: PropTypes.func.isRequired,
  },

  /**
   * IMPORTANT: You must return the scroll responder of the underlying
   * scrollable component from getScrollResponder() when using ScrollableMixin.
   */
  getScrollResponder() {
    return this._scrollView.getScrollResponder();
  },

  setNativeProps(props) {
    this._scrollView.setNativeProps(props);
  },

  render() {
    var {
      renderScrollComponent,
      ...props
    } = this.props;
    return React.cloneElement(renderScrollComponent(props), {
      ref: component => { this._scrollView = component; },
    });
  },
});

Features

By mixing in ScrollableMixin, your custom component gets the ScrollView API. For example:

class App extends React.Component {
  render() {
    return (
      <ListView
        ref={component => this._scrollView = component}
        renderScrollView={props => <InfiniteScrollView {...props} />}
        dataSource={...}
        renderRow={...}
      />
    );
  }

  _scrollToTop() {
    // By having all scrollable components conform to ScrollableMixin's
    // standard, calling `scrollTo` on your top-level scrollable component will
    // successfully scroll the underlying scroll view.
    this._scrollView.scrollTo(0, 0);
  }
}

react-native-scrollable-mixin