react-native-scrollable-mixin's Introduction

ScrollableMixin

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.

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

react-native-scrollable-mixin's People

Contributors

Stargazers

Watchers

react-native-scrollable-mixin's Issues

Can't get InvertibleScrollView to work

I'm trying to use this on react native for Android. But the it renders the same as the regular list view.

My React Native version is 0.11.0

Here is my code,

import React from "react-native";
import InvertibleScrollView from "react-native-invertible-scroll-view";
import ChatItem from "./chat-item";
import PageLoading from "./page-loading";
import PageRetry from "./page-retry";

const {
    ListView,
    View
} = React;

export default class Chat extends React.Component {
    constructor(props) {
        super(props);

        let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

        this.state = {
            dataSource: ds.cloneWithRows(this.props.data)
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(nextProps.data)
        });
    }

    componentDidMount() {
        if (this._scroll) {
            this._scroll.scrollTo(0);
        }
    }

    render() {
        return (
            <View {...this.props}>
                {(() => {
                    if (this.props.data.length) {
                        return (
                            <ListView
                                renderScrollComponent={props => <InvertibleScrollView {...props} inverted ref={c => this._scroll = c} />}
                                dataSource={this.state.dataSource}
                                renderRow={(text, sectionID, rowID) => {
                                    let previousText;

                                    if (rowID > 0) {
                                        previousText = this.state.dataSource.getRowData(0, rowID - 1);
                                    }

                                    return <ChatItem key={text.id} text={text} previousText={previousText} />;
                                }}
                            />
                        );
                    } else if (this.props.failed) {
                        return <PageRetry onRetry={this._onRetry.bind(this)} />;
                    } else {
                        return <PageLoading />;
                    }
                })()}
            </View>
        );
    }
}

Chat.propTypes = {
    failed: React.PropTypes.bool,
    data: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.string.isRequired
    })).isRequired
};

Am I doing something wrong?

Recommend Projects

expo / react-native-scrollable-mixin Goto Github PK

react-native-scrollable-mixin's Introduction

ScrollableMixin

Installation

Usage

With JavaScript classes

With `React.createClass`

Features

react-native-scrollable-mixin's People

Contributors

Stargazers

Watchers

Forkers

react-native-scrollable-mixin's Issues

Can't get InvertibleScrollView to work

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

expo / react-native-scrollable-mixin Goto Github PK

react-native-scrollable-mixin's Introduction

ScrollableMixin

Installation

Usage

With JavaScript classes

With React.createClass

Features

react-native-scrollable-mixin's People

Contributors

Stargazers

Watchers

Forkers

react-native-scrollable-mixin's Issues

Recommend Projects

Recommend Topics

Recommend Org

With `React.createClass`