title: React Native - properly play Lottie on tap?
body: <p>So my app is written in a functional component ( <code>export default function App() {</code> ) and I have other functional components within. One of them includes a Lottie animation:</p>
  <pre><code>function NavDot(props)
      {
        return (
        &lt;TouchableWithoutFeedback onPress={() =&gt; onNavPress(props.id)}&gt;
          &lt;LottieView style={styles.lottieNav} source={require('./assets/circle.json')} /&gt;
        &lt;/TouchableWithoutFeedback&gt;);
      }
  </code></pre>
  <p>This calls this function on press:</p>
  <pre><code>const onNavPress = (id) =&gt; {
      console.log(`nav ${id} pressed`);
    };
  </code></pre>
  <p>Which works, but may or may not be correct. Im having trouble passing the <code>animation</code> parameter from the LottieView into an external onPress function. I need to do <code>animation.play()</code> on press, per the Lottie docs, but referencing <code>this</code> in the functional component gives me &quot;undefined&quot; errors.</p>
  <p>How can I play the Lottie animation (once, not loop) on tap like this?</p>