A React Native Pull-To-Refresh component that creates animated transitions.
Currently there is RefreshControl you could natively use from the RN library, but what it lacks is allowing you to create a personalized pull-to-refresh look. To use the native library component, you would have to add in features into the native iOS/Android RefreshControl bridges.
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 (
<View style={{flex:1}}>
<View style={{height: 64, backgroundColor: 'red'}}>
<Text style={{top: 35, fontWeight: 'bold', fontSize: 18,color: 'white', textAlign: 'center'}}>Header or Nav. of some sort</Text>
</View>
<PullToRefresh
isRefreshing= {this.state.isRefreshing}
onRefresh= {this.onRefresh.bind(this)}
PTRbackgroundColor= {'#ebebe6'}
contentBackgroundColor = {'#ebebe6'}
contentComponent= {
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <View style={styles.row}><Text style={styles.text}>{rowData}</Text></View>}
/>
}
>
<PullToRefresh.ScrollAnimation
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}}
/>
<PullToRefresh.ScrollAnimation
componentType={'View'}
xValues={{from:50}}
yValues={{from:120, to:20}}
styleProps={styles.circle}
occurrence={'BEFORE_REFRESH'}
direction={'MOVE_UP'}
/>
<PullToRefresh.ScrollAnimation
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}}
>
<PullToRefresh.FadeAnimation
componentType={'View'}
styleProps={styles.circle2}
occurrence={'BEFORE_REFRESH'}
fadeType={'FADE_IN'}
maxOpacity={.1}
minOpacity={0}
/>
</PullToRefresh.ScrollAnimation>
<PullToRefresh.TimedAnimation
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}
/>
<PullToRefresh.TimedAnimation
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}
/>
<PullToRefresh.TimedAnimation
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}
/>
<PullToRefresh.TimedAnimation
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}
/>
<PullToRefresh.TimedAnimation
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}
/>
<PullToRefresh.ScrollAnimation
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}}
/>
<PullToRefresh.TimedAnimation
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')}
/>
<PullToRefresh.ScrollAnimation
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}}
/>
<PullToRefresh.ScrollAnimation
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}}
/>
<PullToRefresh.ScrollAnimation
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}}
/>
<PullToRefresh.ScrollAnimation
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')}
/>
</PullToRefresh>
</View>
)
}
}
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)