Why use this?

So instead, I wrote this component which uses the React Native Animated API. Included are a few core/basic animation types to get started with, yet allows for a multitude of different creations (see implementation of yelp's custom), so you don't need to learn the animated api to get started! The library is extremely easy to expand upon to add for more complex animations that aren't available currently.

I wrote this with the React Native approach of 'Learn once, write everywhere'. Pure JS, so you don't need to know anything else. This supports both iOS and Android without any additional packages other than React/React Native, and works with ListView or ScrollView as it's content view.

##Installation
``
npm i react-native-animated-ptr --save
`

##Usage
`
import 'AnimatedPTR' from 'react-native-animated-ptr';
`
##In Depth Docs
Visit https://evetstech.github.io/react-native-animated-ptr/

##Examples
Here is an example of Yelp's Pull to refresh (the best one in my opinion) written using only the component.

Try this demo out with Exponent: https://getexponent.com/@community/animated-ptr-example

Code behind this. It's a little lengthy, due to the amount of detail in the animation (same code for Android and iOS!):


`
import React, { Component } from 'react'
import {
AppRegistry,
View,
Text,
ListView,
Image,
StyleSheet,
} from 'react-native'
import PullToRefresh from 'react-native-animated-ptr';

class YelpCustomPull extends Component {

constructor(props) {
super(props);
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: this.insertRowData(),
isRefreshing: false,
}
}

onRefresh() {
this.setState({isRefreshing: true});
setTimeout(() => {
this.setState({isRefreshing: false});
}, 5000);
}

insertRowData() {
let numRows = 10;
var rows = Array.apply(0, new Array(numRows)).map((x,i) => ListView Item ${i});
return this.ds.cloneWithRows(rows);
}
render() {
return (


Header or Nav. of some sort

isRefreshing= {this.state.isRefreshing}
onRefresh= {this.onRefresh.bind(this)}
PTRbackgroundColor= {'#ebebe6'}
contentBackgroundColor = {'#ebebe6'}
contentComponent= {
dataSource={this.state.dataSource}
renderRow={(rowData) => {rowData}}
/>
}
>
componentType={'Image'}
imageSrc={require('./images/launchpad_bg.png')}
styleProps={{height: 80, resizeMode: 'contain'}}
occurrence={'BEFORE_REFRESH'}
direction={'MOVE_DOWN'}
xValues={{from:113}}
yValues={{from:0, to:20}}
shouldHideDuringRefresh={{toXValue:113, toYValue: 120}}
/>
componentType={'View'}
xValues={{from:50}}
yValues={{from:120, to:20}}
styleProps={styles.circle}
occurrence={'BEFORE_REFRESH'}
direction={'MOVE_UP'}
/>
componentType={'View'}
xValues={{from:0}}
yValues={{from:10, to:90}}
styleProps={{width:480,height: 200,backgroundColor: '#cccdc8'}}
occurrence={'BEFORE_REFRESH'}
direction={'MOVE_DOWN'}
shouldHideDuringRefresh={{toXValue:0, toYValue: 120}}
>
componentType={'View'}
styleProps={styles.circle2}
occurrence={'BEFORE_REFRESH'}
fadeType={'FADE_IN'}
maxOpacity={.1}
minOpacity={0}
/>

componentType={'Image'}
imageSrc={require('./images/cloud2.png')}
styleProps={{height: 20, width: 100,resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:80}}
yValues={{from:-60, to:120}}
duration={1300}
shouldRepeat={true}
/>
componentType={'Image'}
imageSrc={require('./images/cloud2.png')}
styleProps={{height: 20, width: 100,resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:30}}
yValues={{from:-20, to:120}}
duration={1500}
shouldRepeat={true}
/>
componentType={'Image'}
imageSrc={require('./images/cloud2.png')}
styleProps={{height: 20, width: 100,resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:190}}
yValues={{from:-20, to:120}}
duration={800}
shouldRepeat={true}
/>
componentType={'Image'}
imageSrc={require('./images/cloud2.png')}
styleProps={{height: 20, width: 100,resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:140}}
yValues={{from:-20, to:120}}
duration={1400}
shouldRepeat={true}
/>
componentType={'Image'}
imageSrc={require('./images/cloud2.png')}
styleProps={{height: 20, width: 100,resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:250}}
yValues={{from:-20, to:120}}
duration={1400}
shouldRepeat={true}
/>
componentType={'Image'}
imageSrc={require('./images/flame.png')}
direction={'MOVE_DOWN'}
styleProps={{height: 15, resizeMode: 'contain'}}
occurrence={'DURING_REFRESH'}
xValues={{from:182}}
yValues={{from:94, to:94}}
shouldRotate= {{direction: 'CLOCKWISE', rotationType: 'ROTATE_CONTINUOUSLY', endRotationDeg:'12deg', rotationTiming: 100, shouldRotateBack: true}}
/>
componentType={'Image'}
xValues={{from:180}}
yValues={{from:60, to:120}}
duration={300}
styleProps={{height:40, width: 40, opacity: .7}}
occurrence={'DURING_REFRESH'}
direction={'MOVE_DOWN'}
imageSrc={require('./images/smoke.png')}
/>
componentType={'Image'}
imageSrc={require('./images/ship_bg.png')}
direction={'MOVE_DOWN'}
styleProps={{height: 80, resizeMode: 'contain'}}
occurrence={'BEFORE_REFRESH'}
xValues={{from:140}}
yValues={{from:-120, to:20}}
/>
componentType={'Image'}
imageSrc={require('./images/chipmunk.png')}
direction={'MOVE_DOWN'}
styleProps={{height: 30, resizeMode: 'contain'}}
occurrence={'BEFORE_REFRESH'}
xValues={{from:178}}
yValues={{from:0, to:55}}
/>
componentType={'Image'}
imageSrc={require('./images/ship.png')}
direction={'MOVE_DOWN'}
styleProps={{height: 80, resizeMode: 'contain'}}
occurrence={'BEFORE_REFRESH'}
xValues={{from:140}}
yValues={{from:-120, to:20}}
/>
componentType={'Image'}
xValues={{from:30, to: 30}}
yValues={{from:120, to:100}}
styleProps={{height: 25, resizeMode: 'contain'}}
occurrence={'BEFORE_REFRESH'}
direction={'MOVE_UP'}
shouldTriggerAt={121}
removeAfterRefresh={true}
imageSrc={require('./images/release.png')}
/>


)
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1
},
row: {
padding: 10,
height: 125,
backgroundColor: '#dccdc8',
borderTopWidth: 1,
marginBottom:-1,
borderBottomColor: '#E5EDF5',
borderTopColor: '#E5EDF5',
borderBottomWidth: 1,
},
text: {
textAlign: 'center',
color: 'black'
},
circle: {
width: 30,
height: 30,
borderRadius: 100/2,
backgroundColor: 'white',
opacity: .7
},
circle2: {
width: 45,
height: 25,
left: 175,
borderRadius: 50,
backgroundColor: 'black',
transform: [
{scaleX: 2}
]
}
});
AppRegistry.registerComponent('YelpCustomPull', () => YelpCustomPull)
``