[v4] | [v2] | how to enable scroll on any snapPoints in scrollview?

[SohelIslamImran]

Bug

I have a BottomSheetModal with snapPoints={["20%", "40%", "100%"]} and BottomSheetScrollView. I want to scroll items in "20%", "40%" snapPoints. But can't scroll before full expan the BottomSheetModal. Seems, scroll is disabled by default in lower snapPoints. We only can scroll in the maximum snapPoints. Is there any solution?

Environment info

Library	Version
@gorhom/bottom-sheet	^4.1.5
react-native	0.64.3
react-native-reanimated	~2.3.1
react-native-gesture-handler	~2.1.0

Steps To Reproduce

Reproducible sample code

[SohelIslamImran]

#726

[akinyele]

Having the same issue.

[fabriziocucci]

Affected as well.

IMHO being able to scroll only on the last snap point (especially when enableContentPanningGesture={false}) seems a limitation! :confused:

@gorhom is there a quick workaround and/or any intention to support this?

[udot-a]

I have the same issue. Do you have any ideas about when it will work?

[roni-castro-db]

I've run the library example bare app on the Android API 29 emulator and it's not scrolling in any snapPoint:

https://user-images.githubusercontent.com/95294257/171505928-b9cfc7c7-936e-4643-be5b-1432fb9afdd6.mov

[udot-a]

I fixed this issue by adding ScrollView from react-native-gesture-handler library. There is an example:

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

const GorhomSample = () => {
  // hooksreact-native-gesture-handler
  const sheetRef = useRef();

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

  // callbacks
  const handleSheetChange = useCallback(index => {
    console.log('handleSheetChange', index);
  }, []);
  const handleSnapPress = useCallback(index => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderItem = useCallback(
    (item, index) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    [],
  );
  return (
    <View style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        onChange={handleSheetChange}>
//This line has fixed issue
        <ScrollView>{data.map(renderItem)}</ScrollView>
      </BottomSheet>
    </View>
  );
};

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

export default GorhomSample;

[roni-castro-db]

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

const GorhomSample = () => { // hooksreact-native-gesture-handler const sheetRef = useRef();

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

// callbacks const handleSheetChange = useCallback(index => { console.log('handleSheetChange', index); }, []); const handleSnapPress = useCallback(index => { sheetRef.current?.snapToIndex(index); }, []); const handleClosePress = useCallback(() => { sheetRef.current?.close(); }, []);

// render const renderItem = useCallback( (item, index) => ( <View style={styles.itemContainer}> <Text>{item}</Text> </View> ), [], ); return ( <View style={styles.container}> <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} /> <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} /> <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} /> <Button title="Close" onPress={() => handleClosePress()} /> <BottomSheet ref={sheetRef} snapPoints={snapPoints} onChange={handleSheetChange}> //This line has fixed issue <ScrollView>{data.map(renderItem)}</ScrollView> </BottomSheet> </View> ); };

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

export default GorhomSample;

I'm seeing the same problem with Android simulator API 29 and Android API 31 with react-native-gesture-handler. Did you try this with these versions?

Used your code example above that render 50 items with the examples/bare code:

https://user-images.githubusercontent.com/95294257/171680110-78136575-df31-4233-bade-4df4c6f734c7.mov

I've ended up using the react-native-modal to create this bottom sheet as we don't need a lof of the lib's stuff https://gist.github.com/roni-castro/0016d70f81de88320006a4440201f6f8#file-index-js

[estmau]

I have a temporary solution. I added a ScrollView between the BottomSheet tags and in the ScrollView style, I added a ternary function in which it detects in which index the modal is located. Once the index is detected, it gives a relevant height to the ScrollView.

[codekojo]

Solution to your problem is to replace ScrollView with BottomSheetScrollView

import BottomSheet, {BottomSheetScrollView} from '@gorhom/bottom-sheet'; 1. Your Code

<BottomSheet
       ref={sheetRef}
       snapPoints={snapPoints}
       onChange={handleSheetChange}>
       <ScrollView>{data.map(renderItem)}</ScrollView>
     </BottomSheet>
   </View>

2. Working Code

 <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        onChange={handleSheetChange}>
        <BottomSheetScrollView>{data.map(renderItem)}</BottomSheetScrollView>
      </BottomSheet>

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SohelIslamImran]

Bump

[Niltonsf]

This issue was no yep fixed. I'm having the same problem with BottomSheetFlatList

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SohelIslamImran]

Bump

[netojose]

I'm using 4.4.5 version and the BottomSheetScrollView and BottomSheetFlatList still with the problem

[Svarto]

same here, anyone found a solution? For me it only breaks on Android...using BottomSheetFlatlist

[udot-a]

I've just added ScrollView from react-native-gesture-handler inside BottomSheetModal and all fine

[Svarto]

I got this to work correctly with a BottomsheetFlatList by making it the only component inside the BottomsheetModal. Then add in my other components through headers / footers etc.

To be clear: The scrolling did not work when I nested the BottomsheetFlatList inside any component, if it was the only (and parent of all other components) the scrolling works on both iOS and Android

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SohelIslamImran]

Bump

[shafayet2368]

anyone found a solution to this? Facing the same issue

[sjchristi]

Hitting this same issue. My BottomSheetFlatList is also the only component inside my BottomSheet, but I still hit the issue (Svarto mentioned this worked for him).

Wrapping in any sort of scroll view isn't an option as when I do that, the list seems to be rendering all of the items inside it and performance becomes terrible.

[ijhar-nivoda]

same here, anyone found a solution for BottomSheetFlatList ?

[faiak]

Having same issue

[CostasCF]

My solution on android was to use GestureHandlerRootView instead of View when wrapping the BottomSheet. Also I made sure to render the items inside BottomSheetScrollView, so they will be able to scroll. A small diagram:

<GestureHandlerRootView>
    <BottomSheet>
      // items that I don't want to be scrollable like a Text representing a Title..
      <Text>This is a title </Text>
           <BottomSheetScrollView>
                  // items that I want them to be scrollable
                  {data.map(renderItem)}
           </BottomSheetScrollView>
     </BottomSheet>
</GestureHandlerRootView>

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[SohelIslamImran]

Bump

[reinaldonetof]

Hello everyone, I'm facing this issue, to enable the scroll we are using the FlatList from react-native and enableContentPanningGesture: false, but looks like the flatlist is rendered as the full view, and it doesn't know how far it should show, is anyone facing this, too?

https://user-images.githubusercontent.com/47038980/219799856-cbf25fa3-9366-4c26-aa3e-8f5fca4188ac.mov

Also, the BottomSheetFlatList doesn't scroll until the max snap

[theyanniss23002]

@reinaldonetof Did you manage to solve the problem? I faced exactly the same

[fukemy]

decided to remove this useless lib because the scroll problem never solved by owner. Now I am using rn modallize then now all work good and better for me