Chore update bottom sheet

[ErikSin]

Implemented custom bottom sheet using React Native Reanimated, and React Navigation

Bottom sheets are now navigated to use React Navigation, and are of presentation: "transparentModal. Follows React Navigation practices for creating a modal.

Created a < BottomSheetWrapper />. This wrapper is used to create a transparent backdrop that doesnt not allow the user to interact with the screen in the background. It also enables the animation for the bottoms sheet to slide up on open and slide down on open.

The bottom sheet wrapper also prevents the user from going back when the android back button is closed.

This PR also replaces the bottom sheets in sync setting (to demonstrate how they are used)

closes #907

Screen.Recording.2025-01-30.at.2.49.15.PM.mov

To do

• incrementally replace all instances of the Gorham bottom sheet with this new bottom sheet architecture

[cimigree]

Seems to work well although for some reason the animation seems a tad more abrupt than it used to... but nothing blocking.
I tested this on various emulators and my two devices and the back button behavior was as expected and outlined.
I understand how this fits with the new architecture guidelines and that code separation is nice and clear.
I imagine that once we implement other modals, we will see if there are things to tweak.
Like maybe for some modals we might want to have a dismiss on backdrop tap enabled.
And I am a little nervous about this from the guidelines: "Modal screens should be the last in the stack - avoid pushing regular screens on top of modals." with audio.
I imagine you are already thinking about this, but perhaps there should be a plan in place about when and which to implement for other bottom sheet uses.

[ErikSin]

the animation seems a tad more abrupt than it used to... but nothing blocking.

I can change the animation if you think that desirable. Was it just the speed? Or was there any other aspect

And I am a little nervous about this from the guidelines: "Modal screens should be the last in the stack - avoid pushing regular screens on top of modals." with audio.

We can push modal on top of other modals. Is there a time when there is a normal screen above the modal in the audio flow?

perhaps there should be a plan in place about when and which to implement for other bottom sheet uses.

Ideally we just get rid of the gorhom bottom sheet completely...

[cimigree]

the animation seems a tad more abrupt than it used to... but nothing blocking.

I can change the animation if you think that desirable. Was it just the speed? Or was there any other aspect

Yes I think the speed.

And I am a little nervous about this from the guidelines: "Modal screens should be the last in the stack - avoid pushing regular screens on top of modals." with audio.

We can push modal on top of other modals. Is there a time when there is a normal screen above the modal in the audio flow?

Not sure if this is fitting the description (what is "above", exactly?), but when we go from granting permission to use the audio to the CreateRecording screen?

perhaps there should be a plan in place about when and which to implement for other bottom sheet uses.

Ideally we just get rid of the gorhom bottom sheet completely...

I meant for replacing the existing bottom sheets. Which do we do when and in what order like

[ErikSin]

Not sure if this is fitting the description (what is "above", exactly?), but when we go from granting permission to use the audio to the CreateRecording screen?

In this case we should use navigation.replace(...screen). This will replace the bottom sheet with the new screen while keeping the animations nice