HomePhabricator
Diffusion Comm 8c8ef68f19c9

[native] fix BottomSheetBackdrop animation

Description

[native] fix BottomSheetBackdrop animation

Summary:
With the switch from BottomSheetModal to basic BottomSheet, there was a slight regression with the animation of the backdrop overlay. This diff addresses this regression by using the overlay animation from react-navigation, and replacing the contents of our Backdrop component with a TouchableWithoutFeedback that will close the bottom sheet on press (which will then trigger the navigating back callback)

This is step 2 in the list below
Outlined below are the steps I will take in this stack (each point here will be it's own diff):

  1. Replace out of box BottomSheetModal with basic BottomSheet (Unfortunately, BottomSheetModal does not play nice with nested navigator)
  2. Polish up the BottomSheetBackdrop animation
  3. Introduce User Profile Bottom Sheet Navigators (this is so we can navigate to User Profile Avatar Modal from the User Profile Bottom Sheet)
  4. Introduce the User Profile Avatar Modal component and all the necessary things (like route names) that we will need to navigate to this new screen
  5. Factor out the User Avatar component in UserProfile into it's own separate component to keep things better organized

Depends on D9373

Test Plan:
Please see the demo videos below

Before:

After:

Reviewers: atul, inka

Reviewed By: atul

Subscribers: ashoat, tomek, wyilio

Differential Revision: https://phab.comm.dev/D9374

Details

Provenance
ginsuAuthored on Oct 4 2023, 8:55 PM
Reviewer
atul
Differential Revision
D9374: [native] fix BottomSheetBackdrop animation
Parents
rCOMM0cc3e7293225: [native] replace out of box BottomSheetModal with basic BottomSheet
Branches
Unknown
Tags
Unknown