[Bug]: More snapPoints then specified

[mbpictures]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

In some situations, the modal snaps to more snap points then specified. So e.g. I provide two snapPoints (one above the bottom bar, one higher), but since v5 I can snap the modal to more than 2 points (one slightly above the bottom bar, one above the bottom bar and one higher).

Reproduction steps

    const insets = useSafeAreaInsets();
    const realHeight = useAppSelector(selectRealHeight);
    const bottomInsets = Platform.select({android: insets.bottom, default: 0});
    const snapPoints = useMemo(() => [BOTTOM_NAVIGATION_HEIGHT + 45 + 24, realHeight - MINIMIZED_TOP_HEIGHT], [realHeight]);

    // workaround https://github.com/gorhom/react-native-bottom-sheet/issues/1053#issuecomment-1824132757
    useEffect(() => {
        // Check if the bottom sheet is in a closed state (animatedIndex === -1)
        if (position?.value === -1) {
            // If so, reset it to an open state
            bottomSheetRef.current?.snapToIndex(0);
        }
    }, [position, snapPoints]);
    return (
        <BottomSheet
            backgroundStyle={{
                backgroundColor: theme.colors.inverseSurface
            }}
            handleComponent={null}
            ref={bottomSheetRef}
            index={0}
            snapPoints={snapPoints}
            style={{
                zIndex: 21
            }}
            topInset={MINIMIZED_TOP_HEIGHT}
            bottomInset={bottomInsets}
            animatedIndex={position}
            enableContentPanningGesture={true}
            enableOverDrag={false}
            enablePanDownToClose={false}
        >
            <BottomSheetView style={{flex: 1, paddingBottom: BOTTOM_NAVIGATION_HEIGHT + bottomInsets}}>
                <View style={{width: "100%", alignItems: "center"}}>
                    <ModalHandle onPress={() => bottomSheetRef.current?.snapToIndex(0)} />
                </View>
                <TabsProvider
                    defaultIndex={0}
                    onChangeIndex={(i) => {
                        if (!open || tabIndex.current === null) {
                            tabIndex.current = i;
                            return;
                        }
                        tabIndex.current = i;
                        bottomSheetRef.current?.snapToIndex(1);
                    }}
                >
                    <Tabs disableSwipe uppercase tabLabelStyle={{
                        fontSize: theme.fonts.bodyMedium.fontSize,
                        fontFamily: theme.fonts.bodyMedium.fontFamily,
                        fontWeight: theme.fonts.bodyMedium.fontWeight,
                        letterSpacing: theme.fonts.bodyMedium.letterSpacing,
                        color: theme.colors.inverseOnSurface
                    }} style={{backgroundColor: theme.colors.inverseSurface, maxHeight: 50, marginTop: -5}}>
                        <TabScreen label={t("next-title")}>
                            <PlaylistScene/>
                        </TabScreen>
                        <TabScreen label={t("lyrics")}
                                   disabled={typeof song?.lyrics === "undefined" || song?.lyrics?.length === 0}>
                            <LyricsScene lyrics={song?.lyrics}/>
                        </TabScreen>
                        <TabScreen label={t("sheets")} disabled={typeof pdfFile === "undefined"}>
                            <SheetScene pdfFile={pdfFile}/>
                        </TabScreen>
                    </Tabs>
                </TabsProvider>
            </BottomSheetView>
        </BottomSheet>
    );

Reproduction sample

https://snack.expo.dev/@franamu/bottom-sheet---issue-reproduction-template

Relevant log output

When passing these two snapPoints: [139, 777.2571341378348], BottomSheet logs these animatedSnapPoints: 702.0951995849609, 638.142822265625, 0

[mbpictures]

My bad! I forgot to disable enableDynamicSizing