title: React Native Scrollview: scroll to top on button click
body: <p>So I have a component with <code>ScrollView</code> which contains many elements, so you have to scroll a long way down. </p>
  
  <p>Now there should be a button at the bottom of the page that on click will scroll the page back to top.</p>
  
  <p>I already created the button as a FAB (floating action button) in an extra component. </p>
  
  <p>It is integrated in a parent component, where the <code>ScrollView</code> is located.</p>
  
  <p>What I found was that you have to create a <code>ref</code> in the <code>ScrollView</code> component and implement a button right there that uses this <code>ref</code> to make scrolling work. Simplified, here is what I have so far:</p>
  
  <pre><code>imports ...
  const ParentComponent: React.FC&lt;Props&gt; = () =&gt; {
  
    const scroll = React.createRef();
  
    return (
      &lt;View&gt;
        &lt;ScrollView ref={scroll}&gt;
          &lt;SearchResult&gt;&lt;/SearchResult&gt; // creates a very long list 
          &lt;FloatingButton
            onPress={() =&gt; scroll.current.scrollTo(0)}&gt;&lt;/FloatingButton&gt;
        &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
  };
  
  export default ParentComponent;
  </code></pre>
  
  <p>As you can see, there is the component <code>FloatingButton</code> with the <code>onPress()</code> method. </p>
  
  <p>Here is the implementation:</p>
  
  <pre><code>import React, {useState} from 'react';
  import {Container, Content, Button, Icon, Fab} from 'native-base';
  
  const FloatingButton: React.FC&lt;Props&gt; = () =&gt; {
  
    return (
      &lt;Fab
        position="bottomRight"
        onPress={(???}&gt;
        &lt;Icon name="arrow-round-up" /&gt;
      &lt;/Fab&gt;
    );
  };
  
  export default FloatingButton;
  </code></pre>
  
  <p>Now the problem: Where should I do the <code>onPress()</code> method? Because if I leave it in the parent component, it won't work because it is not directly located in the <code>Fab</code> (in <code>FloatingButton</code>). I would like to do the <code>onPress()</code> logic in <code>Fab</code>, but if I do so, the <code>ScrollView</code> that it needs is not available, because it's in the parent component. My idea was to maybe passing the <code>ref</code> as <code>prop</code> into <code>FloatingButton</code>, but for some reason this didn't work. </p>
  
  <p>Can someone please help me?</p>