react-nativereact-native-reanimatedreact-native-reanimated-v2

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

  • You can simply use template literal

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

    Check out more official example