react-native-smooth-pull-to-refresh

    

Using recompse to implement a pull to refresh component for React Native. The solution just using pure Js to support iOS and Android.

Installation

Install the package
``
$ npm install --save react-native-smooth-pull-to-refresh

or

$ yarn add react-native-smooth-pull-to-refresh
`

Demo project

https://github.com/passpier/PTRDemo

Basic usage

`typescript
import {PullToRefreshView} from "react-native-smooth-pull-to-refresh";

export class App extends Component {

public state: AppState = {
title: "Pull down to refresh",
isRefreshing: false,
};

public render() {
return (


Header

minPullDistance={70}
pullAnimHeight={70}
pullAnimYValues={{from: -50, to: 10}}
isRefreshing={this.state.isRefreshing}
onRefresh={this.onInnerRefresh}
onTriggerToRefresh={this.onTriggerToRefresh}
contentComponent={

BLOCK 1
BLOCK 2
BLOCK 3

}
>



);
}

@autobind
private onInnerRefresh() {
this.setState({title: "Loading..."});
this.startRefreshing();
}

@autobind
private onTriggerToRefresh(triggered: boolean) {
this.setState({title: triggered ? "Release to refresh" : "Pull down to refresh"});
}

private startRefreshing() {
this.setState({
isRefreshing: true,
});
setTimeout(() => {
this.setState({isRefreshing: false});
}, 1500);
}
``

Props matrix

| Props | Type | Description |
| -------- | -------- | -------- |
| isRefreshing | boolean | Refresh state set by parent to trigger refresh |
| minPullDistance | number | Sets pull distance for how far the Y axis needs to be pulled before a refresh event is triggered |
| pullAnimHeightefresh | number | Sets header height for pull animation |
| pullAnimYValues | {from: number, to: number} | Points for where the animation components will start and end at on the Y-axis |
| onRefresh | function | Callback for when the refreshing state occurs |
| contentComponent | JSX.element | The content view which should be passed in as a scrollable type |