[v4] Crash on reduced motion

[mihaibulic2]

Bug

Two things:

1. the change in 4.6.3 to handle reduced animations isn't complete: if a rerender happens during dismissal, the bottom sheet jitters and appears again; eg call setSomeState right when you call dismiss on your modal ref - make sure you use someState in the bottom sheet content UI)
2. the approach used in that commit also causes a crash: "TypeError: Cannot assign to read-only property 'reduceMotion'" (on Android)

The way I found to workaround it, which maybe could be lifted into the bottom-sheet codebase is to set animateOnMount={!reduceMotionEnabled}.

That on it's own doesn't work though! If you just do that then the modal can only be dismissed via the ref one time. To work around that, I did this:

<BottomSheetModal
  animateOnMount={!reduceMotionEnabled}
  key={`bottom-sheet-modal-${bottomSheetBumpKey}`}
  onDismiss={() => {
    if (reduceMotionEnabled) {
      setBottomSheetBumpKey((existing) => existing + 1);
    }
  }}
  ...
>

That's pretty ugly, but essentially it forces the BottomSheetModal to rerender whenever we dismiss, giving us a fresh ref. Ideally there is a more proper fix that can be done inside the bottom-sheet lib to prevent this?

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.74.1
react-native-reanimated	3.11.0
react-native-gesture-handler	2.16.2

Steps To Reproduce

1. update to 4.6.3
2. turn on reduce animations on android
3. open bottom sheet modal

Describe what you expected to happen:

• don't crash!

Reproducible sample code