fix: fix visual issues with shared content component used in bottom sheet modal

[achou11]

changes to the original implementation from Mapeo Mobile (which did not have many of the issues) when porting it to here led to a few visual issues when trying to use the BottomSheetContent component:

• the "fullscreen" variant did not justify content properly. as a result, some usages of the bottom sheet modal implemented their own content, which becomes prone to visual inconsistencies.

the original intent of this content component was to unify the visual and functional behavior of the content inside of the bottom sheet modals, which is designed very intentionally.

this PR attempts to update screens where using the shared BottomSheetContext makes sense (which is most of them). the current exception is the GPSPermissionsModal, which is not using the shared BottomSheetModal component so would require some more work to convert (can be done as a follow-up).

also fixes an issue where we were using a context-based hook without the provider being set up (react-native-safe-area)

important implementation notes:

• ~both BottomSheetModal and BottomSheetContent now accept a fullScreen prop. this is a little unfortunate but was the simplest way to get the sizing behavior we need for various use cases, without coupling the content and the modal too closely. in practice, that means whenever you want a full screen bottom sheet modal, you'll have to remember to specify the prop for the bottom sheet content component as well e.g.~ EDIT: No longer the case, see https://github.com/digidem/comapeo-mobile/pull/415/commits/b8389d5548a685c2b91f0e5267231d00defca184

  <BottomSheetModal fullScreen ...>
    <BottomSheetContent fullScreen .../>
  </BottomSheetModal>

• the minimum sheet height is set to 400. when not full screen, maximum is set to 80% of the window height

---

• CustomHeaderLeftClose

  

• ErrorBottomSheet

  

• PhotoPreviewModal

  

• PermissionAudio

  

• Receiving invite flow (forgot to screenshot success)

  

• SaveTrackScreen

  

• Loading state

  

[ErikSin]

Is this desired design (with the space where the description belongs)? It feels a little akward to me, it seems better to get rid of that space an dynamically size the modal (Which I think we were doing before)

[achou11]

Is this desired design (with the space where the description belongs)? It feels a little akward to me, it seems better to get rid of that space an dynamically size the modal (Which I think we were doing before)

yeah this is an unfortunate consequence of adding a minimum height for the sheet content in the case of the non-fullscreen variant. without it, the re-introduced flex behavior that fixes the fullscreen variant of the content doesn't play well with the bottom sheet modal dep's dynamic sizing behavior 😓

basically, super tedious to figure out! i have a couple of quick ideas i can experiment with, but may punt on this and instead just fix the cases where the fullscreen variant is broken...

[achou11]

Instead of passing the full screen prop to both the Modal and the content could we not just use a context? We know that the content will always be wrapped by the modal (and if is not, it should throw an error). I think having a full screen prop in two places is not the best design choice.

can give it a try! Agree that having to remember to specify the prop in two separate places isn't ideal

[achou11]

@ErikSin good suggestion with the context! see https://github.com/digidem/comapeo-mobile/pull/415/commits/b8389d5548a685c2b91f0e5267231d00defca184 for changes, but to summarize:

• creates a context called BottomSheetModalPropertiesContext (very open to naming suggestions). Provider is set up in the BottomSheetModal/index.tsx and the hook is used in the Content component (which has been moved, see next note)

• moves the Content component from sharedComponents/BottomSheet/Content.tsx to sharedComponents/BottomSheetModal/Content.tsx. this component is now closely tied to the modal sheet so it made more sense to co-locate it. I think in Mapeo, the original reasoning for having this component live in BottomSheet/ was because it technically could be used for bottom sheets that weren't modals. in practice, it's not used like that right now, so it felt appropriate to make the change.

  • given this change, I also updated sharedComponents/BottomSheet/BottomSheet.tsx to just sharedComponents/BottomSheet.tsx