Added improvements for responsive methods, released version 0.0.2

Author: Abraham Rosa Vargas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-responsive-pixels",
-  "version": "0.0.1-beta.7.7",
+  "version": "0.0.2",
   "description": "A React Native library for adaptive pixel scaling.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -177,4 +177,4 @@
     "type": "library",
     "version": "0.41.0"
   }
-}
+}

src/__tests__/dimensions.test.ts

@@ -9,40 +9,49 @@ const mockDimensions = {
 };
 
 describe('Responsive utility functions', () => {
+  let consoleWarnSpy: jest.SpyInstance;
+
   beforeAll(() => {
     // Mock Dimensions to return fixed values
     Dimensions.get = jest.fn(() => mockDimensions);
+    // Mock console.warn to suppress warnings during tests
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+    consoleWarnSpy.mockRestore();
   });
 
-  it('should return an integer value for pixel sizes', () => {
+  it('should return a numeric value for pixel sizes', () => {
     const value = 10;
     const result = resPx(value);
 
-    expect(Number.isInteger(result)).toBe(true);
+    expect(typeof result).toBe('number');
     expect(result).toBeGreaterThanOrEqual(0);
   });
 
-  it('should return an integer value for text sizes', () => {
+  it('should return a numeric value for text sizes', () => {
     const pixels = 20;
     const result = resText(pixels);
 
-    expect(Number.isInteger(result)).toBe(true);
+    expect(typeof result).toBe('number');
     expect(result).toBeGreaterThanOrEqual(0);
   });
 
-  it('should return an integer value for platform-specific size', () => {
+  it('should return a numeric value for platform-specific size', () => {
     Platform.OS = 'ios';
     const iosSize = 30;
     const androidSize = 40;
     const resultIos = resPlatformSize(iosSize, androidSize);
 
-    expect(Number.isInteger(resultIos)).toBe(true);
+    expect(typeof resultIos).toBe('number');
     expect(resultIos).toBeGreaterThanOrEqual(0);
 
     Platform.OS = 'android';
     const resultAndroid = resPlatformSize(iosSize, androidSize);
 
-    expect(Number.isInteger(resultAndroid)).toBe(true);
+    expect(typeof resultAndroid).toBe('number');
     expect(resultAndroid).toBeGreaterThanOrEqual(0);
   });
 
@@ -54,8 +63,4 @@ describe('Responsive utility functions', () => {
     expect(resPlatformSize(NaN, -30)).toBe(0);
     expect(resPlatformSize(-10, NaN)).toBe(0);
   });
-
-  afterAll(() => {
-    jest.restoreAllMocks();
-  });
 });

src/index.tsx src/index.ts

@@ -1,8 +1,7 @@
 import { Dimensions, Platform, PixelRatio } from 'react-native';
 
 const windowDimensions = Dimensions.get('window');
-const { height: windowScreenHeight, width: windowScreenWidth } =
-  windowDimensions;
+const { height: windowScreenHeight, width: windowScreenWidth } = windowDimensions;
 
 // Reference dimensions for a variety of devices
 const referenceDimensions = [
@@ -33,7 +32,6 @@ const aspectRatioHeight = windowScreenHeight / referenceHeight;
 const adjustedRatio = Math.min(aspectRatioWidth, aspectRatioHeight) * minRatio;
 
 // Optional scale factor (adjustable as needed)
-// This can be used to further adjust the final ratio
 const scaleFactor = 1.0;
 
 // Calculate the final ratio considering the scale factor
@@ -66,28 +64,48 @@ const isValidValue = (value: number): boolean => {
   return valid;
 };
 
+/**
+ * Calculates a moderate scaling value.
+ * @param {number} value - The original value to scale.
+ * @param {number} factor - The scaling factor (default is 0.5 for moderate scaling).
+ * @returns {number} The scaled value.
+ */
+const moderateScale = (value: number, factor: number = 0.5): number => {
+  return value + (Math.round(value * ratio) - value) * factor;
+};
+
 const responsivePixels = (value: number): number => {
-  if (!isPlatformSupported()) return value;
-  if (!isValidValue(value)) return 0;
+  if (!isPlatformSupported()) {
+    return value;
+  }
+  if (!isValidValue(value)) {
+    return 0;
+  }
 
-  return Math.round(value * ratio);
+  return moderateScale(value);
 };
 
 const textResponsive = (value: number): number => {
-  if (!isPlatformSupported()) return value;
-  if (!isValidValue(value)) return 0;
+  if (!isPlatformSupported()) {
+    return value;
+  }
+  if (!isValidValue(value)) {
+    return 0;
+  }
 
   const scaleWithWidth = windowScreenWidth / referenceWidth; // Base size for text
   const size = value * scaleWithWidth;
 
-  const adjustedSize = PixelRatio.roundToNearestPixel(size) - 3;
-
-  return Math.round(adjustedSize);
+  return PixelRatio.roundToNearestPixel(size);
 };
 
 const getSizeForPlatform = (iosSize: number, androidSize: number): number => {
-  if (!isPlatformSupported()) return iosSize;
-  if (!isValidValue(iosSize) || !isValidValue(androidSize)) return 0;
+  if (!isPlatformSupported()) {
+    return iosSize;
+  }
+  if (!isValidValue(iosSize) || !isValidValue(androidSize)) {
+    return 0;
+  }
 
   return responsivePixels(Platform.OS === 'ios' ? iosSize : androidSize);
 };

yarn.lock

@@ -14735,7 +14735,7 @@ __metadata:
 
 "typescript@patch:[email protected]#~builtin<compat/typescript>":
   version: 5.5.3
-  resolution: "typescript@patch:typescript@npm%3A5.5.3#~builtin<compat/typescript>::version=5.5.3&hash=14eedb"
+  resolution: "typescript@patch:typescript@npm%3A5.5.3#~builtin<compat/typescript>::version=5.5.3&hash=29ae49"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
@@ -14745,7 +14745,7 @@ __metadata:
 
 "typescript@patch:typescript@^4.6.4 || ^5.2.2#~builtin<compat/typescript>":
   version: 5.5.4
-  resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin<compat/typescript>::version=5.5.4&hash=14eedb"
+  resolution: "typescript@patch:typescript@npm%3A5.5.4#~builtin<compat/typescript>::version=5.5.4&hash=29ae49"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver