Page MenuHomePhabricator

[native] introduce bottom sheet backdrop component
ClosedPublic

Authored by ginsu on Aug 28 2023, 9:16 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Sep 26, 4:11 AM
Unknown Object (File)
Wed, Sep 25, 5:20 PM
Unknown Object (File)
Sat, Sep 7, 4:20 AM
Unknown Object (File)
Sat, Sep 7, 4:20 AM
Unknown Object (File)
Sat, Sep 7, 4:20 AM
Unknown Object (File)
Sat, Sep 7, 4:19 AM
Unknown Object (File)
Sat, Sep 7, 4:15 AM
Unknown Object (File)
Aug 27 2024, 6:05 PM

Details

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

native/bottom-sheets/bottom-sheet-backdrop.react.js
3 ↗(On Diff #30456)
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 requested review of this revision.Aug 28 2023, 9:34 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, inka.
ginsu edited the summary of this revision. (Show Details)
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?

This revision is now accepted and ready to land.Sep 6 2023, 1:59 PM
ginsu added inline comments.
native/bottom-sheets/bottom-sheet-backdrop.react.js
9–17 ↗(On Diff #30456)
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)