@mgcrea/react-native-tailwind 0.12.0 → 0.13.0

package/src/parser/borders.test.ts

@@ -327,3 +327,61 @@ describe("parseBorder - comprehensive coverage", () => {
     });
   });
 });
+
+describe("parseBorder - color pattern detection", () => {
+  it("should return null for directional border colors with preset values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500")).toBeNull();
+    expect(parseBorder("border-r-blue-500")).toBeNull();
+    expect(parseBorder("border-b-green-500")).toBeNull();
+    expect(parseBorder("border-l-yellow-500")).toBeNull();
+  });
+
+  it("should return null for directional border colors with basic values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-white")).toBeNull();
+    expect(parseBorder("border-r-black")).toBeNull();
+    expect(parseBorder("border-b-transparent")).toBeNull();
+    expect(parseBorder("border-l-white")).toBeNull();
+  });
+
+  it("should return null for directional border colors with arbitrary hex values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-[#ff0000]")).toBeNull();
+    expect(parseBorder("border-r-[#3B82F6]")).toBeNull();
+    expect(parseBorder("border-b-[#abc]")).toBeNull();
+    expect(parseBorder("border-l-[#00FF00AA]")).toBeNull();
+  });
+
+  it("should return null for directional border colors with opacity", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500/50")).toBeNull();
+    expect(parseBorder("border-r-blue-500/80")).toBeNull();
+    expect(parseBorder("border-b-[#ff0000]/60")).toBeNull();
+    expect(parseBorder("border-l-black/25")).toBeNull();
+  });
+
+  it("should return null for directional border colors with custom colors", () => {
+    // These should be handled by parseColor (assuming brand-primary is a custom color)
+    expect(parseBorder("border-t-brand-primary")).toBeNull();
+    expect(parseBorder("border-r-accent")).toBeNull();
+    expect(parseBorder("border-b-brand-secondary")).toBeNull();
+    expect(parseBorder("border-l-custom")).toBeNull();
+  });
+
+  it("should still handle directional border widths correctly", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-2")).toEqual({ borderTopWidth: 2 });
+    expect(parseBorder("border-r-4")).toEqual({ borderRightWidth: 4 });
+    expect(parseBorder("border-b-8")).toEqual({ borderBottomWidth: 8 });
+    expect(parseBorder("border-l-0")).toEqual({ borderLeftWidth: 0 });
+  });
+
+  it("should still handle directional border width arbitrary values", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-[3px]")).toEqual({ borderTopWidth: 3 });
+    expect(parseBorder("border-r-[5px]")).toEqual({ borderRightWidth: 5 });
+    expect(parseBorder("border-b-[10]")).toEqual({ borderBottomWidth: 10 });
+    expect(parseBorder("border-l-[8px]")).toEqual({ borderLeftWidth: 8 });
+  });
+});

package/src/parser/borders.ts

@@ -3,6 +3,7 @@
  */
 
 import type { StyleObject } from "../types";
