title: How to interplote in react native functional component
body: <p>I am trying to add animation to my react native app .App is simple but it has some animation. on of the animation is when user tap on screen a dock appears from bottom of the screen showing some icons. I found some tutorial on youtube the are doing same thing with class component but I want to do this in functional component. I tried adding this but it is not working.</p>
  <p>This is how I did. I am new to react native animations.</p>
  <pre><code>const actionBarY = useRef(new Animated.Value(1)).current;
  
  
  &lt;TouchableWithoutFeedback onPress={() =&gt; scaleInImage(item)}&gt;
    &lt;Animated.View
     key={item.id}
     style={[{ height, width }, { transform: [{ scale: scaleIn }] }]}
    &gt;
      &lt;Image
       style={{ flex: 1, height: null, width: null }}
       source={{ uri: item.urls.regular }}
      /&gt;
    &lt;/Animated.View&gt;
  &lt;/TouchableWithoutFeedback&gt;
  &lt;Animated.View
   style={{
     position: &quot;absolute&quot;,
     left: 0,
     right: 0,
     bottom: actionBarY.interpolate({     // &lt;---- Here I am trying to interpolate value
       inputRange: [0.9, 1],
       outputRange: [0, -80],
     }),
     height: 80,
     backgroundColor: &quot;white&quot;,
     flexDirection: &quot;row&quot;,
     justifyContent: &quot;space-around&quot;,
   }}
  &gt;
    &lt;View
     style={{ flex: 1, alignItems: &quot;center&quot;, justifyContent: &quot;center&quot; }}
    &gt;
      &lt;TouchableOpacity
       activeOpacity={0.5}
       onPress={() =&gt; alert(&quot;loadImages&quot;)}
      &gt;
        &lt;Ionicons name=&quot;ios-refresh&quot; color=&quot;white&quot; size={40} /&gt;
      &lt;/TouchableOpacity&gt;
    &lt;/View&gt;
  &lt;/Animated.View&gt;
  </code></pre>