react-native-unistyles/lib/module/hooks/useMedia.native.js

Level up your React Native StyleSheet

"use strict";

import { useEffect, useLayoutEffect, useState } from 'react';
import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
import { isUnistylesMq, isValidMq, parseMq } from '../utils';
export const useMedia = config => {
  const computeIsVisible = () => {
    const maybeMq = config.mq;
    if (!isUnistylesMq(maybeMq)) {
      console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`);
      return false;
    }
    const parsedMq = parseMq(maybeMq);
    if (!isValidMq(parsedMq)) {
      console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`);
      return false;
    }
    const {
      width,
      height
    } = UnistylesRuntime.screen;
    if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
      return false;
    }
    if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
      return false;
    }
    if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
      return false;
    }
    if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
      return false;
    }
    return true;
  };
  const [isVisible, setIsVisible] = useState(computeIsVisible());
  useEffect(() => {
    setIsVisible(computeIsVisible());
  }, [config.mq]);
  useLayoutEffect(() => {
    // @ts-expect-error - this is hidden from TS
    const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
      if (dependencies.includes(UnistyleDependency.Breakpoints)) {
        setIsVisible(computeIsVisible());
      }
    });
    return () => {
      removeChangeListener();
    };
  }, [config.mq]);
  return {
    isVisible
  };
};
//# sourceMappingURL=useMedia.native.js.map