Broken styles in MotiPressable

[clayrisser]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

The MotiPressable component is a <MotiView /> wrapped by a custom <Pressable />.

First of all, I believe the <Pressabe /> should be wrapped by the <MotiView />. The main reason is that the animation should apply to the entire element. For example, if I animated the rotation of the element, it should affect everything, not just the inner component.

Secondly, regardless of whether Pressable or MotiView is the inner element, there are some styles that should be applied to the outer element. Currently all of the styles are being applied to the inner element.

All of the styles should be applied to the outer element, with the exception of styles affecting children layouts, which should be applied to the inner element. The follow list of regular expressions sums up what should be applied to the inner element. The rest should be applied to the outer element.

/^padding/g /^flex/g /^alignContent$/g /^alignItems$/g /^justifyContent$/g /^placeContent$/g /^placeItems$/g

Expected Behavior

The expected behavior is for the styles passed to the MotiPressable to behave the same as styles passed to a normal react native Pressable component.

Steps To Reproduce

No response

Versions

Moti: 0.18.0
Reanimated: 2.5.0
React Native: 0.68.0

Screenshots

No response

Reproduction

https://risserlabs.gitlab.io/community/native-theme-ui/?path=/story/components-alerts-alert--like-theme-ui

Notice in this example, the X has marginLeft set to auto. It should align the X to the right side, but it is not because the marginLeft style is in the inner component instead of the outer component.

[nandorojo]

Thanks for the issue!

Regarding your first point, please find my reasoning here: https://github.com/nandorojo/moti/pull/152#issuecomment-1011476039

Have you tried the containerStyle prop?

[clayrisser]

Ok, I'll continue the conversation on your thread.

[clayrisser]

Also, I think the default behavior should be a single component so that it can be wrapped with dripsy. Right now the styles won't pass down from dripsy to the parent component.

[nandorojo]

For that case, you could pass the result of useSx() to containerStyle. But the container should generally only need to get used for flex layout purposes.

[clayrisser]

Sure I can do it that way.

I believe the container, or outer component should only be used for the self flex props, for example align-self. The inner component would have most of the flex props.

How can I create a shadow with a border radius of 9999 using the MotiPressable? Currently it's not possible, due to the reasons I laid out above.

[clayrisser]

I'll go ahead a close this. I figured out how to use it the way you designed it. I sometimes I have to add styles twice to the animation and the style prop, which I guess is ok.