title: (0, _reactNativeRedash.onScroll) is not a function
body: <p>I've tried to integrate this <a href="https://snack.expo.io/@salman15/github.com-wcandillon-can-it-be-done-in-react-native:season2-spotify-header" rel="nofollow noreferrer">example</a> into my code base (without TSX), but when trying <code>onScroll={onScroll({ y })}</code>. I get the following error <code>(0, _reactNativeRedash.onScroll) is not a function</code>.</p>
  
  <p>I'm not sure what the cause of the problem is since I've followed the example to the letter (only changing it to regular JS)</p>
  
  <p>Whenever I comment out the <code>onScroll={onScroll({ y })}</code> with <code>console.log("y", y);</code> and try to log the <code>y</code> value in the <code>ListBody</code> component I get an memory leak (memory used keeps climbing).</p>
  
  <p>Still not sure why the memory leak happens or what I'm doing wrong to cause the bug.</p>
  
  <p><strong>The problem:</strong> I get the following error <code>(0, _reactNativeRedash.onScroll) is not a function</code> whenever component loads (<a href="https://snack.expo.io/@salman15/restless-chocolates" rel="nofollow noreferrer">Snack</a>)</p>
  
  <p><strong>What I've tried:</strong> Removed all inner content of the scrollView, different ways of passing on the props like <code>y={y}</code> or <code>animV={y}</code>, finding the solution online.</p>
  
  <p><strong>What I expect:</strong> <code>y</code> Value to change with the scroll</p>
  
  <pre><code> &lt;Container&gt;
        {/* &lt;ListHeader {...{ y, album }} /&gt; */}
        &lt;ListBody {...{ y, album }} /&gt;
      &lt;/Container&gt;
  </code></pre>
  
  <p><strong>Here is where I create the list and the animated value</strong></p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  import Animated from "react-native-reanimated";
  import ListHeader from "./ListHeader";
  import ListBody from "./ListBody";
  
  const { Value } = Animated;
  
  export default (TransitionList = ({ album }) =&gt; {
    const y = new Value(0);
  
    return (
      &lt;Container&gt;
        &lt;ListHeader {...{ y, album }} /&gt;
        &lt;ListBody {...{ y, album }} /&gt;
      &lt;/Container&gt;
    );
  });
  
  const Container = styled.View`
    flex: 1;
    background-color: white;
  `;
  </code></pre>
  
  <p><strong>Header</strong></p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  import Animated from "react-native-reanimated";
  import { Image, StyleSheet } from "react-native";
  
  import { MAX_HEADER_HEIGHT, HEADER_DELTA, BUTTON_HEIGHT } from "../../helpers";
  
  const { interpolate, Extrapolate } = Animated;
  
  export default (ListHeader = ({ album: { cover }, y }) =&gt; {
    const scale = interpolate(y, {
      inputRange: [-MAX_HEADER_HEIGHT, 0],
      outputRange: [4, 1],
      extrapolateRight: Extrapolate.CLAMP,
    });
    const opacity = interpolate(y, {
      inputRange: [-64, 0, HEADER_DELTA],
      outputRange: [0, 0.2, 1],
      extrapolate: Extrapolate.CLAMP,
    });
  
    return (
      &lt;Animated.View style={[styles.container, { transform: [{ scale }] }]}&gt;
        &lt;Image style={styles.image} source={cover} /&gt;
        &lt;Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
            backgroundColor: "black",
            opacity,
          }}
        /&gt;
      &lt;/Animated.View&gt;
    );
  });
  
  const BodyText = styled.Text``;
  
  const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      height: MAX_HEADER_HEIGHT + BUTTON_HEIGHT * 2,
    },
    image: {
      ...StyleSheet.absoluteFillObject,
      width: undefined,
      height: undefined,
    },
  });
  
  </code></pre>
  
  <p><strong>Body (this is where the onscroll error happens)</strong></p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  import { StyleSheet, View } from "react-native";
  import { onScroll } from "react-native-redash";
  import { LinearGradient } from "expo-linear-gradient";
  import Animated from "react-native-reanimated";
  import ListTitle from "./ListTitle";
  import ListItem from "./ListItem";
  import {
    MAX_HEADER_HEIGHT,
    MIN_HEADER_HEIGHT,
    BUTTON_HEIGHT,
  } from "../../helpers";
  
  const { interpolate, Extrapolate } = Animated;
  
  export default (ListBody = ({ album: { artist, tracks }, y }) =&gt; {
    const height = interpolate(y, {
      inputRange: [-MAX_HEADER_HEIGHT, -BUTTON_HEIGHT / 2],
      outputRange: [0, MAX_HEADER_HEIGHT + BUTTON_HEIGHT],
      extrapolate: Extrapolate.CLAMP,
    });
    const opacity = interpolate(y, {
      inputRange: [-MAX_HEADER_HEIGHT / 2, 0, MAX_HEADER_HEIGHT / 2],
      outputRange: [0, 1, 0],
      extrapolate: Extrapolate.CLAMP,
    });
    return (
      &lt;Animated.ScrollView
        onScroll={onScroll({ y })}
        style={styles.container}
        showsVerticalScrollIndicator={false}
        scrollEventThrottle={1}
        stickyHeaderIndices={[1]}
      &gt;
        &lt;View style={styles.cover}&gt;
          &lt;Animated.View style={[styles.gradient, { height }]}&gt;
            &lt;LinearGradient
              style={StyleSheet.absoluteFill}
              start={[0, 0.3]}
              end={[0, 1]}
              colors={["transparent", "rgba(0, 0, 0, 0.2)", "black"]}
            /&gt;
          &lt;/Animated.View&gt;
          &lt;View style={styles.artistContainer}&gt;
            &lt;Animated.Text style={[styles.artist, { opacity }]}&gt;
              {artist}
            &lt;/Animated.Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.header}&gt;
          &lt;ListTitle {...{ y, artist }} /&gt;
        &lt;/View&gt;
        &lt;View style={styles.tracks}&gt;
          {tracks.map((track, key) =&gt;
            &lt;ListItem index={key + 1} {...{ track, key, artist }} /&gt;
          )}
        &lt;/View&gt;
      &lt;/Animated.ScrollView&gt;
    );
  });
  
  const BodyText = styled.Text``;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: MIN_HEADER_HEIGHT - BUTTON_HEIGHT / 2,
    },
    cover: {
      height: MAX_HEADER_HEIGHT - BUTTON_HEIGHT,
    },
    gradient: {
      position: "absolute",
      left: 0,
      bottom: 0,
      right: 0,
      alignItems: "center",
    },
    artistContainer: {
      ...StyleSheet.absoluteFillObject,
      justifyContent: "center",
      alignItems: "center",
    },
    artist: {
      textAlign: "center",
      color: "white",
      fontSize: 48,
      fontWeight: "bold",
    },
    header: {
      marginTop: -BUTTON_HEIGHT,
    },
    tracks: {
      paddingTop: 32,
      backgroundColor: "black",
    },
  });
  
  </code></pre>