Argument of type 'AnimatedValue<0>' is not assignable to parameter of type 'Value | ValueXY'

Question

I was going through React Native documentation for Animation: https://reactnative.dev/docs/animated

And wrote this simple code

import {Animated as RNAnimated} from 'react-native'
 
const ToastGeneric = () => {
  const windowHeight =  useWindowDimensions().height
  const modalPositionY = React.useRef(new Animated.Value(0)).current;
  const ToastStyleContainer: Record<ToastPosition, ViewStyle> = {
  bottom: {
    bottom: 0,
    marginBottom: bottomSafeArea,
  },
  top: {
    top: 0,
    marginTop: topSafeArea,
  }
 };
  useEffect(() => {
    if (toast.visible) {
      RNAnimated.timing(modalPositionY, {
        toValue: topSafeArea,
        duration: 2000
      }).start();

      setTimeout(() => {
        RNAnimated.timing(modalPositionY, {
          toValue: 0,
          duration: 2000
        }).start();
      }, 500)
    }

  }, [toast.visible])

but I keep getting this error here

  RNAnimated.timing(modalPositionY, {
    toValue: topSafeArea,
    duration: 2000
  }).start();

Argument of type 'AnimatedValue<0>' is not assignable to parameter of type 'Value | ValueXY'. Type 'AnimatedValue<0>' is missing the following properties from type 'Value': setOffset, flattenOffset, extractOffset, addListener, and 4 more.

Any idea what I could be doing wrong? when I launch the app, it crashed with this error

TypeError: singleValue.stopTracking is not a function. (In 'singleValue.stopTracking()', 'singleValue.stopTracking' is undefined)

Answer 1

This is a typo issue. React.useRef(new Animated.Value(0)).current; should be React.useRef(new RNAnimated.Value(0)).current; - RNAnimated instead of Animated.

You are already imported and renamed Animated to RNAnimated when you try to import Animated from react-native.