[native] introduce bottom sheet backdrop component
ClosedPublic
Actions

Authored by ginsu on Aug 28 2023, 9:16 AM.

Details

Reviewers

atul
inka

Commits

rCOMMb39d1a644341: [native] introduce bottom sheet backdrop component

Summary

By default the react native bottom sheet does has the backdropComponent set to null. In order to set the backdrop we need to create a backdrop component and pass it into the backdropComponent prop of BottomSheetModal

Depends on D8958

Test Plan

Please see the demo video below to see how the backdrop works

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Aug 28 2023, 9:16 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptAug 28 2023, 9:16 AM

ginsu added inline comments.Aug 28 2023, 9:34 AM

native/bottom-sheets/bottom-sheet-backdrop.react.js
3 ↗	(On Diff #30456)	The docs for this component live here: https://gorhom.github.io/react-native-bottom-sheet/components/bottomsheetbackdrop
9–17 ↗	(On Diff #30456)	The types/docs for these props can be found here: https://gorhom.github.io/react-native-bottom-sheet/components/bottomsheetbackdrop Eventually it will be good to create an official flow stub for this library and when we do having these types here should make that process a lot easier
31–35 ↗	(On Diff #30456)	All the props here have the same default value as in the docs here: https://gorhom.github.io/react-native-bottom-sheet/components/bottomsheetbackdrop However I did modify the default value for `appearsOnIndex` and `disappearsOnIndex`. The reason being is in the bottom sheet the default value for `appearsOnIndex` was `1` and the default value for `disappearsOnIndex` was `0`. This meant that when the bottom sheet first appears the backdrop won't be rendered on the first snap point which I thought was a strange user experience:

ginsu attached a referenced file: F727727: Screen Recording 2023-08-28 at 12.33.16 PM.mov. (Show Details)Aug 28 2023, 9:34 AM

Harbormaster completed remote builds in B22180: Diff 30456.Aug 28 2023, 9:34 AM

ginsu requested review of this revision.Aug 28 2023, 9:34 AM

ginsu edited the summary of this revision. (Show Details)Aug 28 2023, 9:35 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, inka.

ginsu attached a referenced file: F727731: Screen Recording 2023-08-28 at 12.34.55 PM.mov. (Show Details)

ginsu edited the summary of this revision. (Show Details)

ginsu added a parent revision: D8958: [native] introduce custom bottom sheet handle component.

inka added inline comments.Aug 29 2023, 7:25 AM

native/bottom-sheets/bottom-sheet-backdrop.react.js
9–17 ↗	(On Diff #30456)	Can you make a linear task for it?
31–35 ↗	(On Diff #30456)	Is there any point in specifying the default values that are the same (`opacity`, etc)? Did you confirm with Ted whether the defaults for `disappearsOnIndex` and `appearsOnIndex` should be overridden?

atul accepted this revision.Sep 6 2023, 1:59 PM

This revision is now accepted and ready to land.Sep 6 2023, 1:59 PM

ginsu added a subscriber: • ted.Sep 6 2023, 2:30 PM

ginsu added inline comments.

native/bottom-sheets/bottom-sheet-backdrop.react.js
9–17 ↗	(On Diff #30456)	https://linear.app/comm/issue/ENG-4872/flow-type-gorhombottom-sheet
31–35 ↗	(On Diff #30456)	Is there any point in specifying the default values that are the same (opacity, etc)? The reason I did this was that a dev in the future would not need to flip back and forth to the documentation to see what the default values are Did you confirm with Ted whether the defaults for disappearsOnIndex and appearsOnIndex should be overridden? Yes @ted and I both agree that the backdrop component should immediately appear when the bottomsheet opens up (when the index equals 0)