+import { parseColor } from "./colors";
 
 // Border width scale
 export const BORDER_WIDTH_SCALE: Record<string, number> = {
@@ -108,8 +109,10 @@ function parseArbitraryBorderRadius(value: string): number | null {
 
 /**
  * Parse border classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors from tailwind.config (used to detect color patterns)
  */
-export function parseBorder(cls: string): StyleObject | null {
+export function parseBorder(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Border style (must come before parseBorderWidth)
   if (cls === "border-solid") return { borderStyle: "solid" };
   if (cls === "border-dotted") return { borderStyle: "dotted" };
@@ -117,7 +120,7 @@ export function parseBorder(cls: string): StyleObject | null {
 
   // Border width (border-0, border-t, border-[8px], etc.)
   if (cls.startsWith("border-")) {
-    return parseBorderWidth(cls);
+    return parseBorderWidth(cls, customColors);
   }
 
   if (cls === "border") {
@@ -134,14 +137,26 @@ export function parseBorder(cls: string): StyleObject | null {
 
 /**
  * Parse border width classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors (passed to parseColor for pattern detection)
  */
-function parseBorderWidth(cls: string): StyleObject | null {
+function parseBorderWidth(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Directional borders: border-t, border-t-2, border-t-[8px]
+  // Note: border-x and border-y are handled by parseColor for colors only
   const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
     const valueStr = dirMatch[2] || ""; // empty string for border-t
 
+    // If it's a color pattern, let parseColor handle it
+    // Try to parse as color - if it succeeds, return null (let parseColor handle it)
+    if (valueStr) {
+      const colorResult = parseColor(cls, customColors);
+      if (colorResult !== null) {
+        return null; // It's a color, let parseColor handle it
+      }
+    }
+
     // Try arbitrary value first (if it starts with [)
     if (valueStr.startsWith("[")) {
       const arbitraryValue = parseArbitraryBorderWidth(valueStr);

package/src/parser/colors.test.ts

@@ -391,3 +391,252 @@ describe("parseColor - opacity modifiers", () => {
     });
   });
 });
+
+describe("parseColor - directional border colors", () => {
+  it("should parse directional border colors with preset values", () => {
+    expect(parseColor("border-t-red-500")).toEqual({ borderTopColor: COLORS["red-500"] });
+    expect(parseColor("border-r-blue-500")).toEqual({ borderRightColor: COLORS["blue-500"] });
+    expect(parseColor("border-b-green-500")).toEqual({ borderBottomColor: COLORS["green-500"] });
+    expect(parseColor("border-l-yellow-500")).toEqual({ borderLeftColor: COLORS["yellow-500"] });
+  });
+
+  it("should parse directional border colors with basic values", () => {
+    expect(parseColor("border-t-white")).toEqual({ borderTopColor: "#FFFFFF" });
+    expect(parseColor("border-r-black")).toEqual({ borderRightColor: "#000000" });
+    expect(parseColor("border-b-transparent")).toEqual({ borderBottomColor: "transparent" });
+    expect(parseColor("border-l-white")).toEqual({ borderLeftColor: "#FFFFFF" });
+  });
+
+  it("should parse directional border colors with arbitrary 6-digit hex values", () => {
+    expect(parseColor("border-t-[#ff0000]")).toEqual({ borderTopColor: "#ff0000" });
+    expect(parseColor("border-r-[#3B82F6]")).toEqual({ borderRightColor: "#3B82F6" });
+    expect(parseColor("border-b-[#00ff00]")).toEqual({ borderBottomColor: "#00ff00" });
+    expect(parseColor("border-l-[#cccccc]")).toEqual({ borderLeftColor: "#cccccc" });
+  });
+
+  it("should parse directional border colors with arbitrary 3-digit hex values", () => {
+    expect(parseColor("border-t-[#f00]")).toEqual({ borderTopColor: "#ff0000" });
+    expect(parseColor("border-r-[#abc]")).toEqual({ borderRightColor: "#aabbcc" });
+    expect(parseColor("border-b-[#123]")).toEqual({ borderBottomColor: "#112233" });
+    expect(parseColor("border-l-[#999]")).toEqual({ borderLeftColor: "#999999" });
+  });
+
+  it("should parse directional border colors with arbitrary 8-digit hex values (with alpha)", () => {
+    expect(parseColor("border-t-[#ff0000aa]")).toEqual({ borderTopColor: "#ff0000aa" });
+    expect(parseColor("border-r-[#0000FF50]")).toEqual({ borderRightColor: "#0000FF50" });
+    expect(parseColor("border-b-[#00FF0080]")).toEqual({ borderBottomColor: "#00FF0080" });
+    expect(parseColor("border-l-[#FFFFFF00]")).toEqual({ borderLeftColor: "#FFFFFF00" });
+  });
+
+  it("should parse directional border colors with opacity modifiers", () => {
+    expect(parseColor("border-t-red-500/50")).toEqual({
+      borderTopColor: applyOpacity(COLORS["red-500"], 50),
+    });
+    expect(parseColor("border-r-blue-500/80")).toEqual({
+      borderRightColor: applyOpacity(COLORS["blue-500"], 80),
+    });
+    expect(parseColor("border-b-green-500/30")).toEqual({
+      borderBottomColor: applyOpacity(COLORS["green-500"], 30),
+    });
+    expect(parseColor("border-l-black/25")).toEqual({
+      borderLeftColor: applyOpacity(COLORS.black, 25),
+    });
+  });
+
+  it("should parse directional border colors with arbitrary hex and opacity", () => {
+    expect(parseColor("border-t-[#ff0000]/50")).toEqual({ borderTopColor: "#FF000080" });
+    expect(parseColor("border-r-[#3B82F6]/80")).toEqual({ borderRightColor: "#3B82F6CC" });
+    expect(parseColor("border-b-[#abc]/60")).toEqual({ borderBottomColor: "#AABBCC99" });
+    expect(parseColor("border-l-[#000]/100")).toEqual({ borderLeftColor: "#000000FF" });
+  });
+
+  it("should parse directional border colors with custom colors", () => {
+    const customColors = {
+      "brand-primary": "#FF6B6B",
+      "brand-secondary": "#4ECDC4",
+      accent: "#FFE66D",
+    };
+
+    expect(parseColor("border-t-brand-primary", customColors)).toEqual({
+      borderTopColor: "#FF6B6B",
+    });
+    expect(parseColor("border-r-brand-secondary", customColors)).toEqual({
+      borderRightColor: "#4ECDC4",
+    });
+    expect(parseColor("border-b-accent", customColors)).toEqual({ borderBottomColor: "#FFE66D" });
+    expect(parseColor("border-l-brand-primary", customColors)).toEqual({
+      borderLeftColor: "#FF6B6B",
+    });
+  });
+
+  it("should parse directional border colors with custom colors and opacity", () => {
+    const customColors = { "brand-primary": "#FF6B6B" };
+    expect(parseColor("border-t-brand-primary/50", customColors)).toEqual({
+      borderTopColor: "#FF6B6B80",
+    });
+    expect(parseColor("border-l-brand-primary/75", customColors)).toEqual({
+      borderLeftColor: "#FF6B6BBF",
+    });
+  });
+
+  it("should not match border width classes", () => {
+    // These should be handled by parseBorder
+    expect(parseColor("border-t-2")).toBeNull();
+    expect(parseColor("border-r-4")).toBeNull();
+    expect(parseColor("border-b-8")).toBeNull();
+    expect(parseColor("border-l-0")).toBeNull();
+  });
+
+  it("should not match border width arbitrary values", () => {
+    // These should be handled by parseBorder
+    expect(parseColor("border-t-[3px]")).toBeNull();
+    expect(parseColor("border-r-[8px]")).toBeNull();
+    expect(parseColor("border-b-[5]")).toBeNull();
+    expect(parseColor("border-l-[10px]")).toBeNull();
+  });
+
+  it("should return null for invalid directional border color values", () => {
+    expect(parseColor("border-t-invalid")).toBeNull();
+    expect(parseColor("border-r-notacolor")).toBeNull();
+    expect(parseColor("border-b-xyz")).toBeNull();
+    expect(parseColor("border-l-wrongcolor")).toBeNull();
+  });
+
+  it("should handle all directions with same color", () => {
+    const color = COLORS["blue-500"];
+    expect(parseColor("border-t-blue-500")).toEqual({ borderTopColor: color });
+    expect(parseColor("border-r-blue-500")).toEqual({ borderRightColor: color });
+    expect(parseColor("border-b-blue-500")).toEqual({ borderBottomColor: color });
+    expect(parseColor("border-l-blue-500")).toEqual({ borderLeftColor: color });
+  });
+
+  it("should handle all color families for directional borders", () => {
+    const families = ["gray", "red", "blue", "green", "yellow", "purple", "pink", "orange", "indigo"];
+    families.forEach((family) => {
+      expect(parseColor(`border-t-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-r-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-b-${family}-500`)).toBeTruthy();
+      expect(parseColor(`border-l-${family}-500`)).toBeTruthy();
+    });
+  });
+
+  it("should handle directional borders with all opacity levels", () => {
+    expect(parseColor("border-t-black/0")).toEqual({ borderTopColor: "#00000000" });
+    expect(parseColor("border-t-black/25")).toEqual({ borderTopColor: "#00000040" });
+    expect(parseColor("border-t-black/50")).toEqual({ borderTopColor: "#00000080" });
+    expect(parseColor("border-t-black/75")).toEqual({ borderTopColor: "#000000BF" });
+    expect(parseColor("border-t-black/100")).toEqual({ borderTopColor: "#000000FF" });
+  });
+});
+
+describe("parseColor - border-x and border-y colors", () => {
+  it("should parse border-x colors (horizontal: left + right)", () => {
+    expect(parseColor("border-x-red-500")).toEqual({
+      borderLeftColor: COLORS["red-500"],
+      borderRightColor: COLORS["red-500"],
+    });
+    expect(parseColor("border-x-blue-500")).toEqual({
+      borderLeftColor: COLORS["blue-500"],
+      borderRightColor: COLORS["blue-500"],
+    });
+  });
+
+  it("should parse border-y colors (vertical: top + bottom)", () => {
+    expect(parseColor("border-y-green-500")).toEqual({
+      borderTopColor: COLORS["green-500"],
+      borderBottomColor: COLORS["green-500"],
+    });
+    expect(parseColor("border-y-yellow-500")).toEqual({
+      borderTopColor: COLORS["yellow-500"],
+      borderBottomColor: COLORS["yellow-500"],
+    });
+  });
+
+  it("should parse border-x with basic colors", () => {
+    expect(parseColor("border-x-white")).toEqual({
+      borderLeftColor: "#FFFFFF",
+      borderRightColor: "#FFFFFF",
+    });
+    expect(parseColor("border-x-black")).toEqual({
+      borderLeftColor: "#000000",
+      borderRightColor: "#000000",
+    });
+  });
+
+  it("should parse border-y with basic colors", () => {
+    expect(parseColor("border-y-white")).toEqual({
+      borderTopColor: "#FFFFFF",
+      borderBottomColor: "#FFFFFF",
+    });
+    expect(parseColor("border-y-transparent")).toEqual({
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    });
+  });
+
+  it("should parse border-x with opacity", () => {
+    expect(parseColor("border-x-red-500/50")).toEqual({
+      borderLeftColor: applyOpacity(COLORS["red-500"], 50),
+      borderRightColor: applyOpacity(COLORS["red-500"], 50),
+    });
+  });
+
+  it("should parse border-y with opacity", () => {
+    expect(parseColor("border-y-blue-500/80")).toEqual({
+      borderTopColor: applyOpacity(COLORS["blue-500"], 80),
+      borderBottomColor: applyOpacity(COLORS["blue-500"], 80),
+    });
+  });
+
+  it("should parse border-x with arbitrary hex colors", () => {
+    expect(parseColor("border-x-[#ff0000]")).toEqual({
+      borderLeftColor: "#ff0000",
+      borderRightColor: "#ff0000",
+    });
+    expect(parseColor("border-x-[#abc]")).toEqual({
+      borderLeftColor: "#aabbcc",
+      borderRightColor: "#aabbcc",
+    });
+  });
+
+  it("should parse border-y with arbitrary hex colors", () => {
+    expect(parseColor("border-y-[#00ff00]")).toEqual({
+      borderTopColor: "#00ff00",
+      borderBottomColor: "#00ff00",
+    });
+    expect(parseColor("border-y-[#123]")).toEqual({
+      borderTopColor: "#112233",
+      borderBottomColor: "#112233",
+    });
+  });
+
+  it("should parse border-x with custom colors", () => {
+    const customColors = { "brand-primary": "#FF6B6B" };
+    expect(parseColor("border-x-brand-primary", customColors)).toEqual({
+      borderLeftColor: "#FF6B6B",
+      borderRightColor: "#FF6B6B",
+    });
+  });
+
+  it("should parse border-y with custom colors", () => {
+    const customColors = { accent: "#FFE66D" };
+    expect(parseColor("border-y-accent", customColors)).toEqual({
+      borderTopColor: "#FFE66D",
+      borderBottomColor: "#FFE66D",
+    });
+  });
+
+  it("should not match border-x/border-y width classes", () => {
+    expect(parseColor("border-x-2")).toBeNull();
+    expect(parseColor("border-y-4")).toBeNull();
+    expect(parseColor("border-x-0")).toBeNull();
+    expect(parseColor("border-y-8")).toBeNull();
+  });
+
+  it("should not match border-x/border-y arbitrary width values", () => {
+    expect(parseColor("border-x-[3px]")).toBeNull();
+    expect(parseColor("border-y-[5px]")).toBeNull();
+    expect(parseColor("border-x-[10]")).toBeNull();
+    expect(parseColor("border-y-[8px]")).toBeNull();
+  });
+});

package/src/parser/colors.ts

@@ -178,5 +178,43 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
     }
   }
 
+  // Directional border colors: border-t-red-500, border-l-blue-500/50, border-r-[#ff0000]
+  const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
+  if (dirBorderMatch) {
+    const dir = dirBorderMatch[1];
+    const colorKey = dirBorderMatch[2];
+
+    // Skip arbitrary values that don't look like colors (e.g., border-t-[3px] is width)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      // Map direction to React Native property/properties
+      // x and y apply to multiple sides (RN doesn't have borderHorizontalColor/borderVerticalColor)
+      if (dir === "x") {
+        return {
+          borderLeftColor: color,
+          borderRightColor: color,
+        };
+      }
+      if (dir === "y") {
+        return {
+          borderTopColor: color,
+          borderBottomColor: color,
+        };
+      }
+
+      const propMap: Record<string, string> = {
+        t: "borderTopColor",
+        r: "borderRightColor",
+        b: "borderBottomColor",
+        l: "borderLeftColor",
+      };
+      return { [propMap[dir]]: color };
+    }
+  }
+
   return null;
 }

package/src/parser/index.ts

@@ -20,6 +20,7 @@ import { parseTypography } from "./typography";
 export type CustomTheme = {
   colors?: Record<string, string>;
   fontFamily?: Record<string, string>;
+  fontSize?: Record<string, number>;
 };
 
 /**
@@ -49,13 +50,13 @@ export function parseClassName(className: string, customTheme?: CustomTheme): St
 export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor and parseTypography get custom theme, others don't need it
+  // parseBorder, parseColor and parseTypography get custom theme
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
-    parseBorder,
+    (cls: string) => parseBorder(cls, customTheme?.colors),
     (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
     parseSizing,
     parseShadow,
     parseAspectRatio,

package/src/parser/layout.test.ts

@@ -73,6 +73,67 @@ describe("parseLayout - flex grow/shrink utilities", () => {
   it("should parse shrink-0", () => {
     expect(parseLayout("shrink-0")).toEqual({ flexShrink: 0 });
   });
+
+  it("should parse grow with arbitrary values", () => {
+    expect(parseLayout("grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[3]")).toEqual({ flexGrow: 3 });
+    expect(parseLayout("grow-[0]")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse shrink with arbitrary values", () => {
+    expect(parseLayout("shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+    expect(parseLayout("shrink-[3]")).toEqual({ flexShrink: 3 });
+    expect(parseLayout("shrink-[0]")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow aliases", () => {
+    expect(parseLayout("flex-grow")).toEqual({ flexGrow: 1 });
+    expect(parseLayout("flex-grow-0")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse CSS-style flex-shrink aliases", () => {
+    expect(parseLayout("flex-shrink")).toEqual({ flexShrink: 1 });
+    expect(parseLayout("flex-shrink-0")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow with arbitrary values", () => {
+    expect(parseLayout("flex-grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("flex-grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("flex-grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+  });
+
+  it("should parse CSS-style flex-shrink with arbitrary values", () => {
+    expect(parseLayout("flex-shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("flex-shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("flex-shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+  });
+
+  it("should handle edge case values", () => {
+    expect(parseLayout("grow-[0.1]")).toEqual({ flexGrow: 0.1 });
+    expect(parseLayout("grow-[10]")).toEqual({ flexGrow: 10 });
+    expect(parseLayout("shrink-[0.01]")).toEqual({ flexShrink: 0.01 });
+    expect(parseLayout("shrink-[100]")).toEqual({ flexShrink: 100 });
+  });
+
+  it("should parse Tailwind shorthand decimals (no leading zero)", () => {
+    expect(parseLayout("grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[.75]")).toEqual({ flexGrow: 0.75 });
+    expect(parseLayout("shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[.25]")).toEqual({ flexShrink: 0.25 });
+    expect(parseLayout("flex-grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("flex-shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+  });
+
+  it("should reject negative values", () => {
+    expect(parseLayout("grow-[-1]")).toBeNull();
+    expect(parseLayout("shrink-[-1]")).toBeNull();
+    expect(parseLayout("flex-grow-[-2]")).toBeNull();
+    expect(parseLayout("flex-shrink-[-0.5]")).toBeNull();
+  });
 });
 
 describe("parseLayout - justify content utilities", () => {

package/src/parser/layout.ts

@@ -60,6 +60,31 @@ function parseArbitraryZIndex(value: string): number | null {
   return null;
 }
 
+/**
+ * Parse arbitrary grow/shrink value: [1.5], [2], [0.5], [.5]
+ * Returns number for valid non-negative values, null otherwise
+ */
+function parseArbitraryGrowShrink(value: string): number | null {
+  // Match: [1.5], [2], [0], [0.5], [.5] (non-negative decimals, optional leading digit)
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+
+  // Warn about invalid formats (negative values, unsupported formats)
+  if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
 // Display utilities
 const DISPLAY_MAP: Record<string, StyleObject> = {
   flex: { display: "flex" },
@@ -88,12 +113,17 @@ const FLEX_MAP: Record<string, StyleObject> = {
   "flex-none": { flex: 0 },
 };
 
-// Flex grow/shrink utilities
+// Flex grow/shrink utilities (includes CSS-style aliases)
 const GROW_SHRINK_MAP: Record<string, StyleObject> = {
   grow: { flexGrow: 1 },
   "grow-0": { flexGrow: 0 },
   shrink: { flexShrink: 1 },
   "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 },
 };
 
 // Justify content utilities
@@ -357,6 +387,30 @@ export function parseLayout(cls: string): StyleObject | null {
     }
   }
 
+  // Flex grow: grow-[1.5], flex-grow-[2], etc. (arbitrary values)
+  if (cls.startsWith("grow-") || cls.startsWith("flex-grow-")) {
+    const prefix = cls.startsWith("flex-grow-") ? "flex-grow-" : "grow-";
+    const growKey = cls.substring(prefix.length);
+
+    // Arbitrary values: grow-[1.5], flex-grow-[2]
+    const arbitraryGrow = parseArbitraryGrowShrink(growKey);
+    if (arbitraryGrow !== null) {
+      return { flexGrow: arbitraryGrow };
+    }
+  }
+
+  // Flex shrink: shrink-[0.5], flex-shrink-[1], etc. (arbitrary values)
+  if (cls.startsWith("shrink-") || cls.startsWith("flex-shrink-")) {
+    const prefix = cls.startsWith("flex-shrink-") ? "flex-shrink-" : "shrink-";
+    const shrinkKey = cls.substring(prefix.length);
+
+    // Arbitrary values: shrink-[0.5], flex-shrink-[1]
+    const arbitraryShrink = parseArbitraryGrowShrink(shrinkKey);
+    if (arbitraryShrink !== null) {
+      return { flexShrink: arbitraryShrink };
+    }
+  }
+
   // Try each lookup table in order
   return (
     DISPLAY_MAP[cls] ??

package/src/parser/sizing.ts

@@ -2,6 +2,7 @@
  * Sizing utilities (width, height, min/max)
  */
 
+import { RUNTIME_DIMENSIONS_MARKER } from "../config/markers";
 import type { StyleObject } from "../types";
 
 // Size scale (in pixels/percentages)
@@ -100,6 +101,11 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
 
+    // Screen width (requires runtime hook)
+    if (sizeKey === "screen") {
+      return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` } as StyleObject;
+    }
+
     // Arbitrary values: w-[123px], w-[50%]
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
@@ -128,6 +134,11 @@ export function parseSizing(cls: string): StyleObject | null {
   if (cls.startsWith("h-")) {
     const sizeKey = cls.substring(2);
 
+    // Screen height (requires runtime hook)
+    if (sizeKey === "screen") {
+      return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` } as StyleObject;
+    }
+
     // Arbitrary values: h-[123px], h-[50%]
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {