feat: implement hairlinewidth

docs/src/content/docs/reference/unistyles-runtime.mdx

@@ -52,6 +52,7 @@ and use it anywhere in your code, even outside a component.
 | <Badge label="2.4.0" />| navigationBar | \{width: number, height: number\} | Navigation bar dimensions (Android) |
 | <Badge label="2.8.0" />| pixelRatio | number | Pixel density of the device |
 | <Badge label="2.8.0" />| fontScale | number | Font scale of the device |
+| <Badge label="2.9.0" />| hairlineWidth | number | The thinnest width of the platform |
 
 ## Setters
 

examples/expo/src/examples/RuntimeScreen.tsx

@@ -23,7 +23,8 @@ export const RuntimeScreen: React.FunctionComponent = () => {
         statusBar,
         navigationBar,
         pixelRatio,
-        fontScale
+        fontScale,
+        hairlineWidth
     } = UnistylesRuntime
     const { styles, theme } = useStyles(stylesheet)
 
@@ -74,6 +75,14 @@ export const RuntimeScreen: React.FunctionComponent = () => {
                             {fontScale}
                         </Text>
                     </View>
+                    <View style={styles.row}>
+                        <Text style={styles.text(true)}>
+                            Hairline width:
+                        </Text>
+                        <Text style={styles.text(false)}>
+                            {hairlineWidth}
+                        </Text>
+                    </View>
                     <View style={styles.row}>
                         <Text style={styles.text(true)}>
                             Insets:

src/core/UnistylesModule.ts

@@ -40,6 +40,7 @@ export class UnistylesBridgeWeb {
     }
     #pixelRatio = 1.0
     #fontScale = 1.0
+    #hairlineWidth = 0.333333
 
     constructor() {
         if (!isServer) {
@@ -85,6 +86,8 @@ export class UnistylesBridgeWeb {
                         return this.#pixelRatio
                     case 'fontScale':
                         return this.#fontScale
+                    case 'hairlineWidth':
+                        return this.#hairlineWidth
                     case 'useTheme':
                         return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
                     case 'updateTheme':

src/core/UnistylesRuntime.ts

@@ -30,7 +30,8 @@ export class UnistylesRuntime {
             },
             orientation: this.orientation,
             pixelRatio: this.pixelRatio,
-            fontScale: this.fontScale
+            fontScale: this.fontScale,
+            hairlineWidth: this.hairlineWidth
         }
     }
 
@@ -174,6 +175,17 @@ export class UnistylesRuntime {
         return parseFloat(this.unistylesBridge.fontScale.toFixed(2))
     }
 
+    /**
+     * Get the hairline width
+     * @returns - The thinnest width of the platform
+     */
+    public get hairlineWidth() {
+        const pixelRatio = this.pixelRatio
+        const nearestPixel = Math.trunc(pixelRatio * 0.4) || 1
+
+        return nearestPixel / pixelRatio
+    }
+
     /**
      * Get the immersive mode (both status bar and navigation bar hidden (Android))
      * @param isEnabled

src/core/mocks/UnistylesMockedRuntime.ts

@@ -28,7 +28,8 @@ export class UnistylesMockedRuntime {
             },
             orientation: this.orientation,
             pixelRatio: this.pixelRatio,
-            fontScale: this.fontScale
+            fontScale: this.fontScale,
+            hairlineWidth: this.hairlineWidth
         }
     }
 
@@ -90,6 +91,10 @@ export class UnistylesMockedRuntime {
         return 1.0
     }
 
+    public get hairlineWidth() {
+        return 0.333333
+    }
+
     public get fontScale() {
         return 1.0
     }