Page MenuHomePhabricator

[native] introduce barebones bottom sheet component
ClosedPublic

Authored by ginsu on Aug 25 2023, 11:15 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Sep 15, 8:53 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)
Mon, Aug 26, 6:15 PM
Unknown Object (File)
Sun, Aug 25, 4:53 AM

Details

Summary

This components introduces the barebones bottom sheet component. This component is meant to be a generic component that is feature agnostic and can be reused for any future bottom sheet we might want to create. I am very much working off the idea that this is far from the finished bottom sheet component, and some stuff here might not look super polished and a fair amount of this will change. I thought for review this would be easier to follow the progression of this component as I add the bits and pieces to it rather than just getting the final thing.

This diff also introduces a new folder called bottom-sheets. I thought this would be appropriate to add given that we likely will be using bottom sheets a lot in our app soon (profiles, message toolitps, any other place we use actionsheet) and it would make sense to have a folder to house all of this.

Here is design for reference:

Screenshot 2023-08-25 at 2.19.48 PM.png (1×734 px, 134 KB)

Depends on D8935

Test Plan

Please see the demo video to see how the bottom sheet looks/behaves so far

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

native/bottom-sheets/bottom-sheet.react.js
17 ↗(On Diff #30330)

This is hardcoded based on what I saw in the bottom sheet docs, this will change in a subsequent diff

44 ↗(On Diff #30330)

We need to forward the ref here since in order to call the present function for the bottom sheet we need to pass in the ref into the component.

General Usage:
https://gorhom.github.io/react-native-bottom-sheet/modal/usage

Methods:
https://gorhom.github.io/react-native-bottom-sheet/modal/methods

Hooks:
https://gorhom.github.io/react-native-bottom-sheet/modal/hooks

Looks good to me. Don't have any experience forwarding refs so adding @tomek as blocking to take another look.

This revision is now accepted and ready to land.Aug 27 2023, 10:46 AM
This revision now requires review to proceed.Aug 27 2023, 10:56 AM
tomek added inline comments.
native/bottom-sheets/bottom-sheet.react.js
12 ↗(On Diff #30330)

Is there a way to type ref? Maybe something like React.Ref<typeof BottomSheetModal>?

33 ↗(On Diff #30330)

Quite surprising to see a foreground color used as a background

This revision is now accepted and ready to land.Aug 28 2023, 1:44 AM
ginsu added inline comments.
native/bottom-sheets/bottom-sheet.react.js
33 ↗(On Diff #30330)

cc @ted

address comments / rebase before landing

native/bottom-sheets/bottom-sheet.react.js
33 ↗(On Diff #30330)

Spoke w/ @ted IRL about this. Agree that it is strange to use "foreground" as a background color; however, we tried modalBackground and the color is too dark. @ted and I are working on cleaning up the colors this month and we will try and address this

https://linear.app/comm/issue/ENG-4485/clean-up-the-rest-of-the-native-colors

This revision was landed with ongoing or failed builds.Sep 6 2023, 11:07 AM
This revision was automatically updated to reflect the committed changes.