A standard interface for your scrollable React Native components, making it easier to compose components.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore Initial commit Jul 9, 2015
LICENSE README and implementation Jul 9, 2015
README.md Fixing typos on README.md Dec 18, 2015
package.json 0.0.2 Jul 17, 2015
scrollable.js Remove Flow directive Jul 17, 2015

README.md

react-native-scrollable-decorator Slack

The @scrollable decorator 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 ScrollableMixin for the mixin version of this decorator.

npm package

Installation

npm install react-native-scrollable-decorator

Usage

Decorate your scrollable React components with @scrollable and implement getScrollResponder(), which must return the underlying scrollable component's scroll responder.

let scrollable = require('react-native-scrollable-decorator');

@scrollable
class InfiniteScrollView extends React.Component {

  static propTypes = {
    ...ScrollView.propTypes,
    renderScrollComponent: React.PropTypes.func.isRequired,
  };

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

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

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

Features

By decorating your custom component with @scrollable, your component gets the ScrollView API. For example:

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

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