JungHsuan / react-native-collapsible-tabview

This is only an implementation of tabview with collapsible header.
MIT License
276 stars 61 forks source link

Cannot pull to refresh #13

Closed nvuhung closed 3 years ago

nvuhung commented 3 years ago

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?

JungHsuan commented 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));
            }
          }
        }
nvuhung commented 3 years ago

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