title: Trying to find the direction of the scroll
body: <p>How to know what direction is the user scrolling the <code>ScrollView</code>. I want to show an action button based on the direction. I'm trying to find the direction with the following code:</p>
  
  <pre><code>import React, {Component} from 'react'
  
  import { StyleSheet, Alert, ScrollView, View, Text } from 'react-native' 
  
  class ScrollDirection extends Component {
    constructor(props){
      super(props);
      this.state = {
        offset: 0
      }
    }
  
    onScroll(event){
      var currentOffset = event.nativeEvent.contentOffset.y;
      var direction = currentOffset &gt; this.offset ? 'down' : 'up';
      this.state.offset = currentOffset;
      Alert.alert(direction);
    }
  
  
    render() {
      return (
        &lt;View style={styles.container}&gt;        
          &lt;ScrollView onScroll={this.onScroll}&gt;
            &lt;View style={styles.scroller}&gt;
             &lt;Text style={{fontSize:20,}}&gt;ScrollDirection&lt;/Text&gt;
            &lt;/View&gt; 
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      )
    }
  
  }
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 50,
    },
    scroller: {
      height: 5000,
    },
  });
  
  export default ScrollDirection;
  </code></pre>
  
  <p>So on Scroll Up I want to alert Up and on Scroll Down alert Down. But I'm getting the following error: </p>
  
  <p><a href="https://i.stack.imgur.com/WToLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WToLt.png" alt="enter image description here"></a> </p>
  
  <p>What am I doing wrong? Or is there any better way to do it?</p>
  
  <p>Many thanks!</p>
  
  <p><strong>Update 1:</strong> </p>
  
  <p>Changed the state.offset to object, binded <code>onScroll</code> and changed the onScroll function to setState: </p>
  
  <pre><code>constructor(props){
    super(props);
    this.state = {
      offset: {}
    }
    this.onScroll = this.onScroll.bind(this)
  }
  
  onScroll(event){
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset &gt; this.state.offset ? 'down' : 'up';
    this.setState({
          offset : currentOffset.y
        }),
    Alert.alert(direction);
  }
  </code></pre>
  
  <p>But no matter which direction I scroll, I'm getting the Alert as <code>up</code>. What am I missing?</p>