Issue with AnimateStyle<> typing

While the typing supports perfectly top-level properties and style properties (kudos to that because the RN Animated API types them as any), there seems to be an issue with transform properties which are one level of nesting deeper.

For instance:

const scale = new Value(1);
const opacity = new Value(1);
<Animated.View style={{ opacity }} /> // Work great
<Animated.View style={{ transform: [{ scale }] }} /> //  type error

I looked at the type definition AnimateStyle in react-native-reanimated.d.ts but this type definition is challenging for me to understand. I would love to help to solve this issue if pointed to the right direction though.

[prithweedas]

const Example = () => {
  const { translationX, gestureHandler } = horizontalPanGestureHandler()
  return (
    <View style={styles.container}>
      <PanGestureHandler {...gestureHandler}>
        <Animated.View style={{ transform: [{ translateY: translationX }] }} />
      </PanGestureHandler>
    </View>
  )
}

And here’s the type error I’m getting

[hastom]

Same issue

const Test = () => {
  <Animated.View style={{ transform: [ { translateX: new Animated.Value(0)} ] }} />
}

Gives error Type 'Animated.Value(0)' is not assignable to type 'number'