A standard interface for your scrollable React Native components, making it easier to compose components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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


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


npm install react-native-scrollable-decorator


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');

class InfiniteScrollView extends React.Component {

  static 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) {

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


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

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

  _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);