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.

Sign up for GitHub

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

Jump to bottom

hitSlop does not work inside in stack header #1981

Closed
alexandernanberg opened this issue Dec 2, 2023 · 7 comments · Fixed by #1995
Closed

hitSlop does not work inside in stack header #1981

alexandernanberg opened this issue Dec 2, 2023 · 7 comments · Fixed by #1995
Assignees
@kkafar
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@alexandernanberg
Copy link

Description

hitSlop does not work as expected in a Stack header

Screen.Recording.2023-12-02.at.08.16.39.mov

Steps to reproduce

  1. Add a <Pressable> to either headerLeft or headerRight
  2. Set a hitSlop
  3. Try to press on the hitSlop area and see the onPress cb isn't called

Snack or a link to a repository

https://github.com/alexandernanberg/react-native-screens-repro

Screens version

3.22.1

React Native version

0.72.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes
@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided labels Dec 2, 2023
@kkafar
Copy link
Member

kkafar commented Dec 6, 2023

Yeah, I can confirm the issue, thanks for reporting

@kkafar kkafar self-assigned this Dec 6, 2023
@thomasttvo
Copy link

seeing this as well on native-stack navigation, @kkafar any idea how we can patch the library for a fix?

@kkafar kkafar mentioned this issue Dec 27, 2023
Merged
2 tasks
@kkafar
Copy link
Member

kkafar commented Dec 27, 2023

@thomasttvo, checkout this PR: #1995

kkafar added a commit that referenced this issue Dec 27, 2023
@kkafar
fix(iOS): not working hitslop for headerRight/Left views (#1995)
5af4b0c 
## Description

Since #1825 header config is no longer first child of a screen &
`hitTest:withEvent:` method assumed this invariant to be true.

Fixed that by using appropriate screen method instead of blind
assumption.

Fixes #1981

## Changes

* Fixed `hitTest:withEvent:` method by using `findHeaderConfig`
`RNSScreenView`'s method
* Improved `findHeaderConfig` method itself

## Test code and steps to reproduce

`Test1981`

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
@otariterterashvili
Copy link

I have react-native-screens~3.29.0 and this issue still fired, any idea how to fix @kkafar

ja1ns pushed a commit to WiseOwlTech/react-native-screens that referenced this issue Oct 9, 2024
@kkafar @ja1ns
fix(iOS): not working hitslop for headerRight/Left views (software-ma…
99444cb 
…nsion#1995)

## Description

Since software-mansion#1825 header config is no longer first child of a screen &
`hitTest:withEvent:` method assumed this invariant to be true.

Fixed that by using appropriate screen method instead of blind
assumption.

Fixes software-mansion#1981

## Changes

* Fixed `hitTest:withEvent:` method by using `findHeaderConfig`
`RNSScreenView`'s method
* Improved `findHeaderConfig` method itself

## Test code and steps to reproduce

`Test1981`

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
@hirbod
Copy link
Contributor

hirbod commented Dec 21, 2024

I can confirm that hitSlop indeed doesn't work in v4.4.0

@thomasttvo
Copy link

This works for our team on 3.32.0. Perhaps the fix needs to be merged into v4.

@kkafar
Copy link
Member

kkafar commented Jan 16, 2025

Pressables on Fabric were a subject of different issue. #2466 is supposed to fix that => this should longer be no problem since 4.6.0-beta.0 release (just released). Let me know in case you still encounter this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkafar kkafar

Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(iOS): not working hitslop for headerRight/Left views software-mansion/react-native-screens
5 participants
@hirbod @thomasttvo @alexandernanberg @otariterterashvili @kkafar