[Bug]: <BottomSheetScrollView> captures sheet gesture instead and scrolls to top of screen, ignoring snapPoints

trooperandz commented 1 month ago

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

I have a bottom sheet with a scroll view inside of it:

<BottomSheet index={1} snapPoints={[100, 600]}>
  <BottomSheetScrollView  contentContainerStyle={{ flex: 1 }}/>
</BottomSheet>

Prior to the 5.* upgrade, my bottom sheet would remain at the highest snap point, and allow the scroll view to scroll as you would expect, without the sheet moving up.

After the 5.* upgrade, now when beginning the scroll gesture, the entire sheet moves to the full height of the screen, and only then observes the proper scrolling with the scroll view once the sheet has reached the top limit of the screen.

Reproduction steps

Create a screen with the following content:


import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet, { BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';

const App = () => {

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        onChange={handleSheetChanges}
        snapPoints={[100, 600]}
      >
        <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
          <View style={{ height: 950 }}>
            <Text>Scroll gesture example...</Text>
            <Text>Scroll gesture example...</Text>
            <Text>Scroll gesture example...</Text>
            <Text>Scroll gesture example...</Text>
            <Text>Scroll gesture example...</Text>
          </View>
        </BottomSheetScrollView>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flexGrow: 1,
  },
});

export default App;

Now run the app, and observe what is happening as described above, and as is reflected in the Expo redproduction sample below. I would expect instead, that the bottom sheet stays at the highest snap point, and allows internal scrolling as was happening properly in version 4.6.4.

Reproduction sample

https://snack.expo.dev/@trooperandz/bottom-sheet---issue-reproduction-template

Relevant log output

No response

gorhom commented 1 month ago

hi @trooperandz , it seems to me that it is caused by enableDynamicSizing being enabled ,, you need to set it to false

https://gorhom.dev/react-native-bottom-sheet/blog/bottom-sheet-v5#migration

trooperandz commented 1 month ago

@gorhom thank you. I tested this as well on my end with success. I appreciate the help. Did this prop change from a default of false to default of true with one of the updates?

trooperandz commented 4 weeks ago

Ah, I see that the default did change from false to true. Not sure if this is mentioned in the release notes, but in the case that it might not be, it probably should be mentioned.

gorhom / react-native-bottom-sheet