Increasing snapPoint height shows bottom sheet when closed

[MorganTrudeau]

Hello I am having an issue with changing the snapPoint values. If I increase the height of an "open-state" snap point the bottom sheet will show. This happens even when I am at the "closed-state" snapPoint (0).

ex.

Starting with snap points [0, 100, 100] and initialSnap 0

now I change to [0, 300, 300]. My current snapPoint is 0 but 200px of the bottom sheet will now show.

I have created a sample app to debug. Using the debug app, just input a bigger height in the text input and press Set height.

Looks like this may be related... https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/45

Thanks.

import React, {useState, useRef} from "react";
import {
	View,
	TouchableOpacity,
	StyleSheet,
	Text,
	TextInput
} from "react-native";
import BottomSheet from "reanimated-bottom-sheet";

const Button = ({text, onPress}) => (
	<TouchableOpacity onPress={onPress} style={styles.button}>
		<Text>{text}</Text>
	</TouchableOpacity>
);

const renderContent = () => {
	return (
		<View
			style={{
				width: "100%",
				backgroundColor: "blue",
				height: 1000,
				borderRadius: 10
			}}
		/>
	);
};

const BottomSheetTest = () => {
	const bRef = useRef();
	const [bottomProps, setBottomProps] = useState({
		renderContent,
		initialSnap: 0,
		snapPoints: [0, 200, 200]
	});
	const showBottomSheet = snapPoint => bRef.current.snapTo(snapPoint);
	const closeBottomSheet = () => bRef.current.snapTo(0);

	const [height, setHeight] = useState("200");

	const setSnapPoints = () =>
		setBottomProps({
			...bottomProps,
			snapPoints: [0, parseInt(height), parseInt(height)]
		});

	return (
		<View
			style={{
				flex: 1,
				backgroundColor: "white"
			}}
		>
			<View style={{flexDirection: "row"}}>
				<Button onPress={() => showBottomSheet(2)} text={"Open"} />
				<Button onPress={() => closeBottomSheet()} text={"Close"} />
			</View>
			<TextInput
				onChangeText={val => setHeight(val)}
				value={height}
				style={styles.input}
			/>
			<Button onPress={() => setSnapPoints()} text={"Set height"} />
			<BottomSheet ref={bRef} {...bottomProps} />
		</View>
	);
};

const styles = StyleSheet.create({
	button: {
		flex: 1,
		height: 50,
		maxHeight: 50,
		margin: 10,
		backgroundColor: "teal"
	},
	input: {
		margin: 10,
		flex: 1,
		maxHeight: 60,
		borderBottomWidth: 2,
		borderBottomColor: "teal"
	}
});

export default BottomSheetTest;

[Filetes97]

I have the same problem... :(

[muhlenbrock]

E.g. [300, 200, 0]. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom. Note: Array values must be in descending order.

[MorganTrudeau]

Btw I am setting opacity of bottomsheet to zero when callbackNode === 1 to workaround this.

[shahin963]

I am having the same issue