React native scrollview disable pull to refresh

Question

I'm using the scrollview of react native v0.44.2 and I wanted to disable the pull to refresh and only generate the scroll of my views, is there another way to do it without being with scrollview?
I saw some old version, I do not know if I put this animation recently. So my code is as follows:

render() {
    return (
      <View>
        <ScrollView>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
        </ScrollView>

      </View>
    );
  }
}

and my styles:

const styles = StyleSheet.create({

  box: {
    backgroundColor: 'blue',
    height: 300,
    width: 200,
    borderWidth: 5,
    borderColor: 'red'
  }
});

i think if you just using scrollview, default props is not using pull to refresh, i have try your code and pull to refresh has disabled — Rizal Sidik, Jul 31 '17 at 10:22
you can find the answer in this [link](https://stackoverflow.com/a/34440979/2231218) — mohammad shobeiri, Nov 20 '18 at 07:17

score 17 · Answer 1 · edited Oct 26 '21 at 19:27

17

I've faced the same issue and solved it by setting bounces property to false:

<ScrollView bounces={false} style={{ flex: 1 }}>
...
</ScrollView>

docs: ScrollView bounces

edited Oct 26 '21 at 19:27

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Sep 12 '18 at 06:26

Maybelle Pacate

481
7
5

1

Bounces is iOS only – Frexuz Jul 28 '22 at 09:39

score 2 · Answer 2 · answered Aug 18 '17 at 13:30

use a const refreshing = false , initially. Then on call of _onRefresh , change refreshing from false to true, and reinitialise the content of the scollview.

const refreshing = false ;
const data= [];

//your class definition
_onRefresh(){
        refreshing=true;
        this.props.clearYourData();
        data= [];
        refreshing=false;
    }

render(){
  return (
    <ScrollView refreshControl={
      <RefreshControl
        refreshing={refreshing}
        onRefresh={this._onRefresh.bind(this)}
        title="Loading..."
        />
       }
      />  >
     {data}
  </ScrollView>)
}

score -1 · Answer 3 · answered Jul 31 '17 at 09:25

-1

Here what we can do is that we can Dissable the pull animation on Pull by using this .

<ScrollView
refreshing={false}
>
**YOUR RENDER ITEM**
</ScrollView>

I have never implemented this on scrollview but may be it can help you

answered Jul 31 '17 at 09:25

HpDev

2,789
1
15
20

React native scrollview disable pull to refresh

3 Answers3

Linked