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.
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 = ; @scrollableComponent static propTypes = ...ScrollViewpropTypes renderScrollComponent: ReactPropTypesfuncisRequired ; /** * IMPORTANT: You must return the scroll responder of the underlying * scrollable component from getScrollResponder() when using @scrollable. */ { return this_scrollView; } { this_scrollView; } { var renderScrollComponent ...props = thisprops; return React; });
Features
By decorating your custom component with @scrollable
, your component gets the ScrollView
API. For example:
Component { return <ListView ref= { this_scrollView = component; } renderScrollView= <InfiniteScrollView ...props /> dataSource=... renderRow=... /> ; } { // 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; }