fix(platform): nesting and non-numeric values for platform keys

release-npm

.github/workflows/push.yml

@@ -12,7 +12,7 @@ jobs:
       contents: write
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
       - run: bun install
       - run: bun run build
       - name: Test 📱

index.ts

@@ -292,7 +292,11 @@ export const responsiveProperty = (
   }
 
   if (!isArray && valueType === 'object' && hasPlatformKey(value as PlatformStyleProp<keyof NativeStyle>)) {
-    return app.value((value as any)[Platform.OS], app.breakpoint, app.orientation)
+    const valueByPlatform = (value as any)[Platform.OS]
+    if (typeof valueByPlatform !== 'number') {
+      return responsiveProperty(property, valueByPlatform as OrientationStyleProp<keyof NativeStyle>, nestingFunction)
+    }
+    return app.value(valueByPlatform, app.breakpoint, app.orientation)
   }
 
   // Recursively scale nested values like shadowOffset.

package.json

@@ -13,37 +13,37 @@
     "copy": "cpx 'dist/**/*' app/node_modules/responsive-react-native/dist --watch",
     "build:watch": "esbuild index.ts --watch --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react --external:mobx",
     "test": "jest && bun run test:types",
-    "test:types": "cd test && tsc && cd types && tsc",
+    "test:types": "tsc --project ./test/tsconfig.json && tsc --project ./test/types/tsconfig.json",
     "test:watch": "jest --watchAll",
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
     "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write"
   },
   "devDependencies": {
-    "@react-native-community/cli": "^13.6.9",
-    "@react-native/babel-preset": "^0.74.84",
-    "@react-native/eslint-config": "^0.74.84",
-    "@react-native/typescript-config": "^0.74.84",
+    "@react-native-community/cli": "^14.0.0",
+    "@react-native/babel-preset": "^0.75.1",
+    "@react-native/eslint-config": "^0.75.1",
+    "@react-native/typescript-config": "^0.75.1",
     "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.5.1",
+    "@testing-library/react-native": "^12.5.3",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^22.3.0",
     "@types/react": "^18.3.3",
     "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.23.0",
     "eslint": "8.57.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
-    "mobx": "^6.12.3",
+    "mobx": "^6.13.1",
     "mobx-react-lite": "^4.0.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-native": "^0.74.2",
+    "react-native": "^0.75.1",
     "react-test-renderer": "^18.3.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": ">= 18",

test/basic.test.tsx

@@ -416,22 +416,40 @@ test('Selects different values based on current platform.', () => {
     breakpoint: {
       width: { android: 10, ios: 20 },
     },
+    monospaceText: {
+      fontFamily: { ios: 'Courier', android: 'monospace' },
+    },
+    textNested: {
+      fontFamily: { ios: ['Courier', 'Consolas'], android: { small: 'monospace' } },
+    },
   })
 
   expect(breakpointStyles.breakpoint.width).toBe(15)
+  expect(breakpointStyles.monospaceText.fontFamily).toBe('Courier')
+  expect(breakpointStyles.textNested.fontFamily).toBe('Courier')
 
   setWidth(420)
   updateBreakpoint()
 
   expect(getBreakpoint()).toBe('medium')
+  expect(getOrientation()).toBe('portrait')
 
   expect(breakpointStyles.breakpoint.width).toBe(20)
 
   Platform.OS = 'android'
 
   expect(breakpointStyles.breakpoint.width).toBe(10)
+  expect(breakpointStyles.monospaceText.fontFamily).toBe('monospace')
+  expect(breakpointStyles.textNested.fontFamily).toBe('monospace')
 
   Platform.OS = 'ios'
+  setWidth(900)
+
+  expect(getOrientation()).toBe('landscape')
+  expect(breakpointStyles.monospaceText.fontFamily).toBe('Courier')
+  expect(breakpointStyles.textNested.fontFamily).toBe('Consolas')
+
+  setWidth(420)
 })
 
 test('Any type of component inside Rerender will rerender.', () => {

test/tsconfig.json

@@ -1,4 +1,8 @@
 {
   "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "emitDeclarationOnly": false
+  },
   "include": ["*"]
 }

test/types/tsconfig.json

@@ -1,4 +1,8 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "emitDeclarationOnly": false
+  },
   "include": ["*"]
 }