• Stars
    star
    198
  • Rank 196,855 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A smart pull-down-refresh and pull-up-loadmore react-native listview, for ios, written in pure JS, for android, written in JS and Java.

react-native-smart-pull-to-refresh-listview

npm npm npm npm

A smart pull-down-refresh and pull-up-loadmore react-native listview, for ios, written in pure JS, for android, written in JS and Java.

This component is compatible with React Native 0.25 and newer.

Preview

react-native-pull-to-refresh-listview-preview-ios react-native-pull-to-refresh-listview-preview-android

Advanced Features

  • Flexible pull to refresh control for ios and android,

easy to customize the 'RefreshView' style and content, bounce effect for both pull down refresh and pull up load more, if you want, you can also use the 'autoLoad' mode for pull up load more. demonstration

  • Memory management for ios and android,

if you want, the listRow can remove its children to release memory when its position is outside viewport of device, and will undo when its position is inside viewport of device. demonstration

  • Extended support sticky header for android

it also supports sticky header with pull to refresh demonstration

Installation

npm install react-native-smart-pull-to-refresh-listview --save

Installation (Android)

  • In android/settings.gradle
...
include ':react-native-smart-swipe-refresh-layout'
project(':react-native-smart-swipe-refresh-layout').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-pull-to-refresh-listview/android')
  • In android/app/build.gradle
...
dependencies {
    ...
    // From node_modules
    compile project(':react-native-smart-swipe-refresh-layout')
}
  • In MainApplication.java
...
import com.reactnativecomponent.swiperefreshlayout.RCTSwipeRefreshLayoutPackage;    //import package
...
/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RCTSwipeRefreshLayoutPackage()  //register Module
    );
}
...

  • If you're using react-native 0.30-, follow these extra steps

    • In node_modules/react-native-smart-pull-to-refresh-listview/android/src/main/java/com/reactnativecomponent/swiperefreshlayout/

      • In TouchEvent.java

        ...
        public TouchEvent(int viewTag, long timestampMs, int movement) {
            super(viewTag, timestampMs);    //for older version
            //super(viewTag);                 //for newer version
            this.movement = movement;
        }
        ...
        
      • In TouchUpEvent.java

        ...
        public TouchUpEvent(int viewTag, long timestampMs) {
            super(viewTag, timestampMs);  //for older verion
            //super(viewTag);                 //for newer version
        }
        ...
        

Full Demo

see ReactNativeComponentDemos

Usage

import React, {
    Component,
} from 'react'
import {
    View,
    Text,
    StyleSheet,
    Alert,
    ScrollView,
    ListView,
    Image,
    ActivityIndicator,
    ProgressBarAndroid,
    ActivityIndicatorIOS,
    Platform,
} from 'react-native'

import TimerEnhance from 'react-native-smart-timer-enhance'
import PullToRefreshListView from 'react-native-smart-pull-to-refresh-listview'

export default class PullToRefreshListViewDemo extends Component {

    // 构造
      constructor(props) {
        super(props);

        this._dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            //sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

      let dataList = []

        this.state = {
            first: true,
            dataList: dataList,
            dataSource: this._dataSource.cloneWithRows(dataList),
        }
    }

    componentDidMount () {
        this._pullToRefreshListView.beginRefresh()
    }

    //Using ListView
    render() {
        return (
            <PullToRefreshListView
                ref={ (component) => this._pullToRefreshListView = component }
                viewType={PullToRefreshListView.constants.viewType.listView}
                contentContainerStyle={{backgroundColor: 'yellow', }}
                style={{marginTop: Platform.OS == 'ios' ? 64 : 56, }}
                initialListSize={20}
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                pageSize={20}
                renderRow={this._renderRow}
                renderHeader={this._renderHeader}
                renderFooter={this._renderFooter}
                //renderSeparator={(sectionID, rowID) => <View style={styles.separator} />}
                onRefresh={this._onRefresh}
                onLoadMore={this._onLoadMore}
                pullUpDistance={35}
                pullUpStayDistance={50}
                pullDownDistance={35}
                pullDownStayDistance={50}
            />
        )

    }

    _renderRow = (rowData, sectionID, rowID) => {
        return (
            <View style={styles.thumbnail}>
                <View style={styles.textContainer}>
                    <Text>{rowData.text}</Text>
                </View>
            </View>
        )
    }

