import { useWindowDimensions } from 'react-native' ; import isNil from 'lodash.isnil' ; type QueryKeys = 'maxWidth' | 'minWidth' | 'maxHeight' | 'minHeight' | 'orientation' ; type SubQuery = { [ queryKey in QueryKeys ] ? : number | string ; } ; type Query = Array < SubQuery > ; export function useMediaQuery ( query ) { const dims = useWindowDimensions ( ) ; const height = dims ?. height ; const width = dims ?. width ; return iterateQuery ( query , height , width ) ; } function queryResolver ( query , width ? , height ? ) { for ( const queryKey in query ) { if ( ! calculateQuery ( queryKey , query [ queryKey ] , height , width ) ) { return false ; } } return true ; } function iterateQuery ( query , height ? , width ? ) { const queryResults = [ ] ; if ( Array . isArray ( query ) ) { query . forEach ( ( subQuery ) => { queryResults . push ( queryResolver ( subQuery , width , height ) ) ; } ) ; } else { queryResults . push ( queryResolver ( query , width , height ) ) ; } return queryResults ; } function calculateQuery ( key , val ? , height ? , width ? ) { let retval ; if ( isNil ( width ) || isNil ( height ) || isNil ( val ) ) { return ; } switch ( key ) { case 'maxWidth' : retval = ! isNil ( val ) ? width <= val : undefined ; break ; case 'minWidth' : retval = ! isNil ( val ) ? width >= val : undefined ; break ; case 'maxHeight' : retval = ! isNil ( val ) ? height <= val : undefined ; break ; case 'minHeight' : retval = ! isNil ( val ) ? height >= val : undefined ; break ; case 'orientation' : if ( ! isNil ( val ) ) { if ( width > height ) { retval = val === 'landscape' ; } else { retval = val === 'portrait' ; } } break ; default : break ; } return retval ; }