search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.13k stars 982 forks source link

Fix inner styling of Pressable #2982

Closed latekvo closed 4 months ago

latekvo commented 4 months ago

References

closes: #2979 mentioned in: #2980

Description

All styles given to Pressable are applied exclusively to the outer View component.

Test plan

Pull commit 734c429 to see the issue. Pull commit 36f1a24 to see the same example with this issue resolved.

Both commits contain examples reproducing this issue under: Example app > Release tests > Pressable Gesturization > Flex styling.

In the commit without a fix applied, you can see the square red shape used for presentation is misaligned with it's parent, which is caused by inner box-model styles being assigned to the outer View container.

This behaviour does on occur on the fixed commit.

m-bert commented 4 months ago

I don't think we need example for this. Also calling it flexExample may not be the best - other props may not work as well (check padding for example).

It happens because styles passed to Pressables are applied to the outer View and not the button itself.

m-bert commented 4 months ago

I've also updated title and description of #2979 since they suggested that problem lies only in flex

latekvo commented 4 months ago

I don't think we need example for this

I agree, that's just a work-in-progress kind of thing to see if the issue is resolved as I am switching between branches and would prefer not to use shelves which tend to be problematic.

I'll make sure to remove it before making the branch ready for review.

m-bert commented 4 months ago

I agree, that's just a work-in-progress kind of thing to see if the issue is resolved as I am switching between branches and would prefer not to use shelves which tend to be problematic.

Ok, It was a bit too early to mention that, sorry for bothering you 😅

j-piasecki commented 4 months ago

Not sure if it helps but Kacper was doing something kinda similar with border styling - https://github.com/software-mansion/react-native-gesture-handler/pull/2691

latekvo commented 4 months ago

Not sure if it helps but Kacper was doing something kinda similar with border styling

This is extremely helpful, I see Kacper used StyleSheet.flatten to reduce StyleProp<ViewStyle> into ViewStyle which is the exact thing I was looking for and couldn't find. Thanks.

latekvo commented 4 months ago

Received a go-ahead from @m-bert. Merging.