'react-native-reanimated interpolate width percentage

I am converting some of my default Animated stuff to react-native-reanimated v2 and can't seem to figure out how to interpolate a value to a string percentage. I also can't find anything related to this in the docs.

Using Animated from react-native I could just do:

width: widthAnim.interpolate({
   inputRange: [0, 1],
   outputRange: ['0%', '100%'],
})

But the interpolate() function from reanimated only takes number params, so how can I animate the width then?

interpolate(widthAnim.value, [0, 1], ['0%', '100%'])
// err: Type 'string' is not assignable to type 'number'.


Solution 1:[1]

You can simply use template literal

width: `${widthAnim.value * 100}%`

Check out more official example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Size yuen Cheung