Sheet not opening in `StrictMode`

[Chrishuwei]

I am trying this module in my page. However, I cannot see the sheet in view because we set transform value is css. Also, we do not have this behavior in the release environment (I deployed my website through GCP).

One more interesting thing is if I zoom in and out by cmd +/-, then I can see the sheet rendering in view when I am in development mode.

Is this a known issue of this module? Or is there any workaround to prevent this issue? Thank you.

CODE:
'use client';
import { Sheet } from 'react-modal-sheet';
import { useState } from 'react';

export default function Container() {

const [isOpen, setOpen] = useState(false);

return (
    <div>
        <div>this is container</div>
        <button onClick={() => setOpen(true)}>Open sheet</button>

        <Sheet
            isOpen={isOpen}
            onClose={() => setOpen(false)}
            snapPoints={[-50, 0.5, 200, 0]}
            initialSnap={1}
        >
            <Sheet.Container>
                <Sheet.Header />
                <Sheet.Content>
                    <div style={{ 'color': 'black' }}>We will have product content here</div>
                </Sheet.Content>
            </Sheet.Container>
            <Sheet.Backdrop />
        </Sheet>
    </div>
)

}

[Temzasse]

Hi @Chrishuwei 👋🏻

This sounds like it could be a React StrictMode related issue. For some reason the motion library that react-modal-sheet relies on struggles with StrictMode causing the opening animation of the sheet to not trigger correctly. The reason things work for you in production is because StrictMode is only enabled in development mode.

Unfortunately I haven't been able to figure out a workaround yet. Currently the easiest fix is to just turn off/remove React StrictMode.

[Temzasse]

I updated the title to reflect the real root cause of the problem.

I'll keep this issue open so that other devs that encounter the same issue can see it and maybe someone has an idea how to mitigate the problem. I currently don't have much time to investigate this problem.

[xsjcTony]

Are you using React 18 or 19?
I don't have any issue with StrictMode enabled in React 18

[Temzasse]

I'm using React 19. As part of the v4 refactoring of react-modal-sheet I also updated the example app that I use for local development to use v19 and this issue happens there if I enable StrictMode.

[amXCVI]

This issue is still relevant. I use React 19 and StrictMode.
Maybe someone found a workaround?

[sergeyalikin]

Same. I moved from React 18 to 19, a problem arose.
Until now, I have not found a solution. I don’t want to disable Strict Mode, so I will be grateful if you succeed in correcting it!

I also noticed that it does not set the value of the 'transition: none' in Strict Mode. This is probably due to repeated rendering.

Most likely, he draws react-modal-sheet-container for the second time and sets it an old value and does not update it.

[DzmityKozich]

I implemented opening a Sheet when navigating to a page (the Sheet acted like a new page that was a child of the main one and opened on top) and faced this problem. In my case, even removing StrictMode didn’t help.
I used:

• React (v19)
• React-router (v7)

In my case, the solution looked like this:

Main component

const MainComponent = () => {
  return (
    <>
      <NavLink to="sheet-modal">Main Component</NavLink>
      <Outlet />
    </>
  );
};

Router

export const router = createBrowserRouter([
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: 'sheet-modal',
        component: SheetModal,
      },
    ],
  },
]);

The page with the Sheet

const SheetModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsOpen(true);
    }, 1);
  }, []);

  return (
    <>
      {isOpen && (
        <Sheet isOpen onClose={handleClose} snapPoints={snapPoints}>
          <Sheet.Container>
            <Sheet.Header>
              <h1>{title}</h1>
            </Sheet.Header>

            <Sheet.Content>
              <div>Content</div>
            </Sheet.Content>
          </Sheet.Container>
          <Sheet.Backdrop />
        </Sheet>
      )}
    </>
  );
};

The solution with using useEffect and a timeout delayed by 1 millisecond I found in another issue – initialSnap -34px bug. But it doesn’t fully work without an extra check

      {isOpen && (
        <Sheet isOpen onClose={handleClose} snapPoints={snapPoints}>
		...
        </Sheet>
      )}

Maybe someone will find this useful.