useBreakpointValue crashes app on mobile Safari ?

Bug report

Describe the bug

I need to have breakpoint based values for the size propety on a Drawer and since responsive properties aren’t available for the size on Drawer ( featured requested here in this issue ) i decided to use useBreakPointValue, but turns out it’s breaking my application on mobile with this error:

TypeError: mediaQuery.addEventListener is not a function. ( in 'mediaQuery.addEventlistener("change", handleChange), 'mediaQuery.addEventListener' is undefined)

It does work well on the desktop browser tough.

To reproduce

• install chakra-ui 1.0.0-rc.5.
• add useBreakPointValue inside of a component
• open website on safari mobile, i’m using iOS 13.4.1

const size = useBreakpointValue({ base: 'full', sm: 'xs' })

Expected behavior

Screenshots

System information

• OS: iOS 13.3.1

[ljosberinn]

Someone patched Chakra with the patch-package tool over here but it’s a different issue - you might be able to work around that. Else I’m afraid you can only use the fix locally.

[hems]

Did you happen to see this? MIght help organizing your theme more, the docs just illustrate using inline extendTheme({...huge object here }) for the sake of brevity.

Yes, i did see that! Thanks for linking.

Since it’s my first project using chakra i decided to download the theme pack to understand a bit more how the theme is implemented and hopefully keep the same standards.

then later i believe i should move into using extendTheme and only do what’s needed, but at this stage i believe i’m still figuring out how it works and it’s very interesting to read the default implementation.