    _renderHeader = (viewState) => {
        let {pullState, pullDistancePercent} = viewState
        let {refresh_none, refresh_idle, will_refresh, refreshing,} = PullToRefreshListView.constants.viewState
        pullDistancePercent = Math.round(pullDistancePercent * 100)
        switch(pullState) {
            case refresh_none:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>pull down to refresh</Text>
                    </View>
                )
            case refresh_idle:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>pull down to refresh{pullDistancePercent}%</Text>
                    </View>
                )
            case will_refresh:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>release to refresh{pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
                    </View>
                )
            case refreshing:
                return (
                    <View style={{flexDirection: 'row', height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        {this._renderActivityIndicator()}<Text>refreshing</Text>
                    </View>
                )
        }
    }

    _renderFooter = (viewState) => {
        let {pullState, pullDistancePercent} = viewState
        let {load_more_none, load_more_idle, will_load_more, loading_more, loaded_all, } = PullToRefreshListView.constants.viewState
        pullDistancePercent = Math.round(pullDistancePercent * 100)
        switch(pullState) {
            case load_more_none:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>pull up to load more</Text>
                    </View>
                )
            case load_more_idle:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>pull up to load more{pullDistancePercent}%</Text>
                    </View>
                )
            case will_load_more:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>release to load more{pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
                    </View>
                )
            case loading_more:
                return (
                    <View style={{flexDirection: 'row', height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        {this._renderActivityIndicator()}<Text>loading</Text>
                    </View>
                )
            case loaded_all:
                return (
                    <View style={{height: 35, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink',}}>
                        <Text>no more</Text>
                    </View>
                )
        }
    }

    _onRefresh = () => {
        //console.log('outside _onRefresh start...')

        //simulate request data
        this.setTimeout( () => {

            //console.log('outside _onRefresh end...')
            let addNum = 20
            let refreshedDataList = []
            for(let i = 0; i < addNum; i++) {
                refreshedDataList.push({
                    text: `item-${i}`
                })
            }

            this.setState({
                dataList: refreshedDataList,
                dataSource: this._dataSource.cloneWithRows(refreshedDataList),
            })
            this._pullToRefreshListView.endRefresh()

        }, 3000)
    }

    _onLoadMore = () => {
        //console.log('outside _onLoadMore start...')

        this.setTimeout( () => {

            //console.log('outside _onLoadMore end...')

            let length = this.state.dataList.length
            let addNum = 20
            let addedDataList = []
            if(length >= 100) {
                addNum = 3
            }
            for(let i = length; i < length + addNum; i++) {
                addedDataList.push({
                    text: `item-${i}`
                })
            }
            let newDataList = this.state.dataList.concat(addedDataList)
            this.setState({
                dataList: newDataList,
                dataSource: this._dataSource.cloneWithRows(newDataList),
            })

            let loadedAll
            if(length >= 100) {
                loadedAll = true
                this._pullToRefreshListView.endLoadMore(loadedAll)
            }
            else {
                loadedAll = false
                this._pullToRefreshListView.endLoadMore(loadedAll)
            }

        }, 3000)
    }

    _renderActivityIndicator() {
        return ActivityIndicator ? (
            <ActivityIndicator
                style={{marginRight: 10,}}
                animating={true}
                color={'#ff0000'}
                size={'small'}/>
        ) : Platform.OS == 'android' ?
            (
                <ProgressBarAndroid
                    style={{marginRight: 10,}}
                    color={'#ff0000'}
                    styleAttr={'Small'}/>

            ) :  (
            <ActivityIndicatorIOS
                style={{marginRight: 10,}}
                animating={true}
                color={'#ff0000'}
                size={'small'}/>
        )
    }

}



const styles = StyleSheet.create({
    itemHeader: {
        height: 35,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ccc',
        backgroundColor: 'blue',
        overflow: 'hidden',
        justifyContent: 'center',
        alignItems: 'center',
    },
    item: {
        height: 60,
        //borderBottomWidth: StyleSheet.hairlineWidth,
        //borderBottomColor: '#ccc',
        overflow: 'hidden',
        justifyContent: 'center',
        alignItems: 'center',
    },

    contentContainer: {
        paddingTop: 20 + 44,
    },

    thumbnail: {
        padding: 6,
        flexDirection: 'row',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ccc',
        overflow: 'hidden',
    },

    textContainer: {
        padding: 20,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

export default TimerEnhance(PullToRefreshListViewDemo)

Props

Prop Type Optional Default Description
...ListView.propTypes see react-native documents
viewType enum Yes Symbol determines the viewType which will be used(ScrollView, ListView)
autoLoadMore bool Yes false when the value is true, pull up load more will be auto
onRefresh func Yes when refreshing, this function will be called
onLoadMore func Yes when loadingMore, this function will be called
onEndReachedThreshold number Yes 0 threshold in pixels (virtual, not physical) for calling onLoadMore
pullUpDistance number Yes 35 determines the pull up max distance
pullUpStayDistance number Yes 50 determines the pull up stay distance
pullDownDistance number Yes 35 determines the pull down max distance
pullDownStayDistance number Yes 50 determines the pull down stay distance
enabledPullUp bool Yes true when the value is false, pull up load more will be disabled
enabledPullDown bool Yes true when the value is false, pull down refresh will be disabled
listItemProps object Yes see react-native documents
renderRowWithVisibility bool Yes when the value is true, the children of the listRow can be controlled with 'hidden' state
pageTop number Yes 0 determines the top relative to the page of the float section header(sticky header) view
floatSectionHeaderWidth number Yes deviceWidth determines the width of the float section header(sticky header) view
renderFloatSectionHeader number Yes 0 determines the width of the float section header(sticky header) view
listSectionProps object Yes see react-native documents

Special Props

  • listItemProps: when set this prop, listView will use special 'listRow', the listRow will remove its children to release memory when its position is outside viewport of device, and will undo when its position is inside viewport of device. Usually it is used with 'react-native-smart-image-loader'

  • renderRowWithVisibility: when the value is true, the children of the listRow can be controlled with 'hidden' state. This prop is valid when 'listItemProps' is being set, and it is only valid for android. Usually it is used with 'react-native-smart-image-loader'

  • pageTop, floatSectionHeaderWidth, renderFloatSectionHeader, listSectionProps are used for android to support ios-like sticky header

Method

  • beginRefresh(bounceDisabled): force begin pull down refresh, if bounceDisabled is true, the bounce animation will be disabled
  • endRefresh(bounceDisabled): end pull down refresh, if bounceDisabled is true, the bounce animation will be disabled
  • endLoadMore: end pull up load more

More Repositories

1

react-native-smart-splash-screen

A smart splash screen for React Native apps
Java
490
star
2

react-native-smart-barcode

A smart barcode scanner component for React Native app.
Java
310
star
3

react-native-smart-amap

react-native 高德地图SDK 插件
Objective-C
176
star
4

react-native-smart-amap-location

react-native 高德地图-定位SDK 插件
Objective-C
110
star
5

react-native-smart-sortable-sudoku-grid

A smart sortable sudoku grid for React Native apps
JavaScript
107
star
6

react-native-smart-gesture-password

A smart gesture password locker for react-native apps
JavaScript
95
star
7

react-native-smart-parabola

A smart parabola for react-native apps
JavaScript
65
star
8

react-native-smart-image-loader

A smart asynchronous image downloader with cache for React Native apps
Objective-C
65
star
9

react-native-smart-badge

A smart badge for react-native apps
JavaScript
63
star
10

react-native-smart-corner-label

A smart corner label for React Native app
JavaScript
62
star
11

react-native-smart-alipay

react-native 支付宝SDK 插件
Objective-C
57
star
12

react-native-smart-loading-spinner-overlay

A smart loading spinner overlay for React Native apps.
JavaScript
53
star
13

react-native-smart-button

A smart button for react-native apps
JavaScript
46
star
14

react-native-smart-touch-id

React Native authentication with the native Touch ID popup.
Objective-C
36
star
15

react-native-smart-timer-enhance

A TimerEnhance for React Native app (es6) which replaced TimerMixin (es5) provides timer functions for executing code in the future that are safely cleaned up when the component unmounts
JavaScript
36
star
16

react-native-smart-toast

A android like toast for android and ios, written in JS.
JavaScript
31
star
17

react-native-smart-sudoku-grid

A smart sudoku grid layout for react-native apps
JavaScript
21
star
18

react-native-smart-security-text

A smart security text for React Native apps
JavaScript
15
star
19

react-native-smart-app-event-listener-enhance

An AppEventListenerEnhance for React Native app which provides addEventListener functions that are safely cleaned up when the component unmounts
JavaScript
7
star
20

react-native-smart-camera-roll-picker

A smart react native component providing images selection from camera roll
JavaScript
5
star
21

react-native-smart-refresh-listview

A high performance pull to refresh listview for React App.
JavaScript
3
star
22

react-native-smart-lazyload

1
star
23

react-native-smart-umeng

A umeng SDK for React Native App
Objective-C
1
star
24

react-native-native-Listview

JavaScript
1
star