fix: passing tw output to external libraries

__tests__/use-tailwind.native.tsx

@@ -47,7 +47,7 @@ describe("native", () => {
       initialProps: { platform: "native" },
     });
 
-    expect(result.current).toEqual([]);
+    expect(result.current).toEqual({});
   });
 
   test("will return nothing is no styles match", () => {
@@ -56,7 +56,7 @@ describe("native", () => {
       initialProps: { platform: "native" },
     });
 
-    expect(result.current).toEqual([]);
+    expect(result.current).toEqual({});
   });
 
   test("will return matched styles", () => {
@@ -75,7 +75,7 @@ describe("native", () => {
       },
     });
 
-    expect(result.current).toEqual([{ fontWeight: "700" }]);
+    expect(result.current).toEqual({ fontWeight: "700" });
   });
 
   test("can flatten properties", () => {
@@ -138,11 +138,10 @@ describe("native", () => {
       },
     });
 
-    expect(result.current).toEqual([
-      { width: "100%" },
-      { maxWidth: 640 },
-      { maxWidth: 768 },
-    ]);
+    expect(result.current).toEqual({
+      width: "100%",
+      maxWidth: 768,
+    });
   });
 
   test("media - platform prefix", () => {
@@ -164,6 +163,6 @@ describe("native", () => {
       },
     });
 
-    expect(result.current).toEqual([{ width: 1 }]);
+    expect(result.current).toEqual({ width: 1 });
   });
 });

__tests__/use-tailwind.web.tsx

@@ -51,7 +51,7 @@ describe("web", () => {
       initialProps: { platform: "native" },
     });
 
-    expect(result.current).toEqual([]);
+    expect(result.current).toEqual({});
   });
 
   test("will return nothing is no styles match", () => {
@@ -60,7 +60,7 @@ describe("web", () => {
       initialProps: { platform: "native" },
     });
 
-    expect(result.current).toEqual([]);
+    expect(result.current).toEqual({});
   });
 
   test("will return matched styles", () => {
@@ -79,7 +79,7 @@ describe("web", () => {
       },
     });
 
-    expect(result.current).toEqual([{ fontWeight: "700" }]);
+    expect(result.current).toEqual({ fontWeight: "700" });
   });
 
   test("can flatten properties", () => {
@@ -142,10 +142,9 @@ describe("web", () => {
       },
     });
 
-    expect(result.current).toEqual([
-      { width: "100%" },
-      { maxWidth: 640 },
-      { maxWidth: 768 },
-    ]);
+    expect(result.current).toEqual({
+      width: "100%",
+      maxWidth: 768,
+    });
   });
 });

src/use-tailwind.native.ts

@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   useWindowDimensions,
-  StyleProp,
-  StyleSheet,
   TextStyle,
   ViewStyle,
+  StyleSheet,
   ImageStyle,
+  Platform,
 } from "react-native";
 import { useContext } from "react";
 
@@ -56,13 +55,16 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
   }
 
   return (className = "") => {
-    const tailwindStyleIds: StyleProp<P> = [];
+    let tailwindStyles = {} as P;
 
     for (const name of `${siblingClassName} ${className}`.trim().split(" ")) {
       const selector = normaliseSelector(name);
 
       if (styles[selector]) {
-        tailwindStyleIds.push(styles[selector] as P);
+        tailwindStyles = {
+          ...tailwindStyles,
+          ...styles[selector],
+        };
       }
 
       const rules = mediaRules[selector];
@@ -83,24 +85,16 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
         });
 
         if (isMatch) {
-          tailwindStyleIds.push(styles[`${selector}.${index}`] as P);
+          tailwindStyles = {
+            ...tailwindStyles,
+            ...styles[`${selector}.${index}`],
+          };
         }
       }
     }
 
-    let computedStyles: P;
-
-    const proxy = new Proxy(tailwindStyleIds, {
-      get(_, property: string | number | symbol) {
-        if (property in tailwindStyleIds) {
-          return tailwindStyleIds[property as keyof typeof tailwindStyleIds];
-        }
-
-        computedStyles ??= StyleSheet.flatten(tailwindStyleIds) as P;
-        return computedStyles[property as keyof P];
-      },
-    });
-
-    return proxy as StyleProp<P> & TextStyle;
+    return Platform.OS === "web"
+      ? StyleSheet.flatten(tailwindStyles) // RNW <=0.17 still uses ReactNativePropRegistry
+      : tailwindStyles;
   };
 }