2

In javascript in web I would do something like this to determine if user is at the top of the scrollable page/document:

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     //do stuff
   }
});

Is there something similar in React Native that could help me to determine if user is at the top of the screen or not?

Mindaugas
  • 1,173
  • 5
  • 15
  • 31

2 Answers2

3

Using a ScrollView you can do something like this:

_handleScroll(event) {
    if(event.nativeEvent.contentOffset.y <= 0) {
        console.log('top!');
    }
}
render() {
    return (
        <View style={styles.container}>
            <ScrollView 
                onScroll={this._handleScroll}     
                onScrollAnimationEnd={this._handleScroll} 
                style={{flex: 1}}>
                    <View style={[styles.child, {backgroundColor: 'red'}]} />
                    <View style={[styles.child, {backgroundColor: 'orange'}]} />
                    <View style={[styles.child, {backgroundColor: 'green'}]} />
            </ScrollView>
        </View>
    );
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    child: {
        flex: 1,
        height: 400,
    }
});

Hope it helps!

David
  • 7,395
  • 5
  • 29
  • 45
1

Yes ScrollView component has onScroll method. pageX and pageY properties evt nativeEvent contentOffset x y 

handleScroll(event) {
 console.log(event.nativeEvent.contentOffset.y)
},

<ScrollView onScroll={this.handleScroll}/>
stereodenis
  • 3,618
  • 2
  • 22
  • 27