[v4] | [v2] Manually not close when I try first

[erdincakdogan]

Bug

Library	Version
"@gorhom/bottom-sheet": "^4",
"react-native": "0.74.2"
"react-native-reanimated": "~3.10.1"
"react-native-gesture-handler": "~2.16.1"

Steps To Reproduce

1. 2.

Describe what you expected to happen:

When I close BottomSheet manually, it does not close completely the first time on Android. But when you do the same operation a second time, it works. What would be the reason.

import React, { useRef, useState, useCallback, useEffect } from "react"; import { View, Text, Keyboard, TextInput, Dimensions, StyleSheet, Alert } from "react-native"; import {useSafeAreaInsets } from 'react-native-safe-area-context'; import ButtonCustom from "../../components/ButtonCustom"; import BottomSheet from "@gorhom/bottom-sheet"; import { BlurView } from "expo-blur"; import LoginForm from "../LoginScreen/LoginForm"; import VerifyOTPForm from "../VerifyOTPForm/VerifyOTPForm"; import ForgotPasswordForm from "../ForgotPasswordScreen/ForgotPasswordForm"; import colors from "../../constant/colors"; import { TYPOGRAPHY } from "../../constant/typography"; import Logo from "../../assets/svg/logo.svg";

enum SheetContent { LOGIN, OTP, FORGOT_PASSWORD, }

const WelcomeScreen: React.FC<{ navigation: any }> = ({ navigation }) => { const sheetRef = useRef(null); const emailInputRef = useRef(null); const [isSheetOpen, setIsSheetOpen] = useState(false); const [currentSheetContent, setCurrentSheetContent] = useState<SheetContent | null>(null); const insets = useSafeAreaInsets();

const screenHeight = Dimensions.get('window').height; const [snapPoints] = useState(['100%']); const handleSheetChanges = useCallback((index) => { if (index === -1) { setIsSheetOpen(false); Keyboard.dismiss(); } else { setIsSheetOpen(true); } }, []);

const openSheet = useCallback((content: SheetContent) => { setCurrentSheetContent(content); sheetRef.current?.expand(); setIsSheetOpen(true); }, []);

const openLoginSheet = useCallback(() => { openSheet(SheetContent.LOGIN); }, [openSheet]);

const closeSheet = useCallback(() => { Keyboard.dismiss(); sheetRef.current?.close(); setIsSheetOpen(false); setCurrentSheetContent(null); }, []);

const handleLoginSuccess = useCallback(() => { Keyboard.dismiss(); openSheet(SheetContent.OTP); }, [openSheet]);

const handleOTPSuccess = useCallback(() => { closeSheet(); navigation.navigate('HomeScreen');

}, [navigation, closeSheet]);

const openForgotPasswordSheet = useCallback(() => { openSheet(SheetContent.FORGOT_PASSWORD); }, [openSheet]); const isAnySheetOpen = isSheetOpen;

return (

Please press the button to login openSheet(SheetContent.LOGIN)} style={styles.welcomeButton} titleStyle={{ color: colors.button.text, size: TYPOGRAPHY.fontSize.bodySmall }} /> {isAnySheetOpen && ( )} {currentSheetContent === SheetContent.LOGIN && ( )} {currentSheetContent === SheetContent.OTP && ( )} {currentSheetContent === SheetContent.FORGOT_PASSWORD && ( )}

); }; const styles = StyleSheet.create({ safecontainer: { flex: 1, backgroundColor: colors.background, }, container: { flex: 1, flexDirection: 'column', }, background: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: colors.background, padding: 20, marginBottom:179 }, logo: { width: 102, height: 102, marginBottom: 29, }, welcomeButton: { width: '90%', backgroundColor: colors.button.background, justifyContent: 'center', alignItems: 'center', borderRadius: 8, color: colors.buttonSecondary.text, borderColor: 'rgba(113, 84, 207, 1)', borderWidth: 1, borderStyle: 'solid' }, welcomeHeader: { fontSize: TYPOGRAPHY.fontSize.headingNormal, lineHeight:TYPOGRAPHY.lineHeight.headingNormal, color: colors.blackone, fontWeight: '400', fontFamily: TYPOGRAPHY.fontFamily.regular,

}, welcomeText: { fontSize: TYPOGRAPHY.fontSize.bodySmall, lineHeight: TYPOGRAPHY.lineHeight.bodyNormal, color: colors.subtitle, fontFamily: TYPOGRAPHY.fontFamily.regular, marginBottom: 16

}, blurBackground: { ...StyleSheet.absoluteFillObject, backgroundColor: colors.background,

}, backgroundImage: { flex: 1, resizeMode: 'contain',

}, handleIndicatorStyle: { backgroundColor: colors.secondary, }, });

export default WelcomeScreen; ![Uploading Screenshot_20240630_195540.png…]()

[github-actions[bot]]

@erdincakdogan: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

[rmrantunes]

This is a behavior I'm facing too, but with BottomSheetModal

[mattlennon3]

Parent comment is still quite badly formatted, maybe that's why this isn't seeing much traction? @erdincakdogan can you improve it?

I see the same, but for iOS

[mattlennon3]

For me, if I pass a function to the BottomSheetModal onAnimate prop, I see the problem. If I pass it undefined, it stops happening. Very weird!

[sa1utep1z]

+1

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