[native] replace out of box BottomSheetModal with basic BottomSheet
0cc3e7293225
Actions

Description

[native] replace out of box BottomSheetModal with basic BottomSheet

Summary:
The next part of viewing a full screen avatar for user profiles will be to introduce a UserProfileAvatarModal component using our FullScreenViewModal that we just introduced.

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

Replace out of box BottomSheetModal with basic BottomSheet (Unfortunately, BottomSheetModal does not play nice with nested navigator)
Polish up the BottomSheetBackdrop animation
Introduce User Profile Bottom Sheet Navigators (this is so we can navigate to User Profile Avatar Modal from the User Profile Bottom Sheet)
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
Factor out the User Avatar component in UserProfile into it's own separate component to keep things better organized

When I first implemented our BottomSheet component, I opted to use the out of box BottomSheetModal since it had a great modal presentation view, and a backdrop that was really well animated. However, when I tried nesting a navigator inside the BottomSheetModal (in order to navigate to the User Profile Avatar Modal), I was running into some navigation errors that were crashing the app. After some more digging I found out that BottomSheetModal is just a bottom sheet wrapped in @gorhom/portal.

https://github.com/gorhom/react-native-bottom-sheet/discussions/668#discussioncomment-4946786

What this means is that the bottom sheet component is rendered on top of everything, which is fine for simple components/bottom sheets, but if we need to do any navigation this won't work.

Luckily migrating our BottomSheet component to use the standard/basic bottom sheet instead of the BottomSheetModal does not require that many changes

Test Plan:
Confirmed that the bottomsheet worked (there is a small regression with the backdrop animation, but a subsequent diff in this stack will address this)