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

woowalker/react-native-ptr-control