How to interplote in react native functional component

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.

This is how I did. I am new to react native animations.

const actionBarY = useRef(new Animated.Value(1)).current;


<TouchableWithoutFeedback onPress={() => scaleInImage(item)}>
  <Animated.View
   key={item.id}
   style={[{ height, width }, { transform: [{ scale: scaleIn }] }]}
  >
    <Image
     style={{ flex: 1, height: null, width: null }}
     source={{ uri: item.urls.regular }}
    />
  </Animated.View>
</TouchableWithoutFeedback>
<Animated.View
 style={{
   position: "absolute",
   left: 0,
   right: 0,
   bottom: actionBarY.interpolate({     // <---- Here I am trying to interpolate value
     inputRange: [0.9, 1],
     outputRange: [0, -80],
   }),
   height: 80,
   backgroundColor: "white",
   flexDirection: "row",
   justifyContent: "space-around",
 }}
>
  <View
   style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <TouchableOpacity
     activeOpacity={0.5}
     onPress={() => alert("loadImages")}
    >
      <Ionicons name="ios-refresh" color="white" size={40} />
    </TouchableOpacity>
  </View>
</Animated.View>