React | Material-Ui | Swipeable Drawer not opening with swipe

user_8089376 0
Viewed 1633

I'm working with a new app and trying to create a "menu" so when I swype from the left side of the screen it opens.
On a codeSandBox it works. Here is the running example (run it on mobile) It works for me, but when I try to run it locally it doesn't.
It is the exact same code I have on both codesandbox and locally.

I've noticed that my local: My local

Is different from the codesandbox. The codesandbox has this part. Is there a reason why this React isn't writing this part? CodeSandBox

Here is a list of my dependencies:

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.10.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"firebase": "^7.19.0",
"fontsource-roboto": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"

Am I missing something? I couldn't find it in the documentation, and because it works on the codesandbox, I'm almost sure it is my fault somewhere, but I can't seem to get it. Thanks in advance!

material-ui reactjs
3 Answers

Funnily, it worked when you changed from desktop to mobile, but not "reloading" from an "iOS" device from chrome.

It does works with other emulators and it works if you change from web to mobile (and iOS is preset).

I don't know if this is expected behaviour. Even with the specific lines on the documentation, it doesn't works.

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />
user_80893760

The SwipableDrawer doesn't work with the temporary or persistent variants of the Drawer. If you remove that prop it should work fine.

If you need to hide the backdrop you can do this:

            <SwipeableDrawer
                sx={{
                    '& .MuiBackdrop-root': {
                        display: 'none',
                    },
                }}
                anchor="left"
                open={ sidebarOpen }
                onClose={ () => dispatch( toggleSidebar() ) }
                onOpen={ () => dispatch( toggleSidebar() ) }
                BackdropProps={{ invisible: true }}
            >
                content
            </SwipeableDrawer>
user_3790630

Swipe to open is disabled by default on IOS. Set disableSwipeToOpen prop to false:

disableSwipeToOpen={false}
user_141948000
Related