Overwrite @gorhom/bottom-sheet v5.2.8 detached overdrag animation

Rewrite the overdrag animation effect of @gorhom/bottom-sheet BottomSheetModal in detached mode to be a height stretch rather than a simple translateY displacement animation.

Usage

Just like usual with BottomSheetModal, you can also override certain effects through animationConfigs and overrideReduceMotion.

const animationConfigs = useMemo(
  () => ({
    damping: 20,
    stiffness: 200,
    mass: 1,
  }),
  []
);

<BottomSheetModal
  ...
  enableDynamicSizing
  enablePanDownToClose
  enableOverDrag
  detached={true}
  animationConfigs={animationConfigs}
  ...
>
  ...
</BottomSheetModal>

Preview

View tweet

You can check out the patch file here:

Code gist here