fix: ensure screens that are bottom sheets scroll correctly #5062
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kathaypacific
commented
Mar 8, 2024
| // use max height simulate max 90% snap point for screens. when bottom sheets | ||
| // take up the whole screen, it is no longer obvious that they are a bottom | ||
| // sheet / how to navigate away | ||
| const maxHeight = isScreen ? variables.height * 0.9 : undefined |
There was a problem hiding this comment.
annoyingly i couldn't find a better way to set the snappoints to be dynamic + set an upper bound on the height
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5062 +/- ##
=======================================
Coverage 85.53% 85.53%
=======================================
Files 721 721
Lines 29413 29422 +9
Branches 5083 5085 +2
=======================================
+ Hits 25159 25167 +8
- Misses 4021 4022 +1
Partials 233 233
... and 1 file with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
jeanregisser
approved these changes
Mar 8, 2024
| // Navigator. It is still handy for screens and components to share this | ||
| // component for the styling and layout logic. | ||
| // https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/264#issuecomment-674757545 | ||
| const ScrollViewComponent = isScreen ? ScrollView : GorhomBottomSheetScrollView |
There was a problem hiding this comment.
What happens if we use the RNGH ScrollView everywhere?
Does it break any gesture? Maybe the overscroll to dismiss?
There was a problem hiding this comment.
yes it is the overscroll to dismiss that is not available with ScrollView. i updated the comment to be more clear about this. it's annoying that this is an issue, but i think the overscroll / bottom sheet gestures are probably the thing preventing the BottomSheetScrollView to work correctly from the navigator
|
|
||
| interface Props { | ||
| containerStyle?: StyleProp<ViewStyle> | ||
| testId?: string | ||
| forwardedRef?: React.RefObject<ScrollView> | ||
| isScreen?: boolean |
There was a problem hiding this comment.
Maybe add a small comment to explain when/why this is needed?
shottah
pushed a commit
to zed-io/kolektivo
that referenced
this pull request
May 15, 2024
…nc#5062) ### Description Context https://valora-app.slack.com/archives/C025V1D6F3J/p1709855852378389 The bottom sheet screens were not scrolling correctly, this was probably a regression but unnoticed because most of these screens do not require scrolling. Root cause is a known issue that is documented in a comment in the Navigator - we need to use the react-native-gesture-handler components to scroll inside bottom sheet screens. This PR adds a prop to the BottomSheetScrollView component to use the correct scrollview component. ### Test plan Scrolling content: https://github.com/valora-inc/wallet/assets/20150449/349c2628-017c-46b1-af88-06d20bcb19ce Short content: https://github.com/valora-inc/wallet/assets/20150449/5929f8f9-08f1-495f-8131-211cd055fbdb Tested also on the WC flow. ### Related issues - n/a ### Backwards compatibility Y ### Network scalability Y
1 task
github-merge-queue bot
pushed a commit
that referenced
this pull request
Sep 10, 2024
### Description Update `@th3rdwave/react-navigation-bottom-sheet` to the latest version and simplify some usage. It was updated to work with the latest version of `gorhom/react-native-bottom-sheet` with dynamic sizing. See https://github.com/th3rdwave/react-navigation-bottom-sheet/releases/tag/v0.3.0 I looked at the previous changes where we added workarounds for screen usage: - #5062 - #5485 These aren't needed anymore, but there's a very small patch needed again. I'll contribute it upstream. However, bonus is we now get scroll down to dismiss for bottom sheet screens! ### Test plan - Tests pass - Manually checked bottom sheets display with the correct size on both iOS and Android. And behave as expected (scroll to dismiss, etc) - Hopefully I haven't missed any special case 👀 ### Related issues N/A ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added) --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Context https://valora-app.slack.com/archives/C025V1D6F3J/p1709855852378389
The bottom sheet screens were not scrolling correctly, this was probably a regression but unnoticed because most of these screens do not require scrolling. Root cause is a known issue that is documented in a comment in the Navigator - we need to use the react-native-gesture-handler components to scroll inside bottom sheet screens.
This PR adds a prop to the BottomSheetScrollView component to use the correct scrollview component.
Test plan
Scrolling content:
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2024-03-08.at.11.07.42.mp4
Short content:
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2024-03-08.at.11.08.02.mp4
Tested also on the WC flow.
Related issues
Backwards compatibility
Y
Network scalability
Y