[v4] | [v2] Snap Point does not accept 1 value in BottomSheetModal

[ahmetkuslular]

Bug

snapPoint does not accept 1 value. in the Bottom Sheet Modal. The error message shown is as follows 'index' was provided but out of the provided snap points range! expected value to be between -1, 0

docs page: https://gorhom.github.io/react-native-bottom-sheet/props/#snappoints

not working❌ const snapPoints = useMemo(() => ['90%'], []);

working✅ const snapPoints = useMemo(() => ['20%' '90%'], []);

Environment info

Library	Version
@gorhom/bottom-sheet	4.3.1
react-native	0.66.4
react-native-reanimated	2.4.0
react-native-gesture-handler	2.2.0

Steps To Reproduce

Reproducible sample code

https://snack.expo.dev/@ahmetkuslular/bottom-sheet-v4-reproducible-issue-template

[travisobregon]

You need to set the index prop to index={0} on the BottomSheetModal.

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

[firstpersoncode]

You need to set the index prop to index={0} on the BottomSheetModal.

but what if we want the BottomSheetModal to be closed initially?

btw I ended up following your solution and it doesn't fix the error.

that's on IOS

[firstpersoncode]

I ended up console log the length of the snapPoints:

const snapPoints = useMemo(() => ['1%', '50%', '90%'], []);
console.log("snapPoints length", snapPoints.length);

and the outpout is:

info Reloading app...
 BUNDLE  ./index.js 

 BUNDLE  ./index.js 

 LOG  Running "CleanExpress" with {"rootTag":31,"initialProps":{}}
 LOG  snapPoints length 3
 LOG  snapPoints length 3
 ERROR  Invariant Violation: 'index' was provided but out of the provided snap points range! expected value to be between -1, 0

Somehow this library doesn't receive the actual snapPoints I pass or the error handler is not correct?

[rameesp]

const snapPoints = useMemo(() => ['25%', '50%', '95%'], []);

In order to keep the bottom sheet closed, initially set the index to -1

Here is my full code, hopes it will be helpful :

<BottomSheet
        ref={someHook.bottomSheetRef}
        index={-1}
        enablePanDownToClose
        bottomInset={32}
        backgroundStyle={someStyle.bottomSheetStyle}
        snapPoints={dataFilterResultHook?.snapPoints}>
              <BottomSheetView style={someStyle.bottomSheetContainerStyle}>
                      ...........
               </BottomSheetView>
      </BottomSheet>

[vlad-datacat]

I have the same issue, I attempted to use 0, 1 and -1 values as index - no luck, always the same error. I declare snappoints like so const snapPoints = isAndroid() ? [16, 79, 145] : [40, 120, 200]; outside of component and code <BottomSheet ref={bottomSheetRef} snapPoints={snapPoints} index={0}> - this crash happens only the first time it ran on new device, subsequent runs are all good, unless I set enableDynamicSizing to true - adding that prop to the mix makes it crash every single refresh. Now failing all initial device tests in Google play store pre-launch. I've attempted to patch the package searching through validators and checks but had no luck.

[andrecrimb]

From my debugging I could notice that the issue is mainly in useNormalizedSnapPoints(gorhom/bottom-sheet/src/hooks/useNormalizedSnapPoints), where an array with only a single snappoint get's returned in some cases (eg. if !isContainerLayoutReady), without considering the number of snap points first informed. In my case, I had a BS with 2 snap points and I was trying to snap it proactively using useEffect when isContainerLayoutReady was still false.