Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix inner styling of Pressable #2982

Merged
merged 30 commits into from
Jul 9, 2024
Merged

Conversation

latekvo
Copy link
Contributor

@latekvo latekvo commented Jul 4, 2024

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
Copy link
Contributor

m-bert commented Jul 4, 2024

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
Copy link
Contributor

m-bert commented Jul 4, 2024

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

@latekvo
Copy link
Contributor Author

latekvo commented Jul 4, 2024

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.

@latekvo latekvo changed the title Fix flex styling of inner elements of Pressable Fix inner styling of Pressable Jul 4, 2024
@m-bert
Copy link
Contributor

m-bert commented Jul 4, 2024

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
Copy link
Member

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

@latekvo
Copy link
Contributor Author

latekvo commented Jul 5, 2024

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 latekvo marked this pull request as ready for review July 5, 2024 09:02
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/Pressable.tsx Outdated Show resolved Hide resolved
@m-bert m-bert requested a review from j-piasecki July 6, 2024 16:40
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
src/components/Pressable/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable/utils.ts Outdated Show resolved Hide resolved
Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, what about you @m-bert?

src/components/Pressable/Pressable.tsx Outdated Show resolved Hide resolved
@latekvo
Copy link
Contributor Author

latekvo commented Jul 9, 2024

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

@latekvo latekvo merged commit 1256081 into main Jul 9, 2024
2 checks passed
@latekvo latekvo deleted the @latekvo/fix-pressable-flex-styling branch July 9, 2024 13:49
github-merge-queue bot referenced this pull request in valora-inc/wallet Aug 6, 2024
…5714)

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-gesture-handler](https://togithub.com/software-mansion/react-native-gesture-handler)
| [`^2.17.1` ->
`^2.18.1`](https://renovatebot.com/diffs/npm/react-native-gesture-handler/2.17.1/2.18.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-gesture-handler/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-gesture-handler/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-gesture-handler/2.17.1/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-gesture-handler/2.17.1/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>software-mansion/react-native-gesture-handler
(react-native-gesture-handler)</summary>

###
[`v2.18.1`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.1)

[Compare
Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.18.0...2.18.1)

#### 🐛 Bug fixes

- Fix build on RN 0.74 by [@&#8203;m-bert](https://togithub.com/m-bert)
in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3024](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3024)

#### What's Changed

- Bump ws from 6.2.2 to 6.2.3 in /example by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3003](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3003)
- Bump requirejs from 2.3.6 to 2.3.7 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3009](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3009)
- Bump fast-xml-parser from 4.2.5 to 4.4.1 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3016](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3016)
- Bump ws from 6.2.2 to 6.2.3 in /docs by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3021](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3021)
- Add documentation page for `Pressable` component by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2992](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2992)
- Add docs page for Reanimated Swipeable by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2962](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2962)

**Full Changelog**:
software-mansion/react-native-gesture-handler@2.18.0...2.18.1

###
[`v2.18.0`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.0)

[Compare
Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.17.1...2.18.0)

#### ❗ Important changes

- Create a separate component out of the new Swipeable row by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2936](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2936)
- Create gesturized pressable component by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2942](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2942),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2977](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2977),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2982](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2982),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2981](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2981)
- Support for React Native 0.75 by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2966](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2966)

#### 👍 Improvements

- \[macOS] Add `ForceTouch` warning by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2954](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2954)
- Remove shared value read on the JS thread during detector update by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2957](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2957)
- Use a newer constructor for all Gesture Handler events on Android by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2967](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2967)
- Persist rotation and pinch gesture through pointer changes on android
by [@&#8203;coado](https://togithub.com/coado) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2983)
- \[macOS] Add `NativeViewGestureHandler` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3004](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3004)
- Add `enabled` prop support to swipeable by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3011](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3011)

#### 🐛 Bug fixes

- Make handler comparator work only on non-null objects by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2964](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2964)
- fix: bind scope to null to prevent issues with inline requires by
[@&#8203;EvanBacon](https://togithub.com/EvanBacon) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2972](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2972)
- Replace `queueMicrotask` with `requestAnimationFrame` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2969](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2969)
- Resolve circular dependencies on JS side by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2970](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2970)
- Fix Android native buttons emitting 2 press events when talkback is
enabled by [@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3002](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3002)
- Fix `ScrollView` intercepting touches through out-of-bounds children
by [@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3017](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3017)
- Change `onPress` argument in buttons by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3006](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3006)
- \[macOS] Fix handlers not responding after opening context menu by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3008](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3008)
- \[iOS | macOS] Fix translation calculation in `LongPress` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3013](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3013)
- Fix cancelling manual activation gestures blocking interactivity on
iOS by [@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3007](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3007)

#### 🔢 Miscellaneous

- Bump ws from 6.2.2 to 6.2.3 in /FabricExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2949](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2949)
- Bump braces from 3.0.2 to 3.0.3 in /MacOSExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2956](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2956)
- docs: bump `@swmansion/t-rex-ui` to 0.0.12 by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2958](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2958)
- Bump braces from 3.0.2 to 3.0.3 in /FabricExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2965](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2965)
- Set consistent prettier version across all package.jsons by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2971](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2971)
- Change naming scheme in package.json from camelCase to dash-case by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2973](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2973)
- Unify comments and simplify some conditions. by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2984](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2984)
- docs: Update Expo installation instructions by
[@&#8203;amandeepmittal](https://togithub.com/amandeepmittal) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2991)
- Bump fast-loops from 1.1.3 to 1.1.4 in /docs by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2986](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2986)
- Remove plural form in docs by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2995](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2995)
- Bump fast-loops from 1.1.3 to 1.1.4 in /example by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2994](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2994)
- Don't run old arch integrity check on every PR by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2998](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2998)
- docs: fix footer on landing by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2997](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2997)
- docs: Replace HireUsSection with `@swmansion/t-rex-ui` component by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2996](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2996)
- Mention `drawerWillShow` in `DrawerLayout` docs by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3000](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3000)
- chore: Refactor gradle task to JS scripts by
[@&#8203;maciekstosio](https://togithub.com/maciekstosio) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3001](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3001)
- Update dependencies related to tests by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3005](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3005)
- \[macOS] Switch `hasPointerInside` to `containsPointInView` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3012](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3012)

#### New Contributors

- [@&#8203;coado](https://togithub.com/coado) made their first
contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2983)
- [@&#8203;amandeepmittal](https://togithub.com/amandeepmittal) made
their first contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2991)

**Full Changelog**:
software-mansion/react-native-gesture-handler@2.17.0...2.18.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job
log](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40NDAuNyIsInVwZGF0ZWRJblZlciI6IjM3LjQ0MC43IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJucG0iLCJyZW5vdmF0ZSJdfQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Pressable] Styles are not applied
3 participants