title: How to use a Pan responder to scroll a scrollView (React)
body: <p>I have a pan responder overlaying the whole screen and a scrollview underneath it.</p>
  <p>I would like to call the scrollTo() method and using Pan responders X/Y travel positions to scroll.</p>
  <p>I am using this Pan Responder example code to create a Y value that can increment or decrement as you swipe up or down on the screen.
  <a href="https://reactnative.dev/docs/panresponder" rel="nofollow noreferrer">https://reactnative.dev/docs/panresponder</a></p>
  <p>I don't know how to get myScroll view to listen to this Y value change.
  Any help is appreciated. thanks</p>
  <pre><code>// You should be able to run this by copying &amp; pasting
  import { createRef, useRef } from &quot;react&quot;;
  import { Animated, PanResponder, StyleSheet, Text, View } from &quot;react-native&quot;;
  // some refs...
  const scrollRef = createRef();
  const buttonRef = createRef();
  
  // panResponder Hook
  const useScreenPanResponder = () =&gt; {
    const pan = useRef(new Animated.ValueXY()).current;
    const panResponder = useRef(
      PanResponder.create({
        onMoveShouldSetPanResponder: () =&gt; true,
        onPanResponderGrant: () =&gt; {
          pan.setOffset({
            y: pan.y._value,
          });
        },
        onPanResponderMove: Animated.event([null, { dy: pan.y }]),
        onPanResponderRelease: () =&gt; {
          pan.flattenOffset();
        },
      })
    ).current;
  
    return { pan, panResponder };
  };
  // custom button
  const ButtonWrapper = ({ children }) =&gt; {
    return (
      &lt;View
        onTouchStart={() =&gt; {
          buttonRef.current = Date.now();
        }}
        onTouchEnd={() =&gt; {
          if (Date.now() - buttonRef.current &lt; 500) {
            console.log(&quot;Actual Press&quot;);
          } else {
            console.log(&quot;Not a Press&quot;);
          }
        }}
      &gt;
        {children}
      &lt;/View&gt;
    );
  };
  // long list of text
  const Content = () =&gt; {
    const data = Array.from(Array(100));
    return (
      &lt;View style={{ backgroundColor: &quot;orange&quot;, flexDirection: &quot;column&quot; }}&gt;
        {data.map((i) =&gt; (
          &lt;Text style={{ fontSize: 17, color: &quot;black&quot; }}&gt;Some Content&lt;/Text&gt;
        ))}
      &lt;/View&gt;
    );
  };
  
  export default function App() {
    const { pan, panResponder } = useScreenPanResponder();
  
    console.log(&quot;pan!&quot;, pan);
    console.log(&quot;scrollRef&quot;, scrollRef);
  
    const scrollToPosition = () =&gt; {
      // scrollRef.current.scrollTo({ y: pan.y });
    };
  
    return (
      &lt;View style={styles.container}&gt;
        {/* Container taking up the whole screen, lets us swipe to change pan responder y pos */}
        &lt;Animated.View
          style={{
            position: &quot;absolute&quot;,
            width: &quot;100%&quot;,
            height: &quot;100%&quot;,
            backgroundColor: &quot;rgba(0,255,0,.5)&quot;,
          }}
          {...panResponder.panHandlers}
        /&gt;
        {/* A animated container that reacts to pan Responder Y pos */}
        &lt;Animated.View
          style={{
            transform: [{ translateY: pan.y }],
          }}
        &gt;
          &lt;ButtonWrapper&gt;
            &lt;View style={styles.box} {...panResponder.panHandlers} /&gt;
          &lt;/ButtonWrapper&gt;
        &lt;/Animated.View&gt;
        {/* Here we need the scrollView to be controlled by the Pan Y pos */}
        &lt;Animated.ScrollView ref={scrollRef}&gt;
          &lt;Content /&gt;
        &lt;/Animated.ScrollView&gt;
      &lt;/View&gt;
    );
  }
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;center&quot;,
    },
    titleText: {
      fontSize: 14,
      lineHeight: 24,
      fontWeight: &quot;bold&quot;,
    },
    box: {
      height: 150,
      width: 150,
      backgroundColor: &quot;blue&quot;,
      borderRadius: 5,
    },
  });
  
   
  
  
  
  </code></pre>