Not all media query types appear in useMedia hook

[jordmccord]

Description

Expect an media query values added to the config under mediaQueries appear typed in the useMedia hook

CodeSandbox/Snack link

/

Steps to reproduce

1. Add values to the mediaQueries section of the gluestack-ui.config.ts file e.g:

  mediaQueries: {
      base: '@media screen and (min-width: 0) and (max-width: 399px)',
      xs: '@media screen and (min-width: 400px) and (max-width: 479px)',
      sm: '@media screen and (min-width: 480px) and (max-width: 767px)',
      md: '@media screen and (min-width: 768px) and (max-width: 991px)',
      lg: '@media screen and (min-width: 992px) and (max-width: 1279px)',
      xl: '@media screen and (min-width: 1280px)',
    },

2. Use the useMedia hook and try and use the xs value.
3. You should see a TypeScript error Property 'xs' does not exist on type 'Partial<{ readonly base: boolean; readonly sm: boolean; readonly md: boolean; readonly lg: boolean; readonly xl: boolean; }>'

gluestack-ui Version

@gluestack-style/react@1.0.56, @gluestack-ui/themed@1.1.26

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[surajahmed]

@jordmccord Thanks for reporting this. We'll have a look.