remobile/react-native-refresh-infinite-listview

a pure js pull-down-refresh and pull-up-loadmore react-native listview

React Native RefreshableListView (remobile)

A awesome pull-down-refresh and pull-up-loadmore listview

Installation

npm install @remobile/react-native-refresh-infinite-listview --save

Usage

Example

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    View,
    Text,
    StyleSheet,
    ListView
} = ReactNative;

var TimerMixin = require('react-timer-mixin');
var RefreshInfiniteListView = require('@remobile/react-native-refresh-infinite-listview');

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
module.exports = React.createClass({
    mixins: [TimerMixin],
    data: {index: 0, maxIndex:20, list:[]},
    getData(init) {
        var total = 5;
        if (init) {
            this.data.index = 0;
            this.data.list = [];
            total = Math.floor(Math.random()*5);
        }
        for (var i=0; i<total; i++) {
            this.data.list[this.data.index] = "Row" + (this.data.index+1);
            this.data.index++;
        }
    },
    getInitialState() {
        this.getData(true);
        return {
            dataSource: ds.cloneWithRows(this.data.list)
        }
    },
    onRefresh() {
        this.getData(true);
        this.setTimeout(()=>{
            this.list.hideHeader();
            this.setState({dataSource: ds.cloneWithRows(this.data.list)});
        }, 1000);
    },
    onInfinite() {
        this.getData();
        this.setTimeout(()=>{
            this.list.hideFooter();
            this.setState({dataSource: ds.cloneWithRows(this.data.list)});
        }, 1000);
    },
    loadedAllData() {
        return this.data.index >= this.data.maxIndex||this.data.index===0;
    },
    renderRow(text) {
        return (
            <View style={styles.row}>
                <Text >
                    {text}
                </Text>
            </View>
        )
    },
    renderSeparator(sectionID, rowID) {
        return (
            <View style={styles.separator} key={sectionID+rowID}/>
        );
    },
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{height:20}} />
                <RefreshInfiniteListView
                    ref = {(list) => {this.list= list}}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    renderSeparator={this.renderSeparator}
                    loadedAllData={this.loadedAllData}
                    initialListSize={30}
                    scrollEventThrottle={10}
                    style={{backgroundColor:'transparent'/*,top:100, left:10, width:200, height:300, position:'absolute'*/}}
                    onRefresh = {this.onRefresh}
                    onInfinite = {this.onInfinite}
                    >
                </RefreshInfiniteListView>
            </View>
        )
    }
});

var styles = StyleSheet.create({
    row: {
        height:60,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    list: {
        alignSelf:'stretch'
    },
    separator: {
        height: 1,
        backgroundColor: '#CCC'
    },
});

Screencasts

Props

• footerHeight:number if you need use infinite with custom, must set footerHeight
• pullDistance:number set pull distance, default is 50
• renderEmptyRow:func

            renderEmptyRow: () => {
                return (
                    <View style={{height:Dimensions.get('window').height, justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:40, fontWeight:'800', color:'red'}}>
                            have no data
                        </Text>
                    </View>
                )
            },

• renderHeaderRefreshIdle:func

            renderHeaderRefreshIdle: () => {return (
                <View style={{flex:1, height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Text style={styles.text}>
                        pull down refresh...
                    </Text>
                    <Image
                        source={require('./pull_arrow.png')}
                        resizeMode={Image.resizeMode.stretch}
                        style={styles.image}
                        />
                </View>
            )},

• renderHeaderWillRefresh:func

            renderHeaderWillRefresh: () => {return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Text style={styles.text}>
                        release to refresh...
                    </Text>
                    <Image
                        source={require('./pull_arrow.png')}
                        resizeMode={Image.resizeMode.stretch}
                        style={[styles.image, styles.imageRotate]}
                        />
                </View>
            )},

• renderHeaderRefreshing:func

            renderHeaderRefreshing: () => {return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Text style={styles.text}>
                        refreshing...
                    </Text>

                    <ActivityIndicatorIOS
                        size='small'
                        animating={true}/>
                </View>
            )},

• renderHeaderRefreshing:func

            renderFooterInifiteIdle: () => {return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Image
                        source={require('./pull_arrow.png')}
                        resizeMode={Image.resizeMode.stretch}
                        style={[styles.image, styles.imageRotate]}
                        />
                    <Text style={styles.text}>
                        pull up to load more...
                    </Text>
                </View>
            )},

• renderFooterWillInifite:func

            renderFooterWillInifite: () => {return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Image
                        source={require('./pull_arrow.png')}
                        resizeMode={Image.resizeMode.stretch}
                        style={styles.image}
                        />
                    <Text style={styles.text}>
                        release to load more...
                    </Text>
                </View>
            )},

• renderFooterInifiting:func

            renderFooterInifiting: () => {return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <ActivityIndicatorIOS
                        size='small'
                        animating={true}/>
                    <Text style={styles.text}>
                        loading...
                    </Text>
                </View>
            )},

• renderFooterInifiteLoadedAll:func

            renderFooterInifiteLoadedAll: () => { return (
                <View style={{height:DEFAULT_HF_HEIGHT, justifyContent:'center', alignItems:'center'}}>
                    <Text style={styles.text}>
                        have loaded all data
                    </Text>
                </View>
            )},

• onRefresh:func

            onRefresh: () => {
                console.log("onRefresh");
            },

• onInfinite':func

            onInfinite: () => {
                console.log("onInfinite");
            }

• loadedAllData':func

            loadedAllData: () => {
                return false;
            }

react-native-refresh-infinite-listview's Issues

Won't rerender row when set datasource at setState

After I get new data from network and set the new datasource, the row just rendered the old data not the new ones!

Refresh indicator not showing

When the list is not scrolled to the top, then scroll down until beyond top, the pull down to refresh indicator is not showing.

And also:

When the list is not scrolled to the bottom, then scroll up until beyond bottom, the pull up to load more indicator is not showing.

支持Android吗

支持Android吗

Android上拉或者下拉，每次都要滚到到最顶部或者最底部，然后再拖拽才ok.

Dear,

我测试在android上有一个问题，每次都要将页面滚动到最顶部或者最底部，然后再执行上拉，下拉，才能正常工作，否则没有效果，

请问，您有什么解决办法吗？ 还是我哪里没有用对？

update your proc to ES6 plz.

Not working on Android?

I tried both on iOS and Android and on Android the component shows as a listview: no pulltorefresh, no infinite scroll

Is it discontinued?

I find this component really handy, but I got some issues with it and I'd like to ask to his owner, the problem is that it seems like it is discontinued. Am I right?

不支持Android?

不支持Android?