CODEWITHSUNDEEP
reactjsscrollviewreact-nativepull-to-refresh
Sivakumar A
Sivakumar A

Reputation: 701

How do I shorten the pull to refresh distance (threshold) in React Native Refresh Control

I am trying to implement pull to refresh using Refresh Control in ScrollView. I need to modify the pulling distance/threshold of refresh control. I have checked for the related props to achieve it, but I can't any props related to this.

<ScrollView
          contentContainerStyle={styles.subContainer}
          bounces={true}
          horizontal={false}
          refreshControl={
            <RefreshControl
              refreshing={false}
              tintColor={'transparent'}
              onRefresh={() => {
                onSwipeDown();
              }}
            />
          }
        >
          {props.children}
</ScrollView>

Please help me guys.

Upvotes: 2

Views: 2552

Answers (1)

Sivakumar A
Sivakumar A

Reputation: 701

We can achieve this by onScroll event listener.

  <ScrollView
    contentContainerStyle={styles.subContainer}
    bounces={true}
    horizontal={false}
    onScroll={onSwipeDown}
  >
   {props.children}
  </ScrollView>

onSwipeDown method

 const onSwipeDown = event => {
    console.log(event.nativeEvent.contentOffset.y);
    if (event.nativeEvent.contentOffset.y < 0) { // you can replace zero with needed threshold
      onRefresh(); //your refresh function
    }
  };

Upvotes: 1

Related Questions