React-Native responsive StyleSheet

styling.ts

import {Dimensions, PixelRatio, StyleSheet} from 'react-native';

const {width, height} = Dimensions.get('window');

const PROPERTIES_DEPENDING_ON_WIDTH = [
  'width',
  'marginLeft',
  'marginRight',
  'marginHorizontal',
  'paddingLeft',
  'paddingRight',
  'paddingHorizontal',
  'borderLeftWidth',
  'borderRightWidth',
  'left',
  'right',
  'minWidth',
  'maxWidth',
];

const PROPERTIES_DEPENDING_ON_HEIGHT = [
  'height',
  'marginTop',
  'marginBottom',
  'marginVertical',
  'paddingTop',
  'paddingBottom',
  'paddingVertical',
  'borderTopWidth',
  'borderBottomWidth',
  'top',
  'bottom',
  'minHeight',
  'maxHeight',
  'lineHeight',
];

const PROPERTIES_DEPENDING_ON_NEITHER = [
  'fontSize',
  'margin',
  'padding',
  'borderWidth',
  'borderRadius',
  'borderTopLeftRadius',
  'borderTopRightRadius',
  'borderBottomLeftRadius',
  'borderBottomRightRadius',
];

const BASE_WIDTH = 375; // based on iPhone 6-8 width
const BASE_HEIGHT = 667; // based on iPhone 6-8 height

class StylingHelper {
  static setGuidelineBaseDimensions(
    guidelineBaseWidth = BASE_WIDTH,
    guidelineBaseHeight = BASE_HEIGHT,
  ) {
    const scalingFactor = 1;
    const horizontalFactor = (width / guidelineBaseWidth) * scalingFactor;
    const verticalFactor = (height / guidelineBaseHeight) * scalingFactor;
    const adimensionalFactor = (horizontalFactor + verticalFactor) / 2;

    PROPERTIES_DEPENDING_ON_WIDTH.forEach(key => {
      StyleSheet.setStyleAttributePreprocessor(key, value => {
        if (typeof value === 'number') {
          return PixelRatio.roundToNearestPixel(value * horizontalFactor);
        }

        return value;
      });
    });

    PROPERTIES_DEPENDING_ON_HEIGHT.forEach(key => {
      StyleSheet.setStyleAttributePreprocessor(key, value => {
        if (typeof value === 'number') {
          return PixelRatio.roundToNearestPixel(value * verticalFactor);
        }

        return value;
      });
    });

    PROPERTIES_DEPENDING_ON_NEITHER.forEach(key => {
      StyleSheet.setStyleAttributePreprocessor(key, value => {
        if (typeof value === 'number') {
          return PixelRatio.roundToNearestPixel(value * adimensionalFactor);
        }

        return value;
      });
    });
  }
}

export default StylingHelper;