How to disable content interaction when bottom sheet is animating?

[likern]

When bottom sheet starts animation (close animation) it's expected that animation can't be interrupted.
But in reality I cant interrupt animation and put it into inconsistent state (animation is stopped in the middle, while allowed states are -1 and full height)

Screenrecorder-2021-08-12-20-26-05-12.mp4

[gorhom]

@likern could you provide a reproducible sample code based on v4 template , i am working on a solution for this issue and i want to test it on your use-case

[likern]

Yes, I can. But my use-case is really simple. It's reproducible without special code.

Let's say user is pressing button very fast (like he is nervous). On first press bottom sheet starts opening. On second press bottom sheet is interrupted (it gets second press) and stays in the middle of transition.

[likern]

Screenrecorder-2021-09-11-16-10-55-318.mp4

[likern]

The original answer is the same, just animating from top to bottom.

[gorhom]

Okay, I’ll push a new shortly to prevent interaction with sheet content while animating

[likern]

I think ideally we should be able to interrupt animation. But it should never stop at the middle.

If we release gesture (and direction / velocity didn't change) we continue animating to target position. If direction was changed (I interrupted and decided to close bottom sheet) we animal to original position.

And I think about adding option to put protection view (invisible) to block interaction with content. So not only bottom sheet will always animate, but that users can't accidentally interact with content of bottom sheet (like selection tag in my case)

[gorhom]

@likern could you this pr #638 , thanks

[likern]

Thank you! I will test in a recent days on my project 🤗

[gorhom]

@likern any luck ? :)

[likern]

Sorry for delay, I will test today))

[likern]

@gorhom I've tested and I'm still can interrupt animation in both cases.

[likern]

Screenrecorder-2021-09-19-19-26-13-24.mp4

[likern]

Should I put enableContentInteractionWhileAnimating={false} into <BottomSheet /> component?

This is how I tested

import BottomSheet, {
  BottomSheetView,
  BottomSheetBackdrop,
  useBottomSheetDynamicSnapPoints
} from '@gorhom/bottom-sheet';
...
return (
      <>
        <BottomSheet
          ref={reactNativeBottomSheetRef}
          index={-1}
          snapPoints={animatedSnapPoints}
          handleHeight={animatedHandleHeight}
          contentHeight={animatedContentHeight}
          enablePanDownToClose={true}
          enableOverDrag={false}
          enableContentInteractionWhileAnimating={true}
          handleComponent={Handle}
          backdropComponent={Backdrop}
        >
          <BottomSheetView onLayout={handleContentLayout}>
            {children}
          </BottomSheetView>
        </BottomSheet>
      </>
    );

with both enableContentInteractionWhileAnimating set to true or false. Same result.

[gorhom]

Hmm that is weird, could you provide a minimal sample code of your use-case ?

[likern]

I've provided sample code #652

[gorhom]

Hi @likern, would you mind testing #769