https://github.com/expo/react-native-scrollable-decorator

A standard interface for your scrollable React Native components, making it easier to compose components.
https://github.com/expo/react-native-scrollable-decorator

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/expo/react-native-scrollable-decorator
• Owner: expo
• License: mit
• Created: 2015-07-09T04:52:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-18T19:16:07.000Z (almost 9 years ago)
• Last Synced: 2024-04-23T02:36:50.044Z (7 months ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 37
• Watchers: 18
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-scrollable-decorator ★37 - A standard interface for your scrollable React Native components, making it easier to compose components (Components / UI)

README

        
# react-native-scrollable-decorator [![Slack](http://slack.exponentjs.com/badge.svg)](http://slack.exponentjs.com)

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](https://github.com/exponentjs/react-native-scrollable-mixin) for the mixin version of this decorator.

[![npm package](https://nodei.co/npm/react-native-scrollable-decorator.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-scrollable-decorator/)

## 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.

```js

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:

```js

class App extends React.Component {

  render() {

    return (

       { this._scrollView = component; }}

        renderScrollComponent={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);

  }

}

```