title: How to make element fixed on scroll in React Native?
body: <p>This is a video of what I have so far <a href="https://drive.google.com/file/d/1tJMZfpe8hcqLcNMYiE-6pzwHX0eLofv1/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1tJMZfpe8hcqLcNMYiE-6pzwHX0eLofv1/view?usp=sharing</a></p>
  
  <p>I'm trying to make the "Available for 3 months" fixed once the contentOffset.y has reached the header. Similar to what a <code>position: sticky</code> in css would do.</p>
  
  <p>So far, I thought of doing this via <code>onScroll</code> prop in the Scroll View Component but the issue is, I already have animations (Animated.Event) from the parent and child component in place, meaning the only way for me to do this would be via the <code>listener</code> function in the <code>Animated.Event</code> but doing that, leads to a super choppy animation if the <code>useNativeDriver</code> option is set to false.</p>
  
  <p>If I set that to true, the whole thing won't work (it crashes). The error is along the lines "onScroll is not a function, it's an instance of Animated.event"</p>
  
  <p>So, Say we have two components, the parent is <code>Parent.js</code> and the child (a scroll view) is <code>ChildScrollView.js</code></p>
  
  <p>The <code>ChildScrollView.js</code> already has animations on the scroll view, but we need to add some more in the <code>Parent.js</code> component, to do with Navigation which the <code>ChildScrollView.js</code> can't handle</p>
  
  <p>So it's coded like this:</p>
  
  <p><code>Parent.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>componentWillMount() {
      const { navigation } = this.props
      const { scrollY } = this.state
  
      const bgColor = scrollY.interpolate({
        inputRange: [HEADER_HEIGHT / 4, HEADER_HEIGHT / 2],
        outputRange: ['transparent', 'rgb(255,255,255)'],
        extrapolate: 'clamp',
      })
  
      const titleColor = scrollY.interpolate({
        inputRange: [0, HEADER_HEIGHT / 2],
        outputRange: ['transparent', colors.paragraphs],
        extrapolate: 'clamp',
      })
  
      const titleMarginTop = scrollY.interpolate({
        inputRange: [0, HEADER_HEIGHT / 2],
        outputRange: [HEADER_HEIGHT, 0],
        extrapolate: 'clamp',
      })
  
      navigation.setParams({
        bgColor,
        titleColor,
        titleMarginTop,
      })
  }
  
  onScroll() {
  }
  
  render() {
  
    return (
      &lt;ChildScrollView
        {...childProps}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: scrollY } } },
        ], {
          useNativeDriver: false, // when I do this, it become super laggy, but setting it to true makes the app crash
          listener: this.onScroll,
        })}
      &gt;
        &lt;MakeMeFixedOnScroll&gt;I could do this in css with "position: sticky"&lt;/MakeMeFixedOnScroll&gt;
      &lt;/ChildScrollView&gt;
    )
  }
  </code></pre>
  
  <p>And the child is similar,</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Animated.ScrollView
   {...props}
   onScroll={Animated.event(
     [{ nativeEvent: { contentOffset: { y: scrollY } } }],
              {
                useNativeDriver: false,
                listener: event =&gt; {
                  if (onScroll) onScroll(event)
                },
              }
            )}
            scrollEventThrottle={16}
          &gt;
  </code></pre>