MotiView with NativeWind throws redundant errors when tansfroming

[Ipicon]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Using styled version of MotiView using NativeWind, I'm using the dynamic hook useDynamicAnimation, and trying to move it when the page mounts from point A to point B. The behavior is as expected but the in the console you can see a lot of errors like so: styleq: transform typeof [object Object] is not "string". I think maybe the way I'm passing props through the styled method have something to do with it, I've tried to play around with it and couldn't solve it.

Expected Behavior

No errors in the console.

Steps To Reproduce

1. Make a styled view with NativeWind using export const AnimatedView = styled(MotiView)(I've tried to pass the style props like you do in MotiLink and it didn't work too - the error went away but no styles were applied`
2. declare a default dynamicStateAnimation by using either of the transform properties.
3. Animate it.
4. cHECK THE LOGS.

Versions

- Moti: 0.19.0-alpha.6
- Reanimated: 0.69.6
- React Native: 2.9.1

Screenshots

Reproduction

.

[nandorojo]

you should probably separate the views, i’m not sure how nativewind works.

[saeedblanchette]

@Ipicon did you find any workaround? for this, I'm having the same error!

[nandorojo]

you should probably separate the views, i’m not sure how nativewind works.

[Ipicon]

@Ipicon did you find any workaround? for this, I'm having the same error!

I did exactly what @nandorojo suggested, covered the whole styled View with a regular one

[nandorojo]

animated views usually don't work well when wrapped with design systems like nativewind and tamagui since they perform magic.

[saeedblanchette]

Sorry, guys I hope this is related too, I'm having the same issue now but with MotiPressable when I wrap styled from tailwind. is there a workaround for this too ?.

[nandorojo]

i highly recommend separating the views, as mentioned before

[nandorojo]

in your case, for those very minimal opacity styles, consider using react context and pass the dark variable to the animate function.

maybe nativewind has a hook to resolve string styles into objects for these cases if you’d prefer that

[saeedblanchette]

Thank you @nandorojo, your advice worked for me (separating the views)