Closed nvuhung closed 3 years ago
@nvuhung I've implemented pull to refresh on the header in my own project. However, it would be kind of tricky, and we need to implement it in different ways on Android and iOS.
The idea is to render an ActivityIndicator
that listen to the vertical scroll value of header.
I set headerScrollDownY
in onPanResponderMove
to move down ActivityIndicator
.
renderCustomRefreshing = () => {
if (Platform.OS === 'android') {
const y = this.state.headerScrollDownY.interpolate({
inputRange: [-300, 0],
outputRange: [150, 0],
extrapolate: 'clamp',
});
return (
<Animated.View
style={{
transform: [{ translateY: y }],
backgroundColor: '#eee',
height: 38,
width: 38,
borderRadius: 19,
borderWidth: 2,
borderColor: '#ddd',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
top: -50,
position: 'absolute',
}}
>
<ActivityIndicator animating color="black" />
</Animated.View>
);
} else {
return null;
}
};
Then, do refresh while reaching a limit.
Also animating ActivityIndicator
to the original position in onPanResponderRelease
.
if (Platform.OS === 'android') {
if (headerScrollDownY._value > -250) {
Animated.spring(headerScrollDownY, {
toValue: 0,
}).start();
} else {
if (!refreshing) {
Animated.timing(headerScrollDownY, {
toValue: -150,
duration: 300,
}).start(() => this.onRefresh(false));
}
}
}
Thanks JungHsuan for your response. I have changed the design so I don't need to use the tab collapsible. So I will close this PR
Thanks for your solution but I cannot pull to refresh when scroll down the list inside tab.
Do you have any to solution for this?