react-native-scrollable-decorator
A standard interface for your scrollable React Native components, making it easier to compose components
Last updated 2 years ago by ide .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install react-native-scrollable-decorator 
SYNC missed versions from official npm registry.

react-native-scrollable-decorator

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 @scrollbale and implement getScrollResponder(), which must return the underlying scrollable component's scroll responder.

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

@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; }}
        renderScrollView={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);
  }
}
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 3
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (2)

Copyright 2014 - 2017 © taobao.org |