React-native-reanimated: How to interpolate values into percentage?

[Haper]

I'm trying to run the next code:
const shiftPercentage = shift.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'], });

and getting an error:
outputRange cannot include 0%.

[dsznajder]

@Haper take a look here:
https://github.com/kmagiera/react-native-reanimated#concat

you can do sth like:

const shiftPercentage = concat(interpolate(shift, { inputRange: [0,100], outputRange: [0,100] }), '%')

EDIT:

You have full example here too: https://github.com/kmagiera/react-native-reanimated/blob/06b03a84619cae3c4d9c044b89b7f01d4be8713b/Example/rotations/index.js#L62

[Haper]

Thanks a lot!

[likern]

@Haper take a look here:
https://github.com/kmagiera/react-native-reanimated#concat

you can do sth like:

const shiftPercentage = concat(interpolate(shift, { inputRange: [0,100], outputRange: [0,100] }), '%')

EDIT:

You have full example here too: https://github.com/kmagiera/react-native-reanimated/blob/06b03a84619cae3c4d9c044b89b7f01d4be8713b/Example/rotations/index.js#L62

How to do the same using Reanimated V2?

[terrysahaidak]

How to do the same using Reanimated V2?

Highly depends on "where" you use it, but as an example

const aStyles = useAnimatedStyle(() => {
  const value = interpolate(progress.value, [0, 100], [100, 0]);

  return {
    width: `${value}%`,
  };
});