Using gestureEnabled closure the sheet bounces instead of closing gracefully

[rnglnd]

Have observed when dragging sheets closed the sheet bounces instead of closing as it does by hiding.

Versions: react-native: 0.64.3 react-native-actions-sheet: 0.6.1

[DXXR-DaniloT]

I have the same issue, when I activated gestures, I also had to add the prop "initialOffsetFromBottom" to even be able to close from dragging, the sheet, otherwise it would just bounce back and stay open. After adding that prop, when I drag it down, it bounces back up, and then animates going down from the top again. Did you ever find a solution?

[ammarahm-ed]

@DXXR-DaniloT Post your implementation code here.

[DXXR-DaniloT]

@ammarahm-ed The issue reproduces with a very simple implementation, in my screen component I render action sheet like this:

return (
    <ActionSheet
      id={id}
      containerStyle={styles.actionSheet}
      gestureEnabled={true}
      headerAlwaysVisible={false}
      initialOffsetFromBottom={2}
      indicatorStyle={{
        width: 50,
        height: 2.81,
        marginTop: 10,
        marginBottom: 15,
        borderRadius: 2,
      }}>
      <View style={styles.actionSheet}>
        <Text>TestUser</Text>
      </View>
    </ActionSheet>
);

const styles = {
  actionSheet: {
    width: '100%',
    paddingBottom: 20,
    backgroundColor: Colors.darkPurple,
    height: 300,
  },
};

let me know if you need anything else.

I am also using the versions: react-native: 0.64.2 react-native-actions-sheet: 0.6.1

If initialOffsetFromBottom is not set, the modal will react to the gesture but never close due to the gesture, only closes by touching the backdrop. If it's set for a value between 1 and 2, it will sometimes close with the gesture, sometimes not. 2 and over and it closes as far as I could test it. Whenever it closes though, it always bounces back before animating it the whole way again.

[ammarahm-ed]

@ammarahm-ed The issue reproduces with a very simple implementation, in my screen component I render action sheet like this:

return (
    <ActionSheet
      id={id}
      containerStyle={styles.actionSheet}
      gestureEnabled={true}
      headerAlwaysVisible={false}
      initialOffsetFromBottom={2}
      indicatorStyle={{
        width: 50,
        height: 2.81,
        marginTop: 10,
        marginBottom: 15,
        borderRadius: 2,
      }}>
      <View style={styles.actionSheet}>
        <Text>TestUser</Text>
      </View>
    </ActionSheet>
);

const styles = {
  actionSheet: {
    width: '100%',
    paddingBottom: 20,
    backgroundColor: Colors.darkPurple,
    height: 300,
  },
};

let me know if you need anything else.

I am also using the versions: react-native: 0.64.2 react-native-actions-sheet: 0.6.1

If initialOffsetFromBottom is not set, the modal will react to the gesture but never close due to the gesture, only closes by touching the backdrop. If it's set for a value between 1 and 2, it will sometimes close with the gesture, sometimes not. 2 and over and it closes as far as I could test it. Whenever it closes though, it always bounces back before animating it the whole way again.

Is this on Android or iOS or same on both

[ammarahm-ed]

Also try setting the prop springOffset={20} and see if that helps.

Secondly it seems you understood the initialOffsetFromBottom prop incorrectly. It's used to show the sheet partially and accepts values from 0-1. For example, a value of 0.4 would mean that 40% of the sheet will show initially.

[DXXR-DaniloT]

I tried setting springOffset, but it didn't have any change on that behavior. I recorded it so it's easier to show what is happening, recorded on an iphone 12 simulator:

https://user-images.githubusercontent.com/86978953/172693109-668cecdd-abe6-4052-9731-34569ff3c6ea.mp4

I am aware of what the initial offset should be doing, but it also has the side effect of fixing the gesture to close the sheet. If I set it up with any number 1 or lower, it will not close with a gesture anymore.

And it happens only on iOS.

[Daniyaalbeg]

Can confirm I am experiencing something similar. Upon swiping down on the sheet, it animates back up and then closes.

[ammarahm-ed]

@Daniyaalbeg @DXXR-DaniloT Can you try to reproduce this behavior in the example app? I have tried but I can't reproduce this issue. The sheet closes normally with gestures.

[ammarahm-ed]

What I have noticed is that it happens when the Sheet is of less height. And I was able to fix it by setting springOffset to 1.

[ammarahm-ed]

Fixed in v0.8.0

[rnglnd]

Many thanks @ammarahm-ed !