title: How to use the useRef hook for setNativeProps in React Native?
body: <p>I'm trying to convert the class component of React Native to a functional component that involves <code>useRef</code>.  Following is the class component: </p>
  
  <pre><code>import React, { Component } from "react";
  import { AppRegistry, StyleSheet, Text, View, Animated, TouchableWithoutFeedback } from "react-native";
  
  import { interpolateNumber, interpolateRgb } from "d3-interpolate";
  
  export default class animations extends Component {
    state = {
      animation: new Animated.Value(0)
    };
  
    componentWillMount() {
      const positionInterpolate = interpolateNumber(0, 200);
      const colorInterpolate = interpolateRgb("rgb(255,99,71)", "rgb(99,71,255)");;
  
      this.state.animation.addListener(({value}) =&gt; {
        const position = positionInterpolate(value);
        const color = colorInterpolate(value);
  
        const style = [
          styles.box,
          {
            backgroundColor: color,
            transform: [
              {translateY: position}
            ]
          }
        ];
        this._view.setNativeProps({ style });
      });
    }
  
    handlePress = () =&gt; {
      Animated.timing(this.state.animation, {
        toValue: 1,
        duration: 500,
      }).start();
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;TouchableWithoutFeedback onPress={this.handlePress}&gt;
            &lt;View style={styles.box} ref={view =&gt; this._view = view} /&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/View&gt;
      );
  
    }
  }
  </code></pre>
  
  <p>When I convert to the following functional component, I get the following error: </p>
  
  <blockquote>
    <p>TypeError that someRef.setNativeProps is not a function. (In
    'someRef.setNativeProps({   style: style })', 'someRef.setNativeProps'
    is undefined)</p>
  </blockquote>
  
  <pre><code>import 
      React, 
      { 
          useState, 
          useEffect,
          useRef
      } from 'react'
  import {
      View,
      Animated,
      TouchableWithoutFeedback,
      StyleSheet
  } from 'react-native'
  import {
      interpolateNumber,
      interpolateRgb, 
  } from 'd3-interpolate'
  
  export default d3number = () =&gt; {
      const [animation] = useState(new Animated.Value(1))
      const [position, setPosition] = useState()
      const someRef = useRef(null)
      const startAnimation = () =&gt; {
          Animated.timing(animation, {
              toValue: 2,
              duration: 1500,
          }).start()
      }
  
      const positionInterpolate = interpolateNumber(0, 300)
      useEffect(() =&gt; {
          animation.addListener(({value}) =&gt; {
              const pos = positionInterpolate(value)
              setPosition(pos)
          })
          const style = [
              styles.box, 
              {
                  transform: [
                      {
                          translateY: position
                      }
                  ]
              }
          ]
          someRef.setNativeProps({ style })
          // console.log(someRef.setNativeProps)
      }, [])
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;TouchableWithoutFeedback onPress={startAnimation}&gt;
                  &lt;View 
                      style={styles.box}
                      ref={someRef}
                  /&gt;
              &lt;/TouchableWithoutFeedback&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>
  
  <p>Update: this was resolved by including the style within the listener</p>
  
  <pre><code>        if (!someRef.current) {
              return;
          }
          animation.addListener(({value}) =&gt; {
              const style = [
                  styles.box, 
                  {
                      transform: [
                          {
                              translateY: positionInterpolate(value)
                          }
                      ]
                  }
              ]
              someRef.current.setNativeProps({ style })            
          })
  
          // console.log(someRef.setNativeProps)
      }, [someRef.current])
  </code></pre>