[v4] | [v2] Unable to set initial index to be open

[BethThomas141]

Bug

We've just upgraded the bottom-sheet version in our app from v4.4.7 to v4.6.0. On doing this we now get the following error anywhere we use the bottom sheet: 'index' was provided but out of the provided snap points range! expected value to be between -1, 0. We have four snap points passed into the drawer: -1 (hidden), 0 (closed), 1 (partially open), 2 (fully open).
We want the drawer to start partially open, so we want index = 1 on the Bottom sheet component. However, it seems like we can only pass in index={-1} or index={0} otherwise we see this error.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.72.6
react-native-reanimated	3.5.4
react-native-gesture-handler	2.12.0

Steps To Reproduce

1. Implement a bottom sheet and pass in array of at least two snapPoints. Pass in an index of 1.

Describe what you expected to happen:

1. The Bottom sheet starts at snapPoint 1 (height 600) on first load. Instead we get the error 'index' was provided but out of the provided snap points range! expected value to be between -1, 0.

Reproducible sample code

import React, { useMemo, useRef, useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet, { enableLogging } from '@gorhom/bottom-sheet';
import List from './components/List';
import SearchHandle from './components/SearchHandle';
import Button from './components/Button';

enableLogging();

const App = () => {
  // refs
  const bottomSheetRef = useRef(null);

  // variables
  const snapPoints = useMemo(() => [200, 400], []);

  // callbacks
  const handleExpandPress = useCallback(() => {
    bottomSheetRef.current?.expand();
  }, []);
  const handleCollapsePress = useCallback(() => {
    bottomSheetRef.current?.collapse();
  }, []);
  const handleClosePress = useCallback(() => {
    bottomSheetRef.current?.close();
  }, []);

  return (
    <View style={styles.container}>
      <Button onPress={handleExpandPress} title="Expand" />
      <Button onPress={handleCollapsePress} title="Collapse" />
      <Button onPress={handleClosePress} title="Close" />
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        keyboardBehavior="interactive"
        index={1}
        handleComponent={SearchHandle}
        animateOnMount={true}
        android_keyboardInputMode="adjustPan">
        <List type="FlatList" />
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 64,
    justifyContent: 'flex-start',
    backgroundColor: '#222',
  },
});

export default App;

[jdnichollsc]

@BethThomas141 is expand method working from your side w/ a useEffect?

[gorhom]

@BethThomas141 i have tested your provided sample code and it worked as expected, no error were thrown

[andrecrimb]

Same issue.

[alcantara2509]

Same issue.

[indiaabbott]

same issue here! i think its because the library internally calculates container height if its not provided as props, and when this happens it sometimes normalises the snap points to only return an array with a single snap point. The relevant code is here.

Then when you e.g. snapToIndex to an index that is greater than 0, you see this error.

So I think a workaround is to provide a container height, however Im just trying to figure out now what value I should be providing for this... 😅

@gorhom

[abcarlisle]

I am seeing this too, running on expo with "@gorhom/bottom-sheet": "^4.6.1", "react-native-reanimated": "~3.6.2",

After initial render everything works as expected. However on the first render the bottom sheet does not appear. Adding containerHeight did not fix issue. I have tried using snaptoindex and expand in a useEffect but that did not work either.

[abcarlisle]

same issue here! i think its because the library internally calculates container height if its not provided as props, and when this happens it sometimes normalises the snap points to only return an array with a single snap point. The relevant code is here.

Then when you e.g. snapToIndex to an index that is greater than 0, you see this error.

So I think a workaround is to provide a container height, however Im just trying to figure out now what value I should be providing for this... 😅

@gorhom

Did this work for you? I added container height and still no luck.

[abcarlisle]

I am seeing this too, running on expo with "@gorhom/bottom-sheet": "^4.6.1", "react-native-reanimated": "~3.6.2",

After initial render everything works as expected. However on the first render the bottom sheet does not appear. Adding containerHeight did not fix issue. I have tried using snaptoindex and expand in a useEffect but that did not work either.

Okay I did some digging and found that i needed to pass in handleHeight={windowHeight} and that allowed

useEffect(() => sheetRef.current?.snapToIndex(1),[])

to open up the bottom sheet on the intial render.

index={1} still didn't work but at least this is a work around for me.

[abcarlisle]

I am seeing this too, running on expo with "@gorhom/bottom-sheet": "^4.6.1", "react-native-reanimated": "~3.6.2",
After initial render everything works as expected. However on the first render the bottom sheet does not appear. Adding containerHeight did not fix issue. I have tried using snaptoindex and expand in a useEffect but that did not work either.

Okay I did some digging and found that i needed to pass in handleHeight={windowHeight} and that allowed

useEffect(() => sheetRef.current?.snapToIndex(1),[])

to open up the bottom sheet on the intial render.

index={1} still didn't work but at least this is a work around for me.

Welp I guess that work around only works if I used this as a patch. Hahaha. Will stop replying to myself now.
#1694

[indiaabbott]

same issue here! i think its because the library internally calculates container height if its not provided as props, and when this happens it sometimes normalises the snap points to only return an array with a single snap point. The relevant code is here.
Then when you e.g. snapToIndex to an index that is greater than 0, you see this error.
So I think a workaround is to provide a container height, however Im just trying to figure out now what value I should be providing for this... 😅
@gorhom

Did this work for you? I added container height and still no luck.

You’re right, this didn’t end up working for me.

What we have done instead is to use the ‘useAnimatedReaction’ hook from the Reanimated lib - it watches the bottom sheet library’s internals to check when the snap points are ready (you can get animatedSnapPoints from useBottomSheetInternal). As we know they are normalised to -999, but then this changes when the sheet is ready.

Once the sheet is ready, we set a state variable ‘sheetReady’ to true, and then in a useEffect call snapToIndex(openIndex). We start all our sheets in the closed state (index -1) and only expand to open state when the sheet is ready, giving the effect that the sheet is mounting open 🥴

so yes, agree that it’s an issue that you can’t pass index > 0 to the sheet as a starting prop 😔

[github-actions]

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.

[andrecrimb]

👍🏽