@mgcrea/react-native-tailwind 0.5.0 → 0.5.2

package/src/parser/shadows.test.ts

@@ -1,12 +1,5 @@
-import { setPlatform } from "test/mocks/react-native";
-import { beforeEach, describe, expect, it } from "vitest";
-import { SHADOW_SCALE, parseShadow, rebuildShadowScale } from "./shadows";
-
-// Reset to iOS before each test
-beforeEach(() => {
-  setPlatform("ios");
-  rebuildShadowScale();
-});
+import { describe, expect, it } from "vitest";
+import { SHADOW_SCALE, parseShadow } from "./shadows";
 
 describe("SHADOW_SCALE", () => {
   it("should export complete shadow scale", () => {
@@ -71,10 +64,6 @@ describe("parseShadow - basic shadows", () => {
 });
 
 describe("parseShadow - shadow properties (iOS)", () => {
-  beforeEach(() => {
-    setPlatform("ios");
-  });
-
   it("should have increasing shadow values for larger shadows", () => {
     const sm = parseShadow("shadow-sm");
     const md = parseShadow("shadow-md");
@@ -104,24 +93,28 @@ describe("parseShadow - shadow properties (iOS)", () => {
 
   it("should have proper shadowOffset structure", () => {
     const result = parseShadow("shadow");
-    expect(result?.shadowOffset).toHaveProperty("width");
-    expect(result?.shadowOffset).toHaveProperty("height");
-    expect(typeof result?.shadowOffset?.width).toBe("number");
-    expect(typeof result?.shadowOffset?.height).toBe("number");
+    const shadowOffset = result?.shadowOffset;
+    expect(shadowOffset).toHaveProperty("width");
+    expect(shadowOffset).toHaveProperty("height");
+    if (typeof shadowOffset === "object" && shadowOffset !== null) {
+      expect(typeof shadowOffset.width).toBe("number");
+      expect(typeof shadowOffset.height).toBe("number");
+    }
   });
 
-  it("should not have elevation property on iOS", () => {
+  it("should include both iOS shadow and Android elevation properties", () => {
     const result = parseShadow("shadow");
-    expect(result).not.toHaveProperty("elevation");
+    // iOS properties
+    expect(result).toHaveProperty("shadowColor");
+    expect(result).toHaveProperty("shadowOffset");
+    expect(result).toHaveProperty("shadowOpacity");
+    expect(result).toHaveProperty("shadowRadius");
+    // Android property
+    expect(result).toHaveProperty("elevation");
   });
 });
 
 describe("parseShadow - shadow properties (Android)", () => {
-  beforeEach(() => {
-    setPlatform("android");
-    rebuildShadowScale();
-  });
-
   it("should have increasing elevation values for larger shadows", () => {
     const sm = parseShadow("shadow-sm");
     const md = parseShadow("shadow-md");
@@ -136,12 +129,10 @@ describe("parseShadow - shadow properties (Android)", () => {
     expect(xxl?.elevation).toBeGreaterThan(xl?.elevation as number);
   });
 
-  it("should not have shadow properties on Android", () => {
+  it("should include elevation property for Android", () => {
     const result = parseShadow("shadow");
-    expect(result).not.toHaveProperty("shadowColor");
-    expect(result).not.toHaveProperty("shadowOffset");
-    expect(result).not.toHaveProperty("shadowOpacity");
-    expect(result).not.toHaveProperty("shadowRadius");
+    expect(result).toHaveProperty("elevation");
+    expect(typeof result?.elevation).toBe("number");
   });
 });
 

package/src/parser/shadows.ts

@@ -3,117 +3,68 @@
  * iOS uses shadow* properties, Android uses elevation
  */
 
-import { Platform } from "react-native";
 import type { StyleObject } from "../types";
 
 /**
- * Shadow scale definitions (raw values, not platform-specific)
+ * Shadow scale definitions combining iOS and Android properties
  * Based on Tailwind CSS shadow scale, adapted for React Native
+ *
+ * Note: We include BOTH iOS shadow properties AND Android elevation in each style.
+ * React Native will automatically use the appropriate properties for each platform:
+ * - iOS uses shadowColor, shadowOffset, shadowOpacity, shadowRadius
+ * - Android uses elevation
  */
-const SHADOW_DEFINITIONS = {
+const SHADOW_SCALE: Record<string, StyleObject> = {
   "shadow-sm": {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 1,
-    },
-    android: {
-      elevation: 1,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 1,
+    elevation: 1,
   },
   shadow: {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.1,
-      shadowRadius: 2,
-    },
-    android: {
-      elevation: 2,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
   },
   "shadow-md": {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 3 },
-      shadowOpacity: 0.15,
-      shadowRadius: 4,
-    },
-    android: {
-      elevation: 4,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
   },
   "shadow-lg": {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 6 },
-      shadowOpacity: 0.2,
-      shadowRadius: 8,
-    },
-    android: {
-      elevation: 8,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8,
   },
   "shadow-xl": {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 10 },
-      shadowOpacity: 0.25,
-      shadowRadius: 12,
-    },
-    android: {
-      elevation: 12,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 12,
   },
   "shadow-2xl": {
-    ios: {
-      shadowColor: "#000000",
-      shadowOffset: { width: 0, height: 20 },
-      shadowOpacity: 0.3,
-      shadowRadius: 24,
-    },
-    android: {
-      elevation: 16,
-    },
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 20 },
+    shadowOpacity: 0.3,
+    shadowRadius: 24,
+    elevation: 16,
   },
   "shadow-none": {
-    ios: {
-      shadowColor: "transparent",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0,
-      shadowRadius: 0,
-    },
-    android: {
-      elevation: 0,
-    },
+    shadowColor: "transparent",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
   },
-} as const;
-
-/**
- * Helper function to build the shadow scale using Platform.select()
- * This allows tests to rebuild the scale after changing the platform mock
- */
-function buildShadowScale(): Record<string, StyleObject> {
-  const scale: Record<string, StyleObject> = {};
-  for (const [key, value] of Object.entries(SHADOW_DEFINITIONS)) {
-    scale[key] = Platform.select<StyleObject>(value as never);
-  }
-  return scale;
-}
-
-/**
- * Computed shadow scale using Platform.select()
- * This is evaluated at module load time for production use
- */
-let SHADOW_SCALE = buildShadowScale();
-
-/**
- * Rebuild the shadow scale (useful for testing with platform mocks)
- */
-export function rebuildShadowScale() {
-  SHADOW_SCALE = buildShadowScale();
-}
+};
 
 /**
  * Parse shadow classes
@@ -129,5 +80,5 @@ export function parseShadow(cls: string): StyleObject | null {
   return null;
 }
 
-// Export shadow scale and builder for testing/advanced usage
-export { buildShadowScale, SHADOW_SCALE };
+// Export shadow scale for testing/advanced usage
+export { SHADOW_SCALE };

package/src/react-native.d.ts

@@ -69,7 +69,7 @@ declare module "react-native" {
     className?: string;
   }
 
-  interface FlatListProps<_ItemT> {
+  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
     /**
      * Tailwind-like class names for styling
      * @example

package/src/types.ts

@@ -6,9 +6,7 @@ import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 
 export type RNStyle = ViewStyle | TextStyle | ImageStyle;
 
-export type StyleObject = Record<Exclude<string, "shadowOffset">, string | number | undefined> & {
-  shadowOffset?: { width: number; height: number };
-};
+export type StyleObject = Record<string, string | number | { width: number; height: number } | undefined>;
 
 export type SpacingValue = number;
 export type ColorValue = string;