/react-native-ptr-control

custom refresh and load more component, supported ScrollView, ListView, FlatList and VirtualizedList

Primary LanguageJavaScript

react-native-ptr-control

React-native pull to refresh and pull-up load more component, supported custom refresh and load more component

Supported Scroll Component is:

  • ScrollView
  • ListView
  • FlatList
  • VirtualizedList

Supported React-Native Version is >= 0.43.0, because this lib supported FlatList

example

example is in the folder of example, the app.js is the entrance, example run in environment:

  • expo: 23
  • react-native: 0.50.0
  • react: 16.0.0

run example

Suggest: run example in real device, the performance will perfect

  • cd example

  • yarn install

  • yarn start

and then take your iphone or android device, use the Expo app scan the QRCode, and have fun

Be careful:

  • if can not load project, see the detail, sometimes it cost long time to load, and sometimes, the Expo version is incorrect
  • checkout the network, whether is your device and your computer in the same network segment

Installation

$ npm install react-native-ptr-control --save

Usage

here is a simple usage of this lib, see example folder and find app.js for full usage

Note: when use react-native-ptr-control, use it as usual, for example, if scrollComponent is 'ScrollView', pass ScrollView`s props and props of lib provide, such as:

  • ScrollView

      import React, {Component} from 'react'
      import {View, Text} from 'react-native'
      import PTRControl from 'react-native-ptr-control'
      export default class MyScrollComponent extends Component {
        render () {
          return (
            <PTRControl
              //here is the origin props of ScrollView
              style={{flex: 1}}
              showsVerticalScrollIndicator={false}
              //here is the props of lib provide
              scrollComponent={'ScrollView'}
              enableFooterInfinite={false}>
              <View>
                <Text>{'scroll content'}</Text>
              </View>
            </PTRControl>
            )
        }
      }
    
  • ListView

      import React, {Component} from 'react'
      import {View, Text} from 'react-native'
      import PTRControl from 'react-native-ptr-control'
      export default class MyScrollComponent extends Component {
        render () {
          return (
            <PTRControl
              //here is the origin props of ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
              showsVerticalScrollIndicator={false}
              //here is the props of lib provide
              scrollComponent={'ListView'}
              />
            )
        }
      }
    

Properties

Note: list of below props is extends props, the origin props of scroll component (for example: ScrollView) should also be passed

Prop Description Type Default Platform isRequired
scrollComponent mark the scroll component, can be 'ScrollView', 'ListView', 'FlatList', 'VirtualizedList' string 'FlatList' all yes
getRef get the scroll component`s ref func None all no
enableHeaderRefresh whether to enable header refresh bool true all no
setHeaderHeight if header refresh is set, this prop mark the header height, if header refresh is set, this prop should be set number 60 Android no
onTopReachedThreshold threshold to trigger refresh number 10 Android no
renderHeaderRefresh render the custom component of refresh header, and the gestureStatus and offset will be passed, see example for detail func default function all no
onHeaderRefreshing when release to refresh, this fun will be called, see example for detail func default function all no
pullFriction when scroll component is not full of children, pull to refresh is controlled by gesture, and this prop controls how fast to pull down, range: 0 ~ 1 number 0.6 Android no
enableFooterInfinite whether to enable footer load-more bool true all no
setFooterHeight if footer load-more is set, this prop mark the footer height, if footer load-more is set, this prop should be set number 60 Android no
onEndReachedThreshold threshold to trigger load-more number 10 Android no
renderFooterInfinite render the custom component of load-more, and the gestureStatus and offset will be passed, see example for detail func default function all no
onFooterInfiniting when release to load-more, this fun will be called, see example for detail func default function all no

onHeaderRefreshing and onFooterInfiniting

this props should be passed a function, and gestureStatus and offset will be the params, something like that

onHeaderRefreshing = {(gestureStatus, offset) => <HeaderRefresh gestureStatus={gestureStatus} offset={offset/>}

onFooterInfiniting = {(gestureStatus, offset) => <FooterInfinite gestureStatus={gestureStatus} offset={offset/>}

gestureStatus

  • 0: gesture none
  • 1: pull-up to load-more
  • 2: pull-down to refresh
  • 3: release to refresh or load-more
  • 4: on header refreshing
  • 5: on footer loading-more

offset

  • when pull-down to refresh or pull-up to load-more, this offset params represent the pull distance

static methods

Important: when header refresh done, or footer load-more done, should call this static method

  • headerRefreshDone PTRControl.headerRefreshDone()

    after onHeaderRefreshing, when refresh done, and the data load complete, call this method to stop refresh

  • footerInfiniteDone PTRControl.footerInfiniteDone()

    after onFooterInfiniting, when load-more done, and the data load complete, call this method to stop load-more