Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-18T19:16:07.000Z (over 8 years ago)
- Last Synced: 2024-04-12T16:15:51.470Z (about 2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 37
- Watchers: 18
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- 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 [](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.
[](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);
}
}
```