Interpolated animation values as strings don't work in Android

[kg-currenxie]

const interpolatedValue = Animated.interpolate(animatedValue, [0.0, 1.0], ['0', '-5'])

The typed values in the second array are supposed to be strings. However Android doesn't like that.

Changing above strings to numbers does work! But TypeScript complains about it.

// Works in iOS
const interpolatedValue = Animated.interpolate(animatedValue, [0.0, 1.0], ['0', '-5'])

const animatedStyle = Styles.createAnimatedViewStyle({
  transform: [{ translateY: interpolatedValue }],
})

return (
  <View style={styles.loadingWrapper}>
    <Animated.View style={[styles.loadingDot, animatedStyle]} />
  </View>
)

The type is as follows: let interpolate: (value: Animated.Value, inputRange: number[], outputRange: string[]) => Animated.Value

Edit: I've now tried Android, iOS, and web. All 3 work with just a number. Is this just a mis-typed parameter, or is there any other reason it was made a string?

[kg-currenxie]

Is this project dead? Not even a response

[fbartho]

You may have noticed that the world was a little busy since March. I suspect that this ticket just got forgotten! I certainly don't remember seeing the initial email.

-- I haven't contributed to the ReactXP Animated API or even used it very much, so I'm no expert as to why the typings are the way they are.

My guesses:

• it might have been an accident
• it might have been to allow some sort of unit conversion ("0px"?) for compatibility with CSS?
• it might just not be a wide-enough type. Maybe it should be Array<string | number>?

[kg-currenxie]

Good guesses :) I've tried without px on the web, and things animate as expected. So we can rule out that one. I'm thinking number should always work :) Accident? maybe :)

[fbartho]

@kg-currenxie -- would you be interested in contributing a fix here?

[kg-currenxie]

@fbartho yes I could :) Maybe end of the week

[erictraut]

The types need to be strings to support animatable types such as colors. If Android requires that some animatable types be expressed in terms of numbers, the ReactXP implementation should be converting the strings into numbers before passing them to RN.

[fbartho]

@erictraut, would it be appropriate to widen the type permit numbers, and do the conversion inside ReactXP?

[fbartho]

Or even: we don’t do any conversion? If outputrange is a number-range, interpolate numerically

[erictraut]

Whatever the approach, it should work consistently across all platforms.