[v5] On web the bottom sheet modal only works once

[TNAJanssen]

Bug

When creating the modal and loading it will work, when you close or dismiss the modal it will set the transform Y.
If you try to open the modal again it will not open, and the transform will still be incorrect.

Environment info

Library	Version
@gorhom/bottom-sheet	5.0.0-alpha4
react-native	0.72.4
react-native-reanimated	3.3.0
react-native-gesture-handler	2.12.0

Steps To Reproduce

1. Create bottom sheet modal
2. Open app in web
3. Click button to open modal
4. Close modal
5. Click button to open modal it will not show

Describe what you expected to happen:

1. Show the modal again

Reproducible sample code

Hard to do because there is no web in the snack, will try to make one later

[MustafaAlsihati]

I'm using @gorhom/bottom-sheet@5.0.0-alpha4 with Solito (Next.js), I found that sometimes transform value be broken

The first time the page renders it fine, leave the page and come back, the bottom sheet will not be visible

after investigation I found that transform value will start with double the size of screen height, so when it expand it will still be outside or visible screen

I'm still trying to find a solution for it, not sure if it's the exact same issue as you have but hope it leads you to something.

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

[viljark]

Not stale, I'm experiencing the same issue.

[jorgelu15]

i'm experiencing the same issue too but in enviroment mobile, some solution? in my case the bottomsheet don't open, in some times open, but 2th time don't work

[gorhom]

Will look into it today!

[gorhom]

@TNAJanssen @MustafaAlsihati @viljark i tried to repo the issue on latest release alpha6, but i can not reproduce it ? could someone provide a repo sample code please.

Screen.Recording.2024-01-04.at.18.45.38.mov

[jorgelu15]

i think that it's same bug, code demo:

const Mapa = ({ }) => {
const [open, setOpen] = useState(false);
  let snapPoints = useMemo(() => ['5%', '60%'], []);
    // callbacks
    const handleSheetChanges = useCallback((index) => {
        console.log(index)
    }, []);

return (
<>
<Button onPress={() => setOpen(true)}>click</Button>
{open && (
<BottomSheet
    ref={bottomSheetRef}
    index={1}
    snapPoints={snapPoints}
    onChange={handleSheetChanges}
    enablePanDownToClose={true}
>
                        <BottomSheetScrollView><Text>Hello world</BottomSheetScrollView>
                    </BottomSheet>
)
</>
)


}

"@gorhom/bottom-sheet": "^4",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native": "0.72.3",

[benjaminharringtonrose]

Unfortunately this is happening for me on the latest version in react-native-web - 5.0.6 :/