React-native-simple-ptr NPM

react-native-simple-ptr

A simple pull to refresh component for React Native, adapted from react-native-animated-ptr.

npm.io npm.io

Why?

Because I wanted more control over the look and feel of the animation than I could get from the native RefreshControl, but less complex animations than react-native-animated-ptr.

This component allows you to specify a custom spinner image, down arrow, colours and sizes. If you need anything more custom than that, try the original react-native-animated-ptr.

Installation

npm i react-native-simple-ptr --save

Basic usage

If you use the default images and styles, the only props required are the isRefreshing variable and the onRefresh function.

import React from 'react';
import { ScrollView, Text } from 'react-native';

import PullToRefresh from 'react-native-simple-ptr';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isRefreshing: false
    };
  }

  onRefresh() {
    this.setState({
      isRefreshing: true,
    });

    setTimeout(() => {
      this.setState({isRefreshing: false});
    }, 2000);
  }

  render() {
    return (
      <PullToRefresh isRefreshing={this.state.isRefreshing} onRefresh={this.onRefresh.bind(this)}>
        <ScrollView>
          <Text>Content</Text>
        </ScrollView>
      </PullToRefresh>
    );
  }
}

The images and styles can be changed using the options below. An implementation of all the options can be found in the example.