Expand/Close when item list scroll ends

[robikovacs]

Hi guys,

Is there an implementation of the example on the left in the README?

Best,

[samuel-rl]

You can use BottomSheetFlatList, BottomSheetScrollView, BottomSheetSectionList or BottomSheetVirtualizedList depend on what you need.

You can do something like this:

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

const BottomSheetFlatlistExample = () => {
  const sheetRef = useRef<BottomSheet>(null);

  const data = useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => `index-${index}`),
    [],
  );
  const snapPoints = useMemo(() => [1, '90%'], []);

  const openBottomModal = useCallback(() => {
    sheetRef.current?.expand();
  }, []);

  const renderItem = useCallback(
    item => (
      <View key={item} style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    [],
  );

  return (
    <View style={styles.container}>
      <Button title="Open Bottom Sheet" onPress={openBottomModal} />
      <BottomSheet ref={sheetRef} index={1} snapPoints={snapPoints}>
        <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
          {data.map(renderItem)}
        </BottomSheetScrollView>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 200,
  },
  contentContainer: {
    backgroundColor: 'white',
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: '#eee',
  },
});

export default BottomSheetFlatlistExample;

[SashaMihalache]

Hi @samuel-rl,

Is there any way for the bottom sheet to close when I'm dragging inside the rendered content?
The only way to close it is with the bottom sheet handle, but in the README demo, it is also closable from content drag.

I've attached a gif:

[samuel-rl]

Try with the code above

[SashaMihalache]

Hey @samuel-rl,

I've started a new Expo project with that exact code but it's still the same issue with the dragging.
Just out of curiosity, were you using vanilla react-native or expo?

[SashaMihalache]

I've just tried now on Android and it's behaving as expected

[samuel-rl]

On a vanilla react native project. I don't know for expo.

Did you wrap your entry point with GestureHandlerRootView as in the doc ?

[SashaMihalache]

Coming back with fresh eyes, I've created 2 projects one with react native (left) and one with expo (right).
The projects have the same exact setup and dependencies and it seems that on Expo it doesn't want to release from that snap point.

Also to note, on RN there's a smooth ongoing scroll after releasing the press but on Expo as soon as I release the finger it stops scrolling.

After some digging it seems it relates to this: #868

Update: after building the expo app with EAS the animation and scrolling seem to be working smooth