React Native Responsive Helper Function

responsive.js

import { Dimensions } from 'react-native';

/**
 * Wrap a style rule in this responsive function to process dimensions
 * @param {object} Object of queries containing style objects
 */
const responsive = (queries, dim = 'window') => {
  const { width, height } = Dimensions.get(dim);
  let styles = [];

  Object.keys(queries).forEach(query => {
    const style = queries[query];

    let failedRules = query.split('and').map(v => {
      let [rule, value] = v.split(':').map(s => s.trim());

      // Return true to pass rule, false to fail
      switch (rule) {
        case 'minWidth':
          return width >= value;
        case 'maxWidth':
          return width <= value;
        case 'minHeight':
          return height >= value;
        case 'maxHeight':
          return height <= value;
        case '':
          return true;
        default:
          return false;
      }
    }).filter(v => v !== true);

    // If all rules were met (failedRules array is empty), add to array
    if (!failedRules.length) {
      styles.push(style);
    }
  });

  return Object.assign(...styles);
};

export default responsive;