Skip to content

A standard interface for your scrollable React Native components, making it easier to compose components.

License

Notifications You must be signed in to change notification settings

expo/react-native-scrollable-mixin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ScrollableMixin Slack

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.

npm package

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

About

A standard interface for your scrollable React Native components, making it easier to compose components.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published