[types] MotiImage type error when specifying tintColor animation

[xzilja]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [X] Not urgent

Current Behavior

It seems that MotiImage animates "tintColor" property as expected, however specifying it on the component throws type error (property tintColor is invalid).

      <MotiImage
          animate={{ tintColor: active ? activeTint : '#ffffff' }}
      />

Expected Behavior

Should be a valid property type.

Steps To Reproduce

1. Example above under "Current Behavior"

Versions

- Moti: 0.25.4
- Reanimated: 3.3.0
- React Native: 0.72.3

Screenshots

No response

Reproduction

https://stackblitz.com/edit/nextjs-5qbidy?file=pages%2Findex.tsx

[nandorojo]

this is likely because it’s a prop and not in the styles, right? if so, you can probably just ts-ignore it

[xzilja]

ts-ignored it for now yeh, it's on the styles of <Image /> though. I think you can set it as prop as well, however as prop it seems to have no effect.

[nandorojo]

hm interesting

[nandorojo]

i’d accept a PR with a fix if you want to try

[xzilja]

😅 yeh I wanted to, but it seems like image component is just a simple wrapper here? https://github.com/nandorojo/moti/blob/master/packages/moti/src/components/image.tsx

Here is stylesheet usage with no error / correct typing

And this is when it's defined in animate prop of MotiImage

Where would I go to see how animate prop gets it's types?

[nandorojo]

It's this line: https://github.com/nandorojo/moti/blob/ab569152a0a228e10f581c57386ac6a2a31ac9a7/packages/moti/src/core/types.ts#L271C1-L271C52

Maybe those have to get changed to ImageStyle | ViewStyle | TextStyle