Based on our designs we need to implement a custom bottom sheet handle component that can be passed to BottomSheetModal as a prop.
Designs:
Link to the docs: https://gorhom.github.io/react-native-bottom-sheet/props#handlecomponent
Depends on D8955
Details
Details
Please see the before and after screenshots:
Before:
After:
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- eng-3998 (branched from master)
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| native/bottom-sheets/bottom-sheet-handle.react.js | ||
|---|---|---|
| 16 ↗ | (On Diff #30335) | We need this second view here in order to prevent the following from happening: If a user presses down in between the knob and bottomsheet it triggers unwanted actions in the background. Eventually when we place a backdrop with the bottomsheet, this will also help prevent these unwanted background actions; however, it could also lead to unwanted dismissals of the bottomsheet. Adding this view as a gap (green background) does the following: It makes sure that even if the user presses down in the gap between the bottom sheet and the knob, the gap is part of the handle so it will only control the bottomsheet |
| native/bottom-sheets/bottom-sheet-handle.react.js | ||
|---|---|---|
| 37 ↗ | (On Diff #30802) | Would've been great to React.memo this component. It only ever needs to be rendered once (unless color scheme changes) |