[v4] | [v2] BottomSheetScrollView won't scroll at snapIndex 0 or 1

[betoharres]

Bug

Hello, I'm not really sure if this is intended but, on the screen I'm working on there's a map with markers and this library with a list of places being show on the map. Problem is: when I tap the marker on the map I'd like to scroll the list to the item tapped when the bottom sheet is ONLY AT SNAP INDEX 1, NOT 2. But the BottomSheetScrollView component won't scroll at index 1, or even at 0(through it's ref).

I've never touched this library code but somehow I managed to found the source of the problem and make it work as I intend by commenting this line: https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/hooks/useScrollEventsHandlersDefault.ts#L46

Again, I'm not really sure what I'm doing, I just think it should be possible to control the scroll without being locked into only one option(snap index 2).

I've also tried different versions of this library starting at 4.0.0 and none of them worked without changing the code.

Environment info

System: OS: Linux 5.10 Arch Linux CPU: (16) x64 Intel(R) Core(TM) i9-9900 CPU @ 3.10GHz Memory: 549.34 MB / 15.55 GB Shell: 5.8 - /usr/bin/zsh Binaries: Node: 16.7.0 - /usr/bin/node Yarn: 1.22.11 - /usr/bin/yarn npm: 7.20.6 - /usr/bin/npm Watchman: 4.9.0 - /home/linuxbrew/.linuxbrew/bin/watchman SDKs: Android SDK: API Levels: 16, 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0 System Images: android-28 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7199119 Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.2 => 0.64.2 npmGlobalPackages: react-native: Not Found

Library	Version
@gorhom/bottom-sheet	4.1.3
react-native	0.64.2
react-native-reanimated	2.2.3
react-native-gesture-handler	1.10.3

Steps To Reproduce

Describe what you expected to happen:

1. scroll list to item position at snap index 1

Reproducible sample code

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

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);
  const scrollRef = useRef<any>(null);

  // 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);
  }, []);

  // HEREEEEEEEEEE <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  const handleScroll = useCallback(() => {
    sheetRef.current?.snapToIndex(1); // open bottom sheet just a little!!!
    scrollRef.current?.scrollTo({y: 25}); // should scroll to item I want!
  }, []);

  // render
  const renderItem = useCallback(
    item => (
      <View key={item} 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="Snap to 50% and scroll" onPress={() => handleScroll()} />
      <BottomSheet
        ref={sheetRef}
        index={1}
        snapPoints={snapPoints}
        onChange={handleSheetChange}
      >
        <BottomSheetScrollView
          // AND HEREEEEEEEEEEEE <<<<<<<<<<<<<<<<<<<<<<<<<<<<
          ref={scrollRef}
          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 App;

I did not test this code but this is exemplifying what I'm doing

[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.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[sjwinther]

Hi @betoharres, did you ever solve this? I'm facing the same issue, but it looks like maybe it works this way by design?

[SohelIslamImran]

Same issue