How to get the current value of Animated.Value with React Native

Sometimes, we want to get the current value of Animated.Value with React Native.

In this article, we’ll look at how to get the current value of Animated.Value with React Native.

How to get the current value of Animated.Value with React Native?

To get the current value of Animated.Value with React Native, we call addListener on the animated value object.

For instance, we write:

import * as React from 'react';
import { View, Animated, Text, Easing } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const spinValue = new Animated.Value(0);

export default function App() {
  React.useEffect(() => {
    spinValue.addListener(({ value }) => console.log(value));
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  }, []);

  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <Animated.Image
      style={{ transform: [{ rotate: spin }], width: 200, height: 300 }}
      source={{ uri: 'https://picsum.photos/200/300' }}
    />
  );
}

to call spinValue.addListener with a callback to get the current value of the animated value from the value property.

We create an animated value with Animated.Value and call Animated.timing to create the animation.

Then we call start to start the animation.

As a result, we should see the value logged as the animation is being run.

Conclusion

To get the current value of Animated.Value with React Native, we call addListener on the animated value object.