diff --git a/__tests__/use-tailwind.native.tsx b/__tests__/use-tailwind.native.tsx index 38aa491..a3fc84f 100644 --- a/__tests__/use-tailwind.native.tsx +++ b/__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 }); }); }); diff --git a/__tests__/use-tailwind.web.tsx b/__tests__/use-tailwind.web.tsx index 36d0aba..ce2b552 100644 --- a/__tests__/use-tailwind.web.tsx +++ b/__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, + }); }); }); diff --git a/src/use-tailwind.native.ts b/src/use-tailwind.native.ts index a5a9774..13cc00c 100644 --- a/src/use-tailwind.native.ts +++ b/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

({ siblingClassName = "" } = {}) { } return (className = "") => { - const tailwindStyleIds: StyleProp

= []; + 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

({ 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

& TextStyle; + return Platform.OS === "web" + ? StyleSheet.flatten(tailwindStyles) // RNW <=0.17 still uses ReactNativePropRegistry + : tailwindStyles; }; }