Animated.spring: RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write

Question

I'm trying to create a simple React Native animation:

const flexValueForSelected = (selected:boolean) => selected ? 2 : 1;
const [flexValue] = useState(new Animated.Value(flexValueForSelected(selected)));
useEffect(() => {
    console.log('changing ' + route.routeName + ' to ', selected)
    Animated.spring(flexValue, { toValue: flexValueForSelected(selected)}).start();
    // Animated.timing(flexValue, {duration:300, easing: Easing.linear, toValue: flexValueForSelected(selected)}).start();
}, [selected])
return <Animated.View key={route.routeName} style={{flexGrow: flexValue, ...styles.touchable}}>
            ...
       </Animated.View> 

It's inside a functional component and is triggered whenever selected property changes. The function is called properly (triggered whenever selected changes, doesn't get triggered multiple times or when value doesn't change etc.) but I get the following error:

RCTJSONStringify() encountered the following error: Invalid number value (NaN) in JSON write

I've also supplied various options such as friction/tension as documented in the docs, but I'm still getting the same error and I'm also getting TypeScript linter errors no matter which combination that I try:

Argument of type '{ friction: number; tension: number; toValue: number; }' is not assignable to parameter of type 'SpringConfig'.
  Object literal may only specify known properties, and 'friction' does not exist in type 'SpringConfig'.ts(2345)

When I switch to a linear animation, e.g. Animated.timing(flexValue, {duration:300, easing: Easing.linear, toValue: flexValueForSelected(selected)}).start(); it works perfectly, so the problem is specific to spring animation (which is what I visually want to achieve).

What am I doing wrong? (I'm on React Native 0.61.2)

Answer 1

Make sure you're importing Animated from react-native and not react-native-reanimated.