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