@mgcrea/react-native-tailwind 0.5.0 → 0.5.1

package/README.md

@@ -5,6 +5,7 @@
 [![npm version](https://img.shields.io/npm/v/@mgcrea/react-native-tailwind.svg?style=for-the-badge)](https://www.npmjs.com/package/@mgcrea/react-native-tailwind)
 [![npm downloads](https://img.shields.io/npm/dt/@mgcrea/react-native-tailwind.svg?style=for-the-badge)](https://www.npmjs.com/package/@mgcrea/react-native-tailwind)
 [![license](https://img.shields.io/github/license/mgcrea/react-native-tailwind.svg?style=for-the-badge)](https://github.com/mgcrea/react-native-tailwind/blob/main/LICENSE)
+[![build status](https://img.shields.io/github/actions/workflow/status/mgcrea/react-native-tailwind/main.yaml?style=for-the-badge&branch=master)](https://github.com/mgcrea/react-native-tailwind/actions/workflows/main.yaml)
 
 </div>
 
@@ -121,292 +122,6 @@ const _twStyles = StyleSheet.create({
 });
 ```
 
-## API Reference
-
-### Spacing
-
-**Margin & Padding:**
-
-- `m-{size}`, `p-{size}` — All sides
-- `mx-{size}`, `my-{size}`, `px-{size}`, `py-{size}` — Horizontal/vertical
-- `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}` — Directional margin
-- `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}` — Directional padding
-- `gap-{size}` — Gap between flex items
-
-**Available sizes:** `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `14`, `16`, `20`, `24`, `28`, `32`, `36`, `40`, `44`, `48`, `52`, `56`, `60`, `64`, `72`, `80`, `96`
-
-**Arbitrary values:** `m-[16px]`, `p-[20]`, `mx-[24px]`, `gap-[12px]` — Custom spacing values (px only)
-
-### Layout
-
-**Flexbox:**
-
-- `flex`, `flex-1`, `flex-auto`, `flex-none` — Flex sizing
-- `flex-row`, `flex-row-reverse`, `flex-col`, `flex-col-reverse` — Direction
-- `flex-wrap`, `flex-wrap-reverse`, `flex-nowrap` — Wrapping
-- `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch` — Align items
-- `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly` — Justify content
-- `self-auto`, `self-start`, `self-end`, `self-center`, `self-stretch`, `self-baseline` — Align self
-- `grow`, `grow-0`, `shrink`, `shrink-0` — Flex grow/shrink
-
-**Other:**
-
-- `absolute`, `relative` — Position
-- `overflow-hidden`, `overflow-visible`, `overflow-scroll` — Overflow
-- `flex`, `hidden` — Display
-
-### Colors
-
-- `bg-{color}-{shade}` — Background color
-- `text-{color}-{shade}` — Text color
-- `border-{color}-{shade}` — Border color
-
-**Available colors:** `gray`, `red`, `blue`, `green`, `yellow`, `purple`, `pink`, `orange`, `indigo`, `white`, `black`, `transparent`
-
-**Available shades:** `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
-
-> **Note:** You can extend the color palette with custom colors via `tailwind.config.*` — see [Custom Colors](#custom-colors)
-
-**Opacity Modifiers:**
-
-Apply transparency to any color using the `/` operator with a percentage value (0-100):
-
-```tsx
-<View className="bg-black/50 p-4">         {/* 50% opacity black background */}
-  <Text className="text-gray-900/80">     {/* 80% opacity gray text */}
-    Semi-transparent content
-  </Text>
-  <View className="border-2 border-red-500/30" /> {/* 30% opacity red border */}
-</View>
-```
-
-- Works with all color types: `bg-*`, `text-*`, `border-*`
-- Supports preset colors: `bg-blue-500/75`, `text-red-600/50`
-- Supports arbitrary colors: `bg-[#ff0000]/40`, `text-[#3B82F6]/90`
-- Supports custom colors: `bg-primary/60`, `text-brand/80`
-- Uses React Native's 8-digit hex format: `#RRGGBBAA`
-
-**Examples:**
-
-```tsx
-// Background opacity
-<View className="bg-white/90" />          // #FFFFFFE6
-<View className="bg-blue-500/50" />       // #3B82F680
-
-// Text opacity
-<Text className="text-black/70" />        // #000000B3
-<Text className="text-gray-900/60" />     // #11182799
-
-// Border opacity
-<View className="border-2 border-purple-500/40" /> // #A855F766
-
-// Arbitrary colors with opacity
-<View className="bg-[#ff6b6b]/25" />      // #FF6B6B40
-
-// Edge cases
-<View className="bg-black/0" />           // Fully transparent
-<View className="bg-blue-500/100" />      // Fully opaque
-<View className="bg-transparent/50" />    // Remains transparent
-```
-
-### Typography
-
-**Font Size:**
-
-`text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `text-9xl`
-
-**Font Weight:**
-
-`font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`
-
-**Other:**
-
-- `italic`, `not-italic` — Font style
-- `text-left`, `text-center`, `text-right`, `text-justify` — Text alignment
-- `underline`, `line-through`, `no-underline` — Text decoration
-- `uppercase`, `lowercase`, `capitalize`, `normal-case` — Text transform
-- `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` — Line height
-
-### Borders
-
-**Width:**
-
-- `border`, `border-0`, `border-2`, `border-4`, `border-8` — All sides
-- `border-t`, `border-r`, `border-b`, `border-l` (with variants `-0`, `-2`, `-4`, `-8`) — Directional
-- `border-[8px]`, `border-t-[12px]` — Arbitrary values
-
-**Radius:**
-
-- `rounded-none`, `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full` — All corners
-- `rounded-t`, `rounded-r`, `rounded-b`, `rounded-l` (with size variants) — Directional
-- `rounded-tl`, `rounded-tr`, `rounded-bl`, `rounded-br` (with size variants) — Individual corners
-- `rounded-[12px]`, `rounded-t-[8px]`, `rounded-tl-[16px]` — Arbitrary values
-
-**Style:**
-
-`border-solid`, `border-dotted`, `border-dashed`
-
-### Shadows & Elevation
-
-Apply platform-specific shadows and elevation to create depth and visual hierarchy. Automatically uses iOS shadow properties or Android elevation based on the platform:
-
-**Available shadow sizes:**
-
-- `shadow-sm` — Subtle shadow
-- `shadow` — Default shadow
-- `shadow-md` — Medium shadow
-- `shadow-lg` — Large shadow
-- `shadow-xl` — Extra large shadow
-- `shadow-2xl` — Extra extra large shadow
-- `shadow-none` — Remove shadow
-
-**Platform Differences:**
-
-| Platform | Properties Used | Example Output |
-|----------|----------------|----------------|
-| **iOS** | `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` | Native iOS shadow rendering |
-| **Android** | `elevation` | Native Android elevation (Material Design) |
-
-**Examples:**
-
-```tsx
-// Card with shadow
-<View className="bg-white rounded-lg shadow-lg p-6 m-4">
-  <Text className="text-xl font-bold">Card Title</Text>
-  <Text className="text-gray-600">Card with large shadow</Text>
-</View>
-
-// Button with subtle shadow
-<Pressable className="bg-blue-500 shadow-sm rounded-lg px-6 py-3">
-  <Text className="text-white">Press Me</Text>
-</Pressable>
-
-// Different shadow sizes
-<View className="shadow-sm p-4">Subtle</View>
-<View className="shadow p-4">Default</View>
-<View className="shadow-md p-4">Medium</View>
-<View className="shadow-lg p-4">Large</View>
-<View className="shadow-xl p-4">Extra Large</View>
-<View className="shadow-2xl p-4">2X Large</View>
-
-// Remove shadow
-<View className="shadow-lg md:shadow-none p-4">
-  Conditional shadow removal
-</View>
-```
-
-**iOS Shadow Values:**
-
-| Class | shadowOpacity | shadowRadius | shadowOffset |
-|-------|---------------|--------------|--------------|
-| `shadow-sm` | 0.05 | 1 | { width: 0, height: 1 } |
-| `shadow` | 0.1 | 2 | { width: 0, height: 1 } |
-| `shadow-md` | 0.15 | 4 | { width: 0, height: 3 } |
-| `shadow-lg` | 0.2 | 8 | { width: 0, height: 6 } |
-| `shadow-xl` | 0.25 | 12 | { width: 0, height: 10 } |
-| `shadow-2xl` | 0.3 | 24 | { width: 0, height: 20 } |
-
-**Android Elevation Values:**
-
-| Class | elevation |
-|-------|-----------|
-| `shadow-sm` | 1 |
-| `shadow` | 2 |
-| `shadow-md` | 4 |
-| `shadow-lg` | 8 |
-| `shadow-xl` | 12 |
-| `shadow-2xl` | 16 |
-
-> **Note:** All shadow parsing happens at compile-time with zero runtime overhead. The platform detection uses React Native's `Platform.select()` API.
-
-### Aspect Ratio
-
-Control the aspect ratio of views using preset or arbitrary values. Requires React Native 0.71+:
-
-**Preset values:**
-
-- `aspect-auto` — Remove aspect ratio constraint
-- `aspect-square` — 1:1 aspect ratio
-- `aspect-video` — 16:9 aspect ratio
-
-**Arbitrary values:**
-
-Use `aspect-[width/height]` for custom ratios:
-
-```tsx
-<View className="aspect-[4/3]" />    // 4:3 ratio (1.333...)
-<View className="aspect-[16/9]" />   // 16:9 ratio (1.778...)
-<View className="aspect-[21/9]" />   // 21:9 ultrawide
-<View className="aspect-[9/16]" />   // 9:16 portrait
-<View className="aspect-[3/2]" />    // 3:2 ratio (1.5)
-```
-
-**Examples:**
-
-```tsx
-// Square image container
-<View className="w-full aspect-square bg-gray-200">
-  <Image source={avatar} className="w-full h-full" />
-</View>
-
-// Video player container (16:9)
-<View className="w-full aspect-video bg-black">
-  <VideoPlayer />
-</View>
-
-// Instagram-style square grid
-<View className="flex-row flex-wrap gap-2">
-  {photos.map((photo) => (
-    <View key={photo.id} className="w-[32%] aspect-square">
-      <Image source={photo.uri} className="w-full h-full rounded" />
-    </View>
-  ))}
-</View>
-
-// Custom aspect ratio for wide images
-<View className="w-full aspect-[21/9] rounded-lg overflow-hidden">
-  <Image source={banner} className="w-full h-full" resizeMode="cover" />
-</View>
-
-// Portrait orientation
-<View className="h-full aspect-[9/16]">
-  <Story />
-</View>
-
-// Remove aspect ratio constraint
-<View className="aspect-square md:aspect-auto">
-  Responsive aspect ratio
-</View>
-```
-
-**Common Aspect Ratios:**
-
-| Ratio | Class | Decimal | Use Case |
-|-------|-------|---------|----------|
-| 1:1 | `aspect-square` | 1.0 | Profile pictures, thumbnails |
-| 16:9 | `aspect-video` | 1.778 | Videos, landscape photos |
-| 4:3 | `aspect-[4/3]` | 1.333 | Standard photos |
-| 3:2 | `aspect-[3/2]` | 1.5 | Classic photography |
-| 21:9 | `aspect-[21/9]` | 2.333 | Ultrawide/cinematic |
-| 9:16 | `aspect-[9/16]` | 0.5625 | Stories, vertical video |
-
-> **Note:** The aspect ratio is calculated as `width / height`. When combined with `w-full`, the height will be automatically calculated to maintain the ratio.
-
-### Sizing
-
-- `w-{size}`, `h-{size}` — Width/height
-- `min-w-{size}`, `min-h-{size}` — Min width/height
-- `max-w-{size}`, `max-h-{size}` — Max width/height
-
-**Available sizes:**
-
-- **Numeric:** `0`-`96` (same as spacing scale)
-- **Fractional:** `1/2`, `1/3`, `2/3`, `1/4`, `3/4`, `1/5`, `2/5`, `3/5`, `4/5`, `1/6`, `2/6`, `3/6`, `4/6`, `5/6`
-- **Special:** `full` (100%), `auto`
-- **Arbitrary:** `w-[123px]`, `h-[50%]`, `min-w-[200px]`, `max-h-[80%]`
-
-> **Note:** Arbitrary sizing supports pixel values (`[123px]` or `[123]`) and percentages (`[50%]`). Other units (`rem`, `em`, `vh`, `vw`) are not supported in React Native.
-
 ## Usage Examples
 
 ### Basic Example
@@ -662,10 +377,10 @@ The package exports an enhanced `TextInput` component that:
 
 **Supported Modifiers by Component:**
 
-| Component              | Supported Modifiers                          | Notes                                      |
-| ---------------------- | -------------------------------------------- | ------------------------------------------ |
-| `Pressable` (enhanced) | `active:`, `hover:`, `focus:`, `disabled:`   | Use `@mgcrea/react-native-tailwind` export |
-| `TextInput` (enhanced) | `focus:`, `disabled:`                        | Use `@mgcrea/react-native-tailwind` export |
+| Component              | Supported Modifiers                        | Notes                                      |
+| ---------------------- | ------------------------------------------ | ------------------------------------------ |
+| `Pressable` (enhanced) | `active:`, `hover:`, `focus:`, `disabled:` | Use `@mgcrea/react-native-tailwind` export |
+| `TextInput` (enhanced) | `focus:`, `disabled:`                      | Use `@mgcrea/react-native-tailwind` export |
 
 #### Disabled Modifier (Pressable & TextInput)
 
@@ -682,9 +397,7 @@ export function SubmitButton({ isLoading }) {
       disabled={isLoading}
       className="bg-blue-500 active:bg-blue-700 disabled:bg-gray-400 p-4 rounded-lg"
     >
-      <Text className="text-white font-semibold">
-        {isLoading ? "Loading..." : "Submit"}
-      </Text>
+      <Text className="text-white font-semibold">{isLoading ? "Loading..." : "Submit"}</Text>
     </Pressable>
   );
 }
@@ -870,47 +583,295 @@ export function Button({ title, onPress, style, containerStyle }: ButtonProps) {
 
 This pattern allows you to build component libraries with optimized default styling while still supporting full customization.
 
-## Architecture
+## API Reference
+
+### Spacing
 
-### Compile-Time Transformation
+**Margin & Padding:**
 
-The Babel plugin performs all transformations during build time, ensuring zero runtime overhead:
+- `m-{size}`, `p-{size}` — All sides
+- `mx-{size}`, `my-{size}`, `px-{size}`, `py-{size}` — Horizontal/vertical
+- `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}` — Directional margin
+- `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}` — Directional padding
+- `gap-{size}` — Gap between flex items
 
-1. **AST Transformation** — Visits JSX elements and finds `className` attributes
-2. **Static Analysis** — Only processes string literals (dynamic values produce warnings)
-3. **Style Registry** — Collects all className → style mappings per file
-4. **Code Generation** — Injects `StyleSheet.create()` at end of file
-5. **Import Management** — Adds `StyleSheet` import if needed
+**Available sizes:** `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `14`, `16`, `20`, `24`, `28`, `32`, `36`, `40`, `44`, `48`, `52`, `56`, `60`, `64`, `72`, `80`, `96`
 
-### Performance Characteristics
+**Arbitrary values:** `m-[16px]`, `p-[20]`, `mx-[24px]`, `gap-[12px]` — Custom spacing values (px only)
 
-| Metric           | Value              |
-| ---------------- | ------------------ |
-| Runtime Overhead | 0ms (compile-time) |
-| Bundle Size      | ~4KB typical       |
-| Build Time       | +50-200ms          |
+### Layout
 
-**Why it's fast:**
+**Flexbox:**
 
-- ⚡ All className parsing happens at build time
-- 🎯 Uses React Native's optimized `StyleSheet.create` API
-- 📦 Tree shaking — only includes styles actually used
-- 🔄 Deduplication — identical styles reused across components
+- `flex`, `flex-1`, `flex-auto`, `flex-none` — Flex sizing
+- `flex-row`, `flex-row-reverse`, `flex-col`, `flex-col-reverse` — Direction
+- `flex-wrap`, `flex-wrap-reverse`, `flex-nowrap` — Wrapping
+- `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch` — Align items
+- `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly` — Justify content
+- `self-auto`, `self-start`, `self-end`, `self-center`, `self-stretch`, `self-baseline` — Align self
+- `grow`, `grow-0`, `shrink`, `shrink-0` — Flex grow/shrink
 
-## Limitations
+**Other:**
 
-**Dynamic class names are not supported** — The Babel plugin can only transform static string literals:
+- `absolute`, `relative` — Position
+- `overflow-hidden`, `overflow-visible`, `overflow-scroll` — Overflow
+- `flex`, `hidden` — Display
+
+### Colors
+
+- `bg-{color}-{shade}` — Background color
+- `text-{color}-{shade}` — Text color
+- `border-{color}-{shade}` — Border color
+
+**Available colors:** `gray`, `red`, `blue`, `green`, `yellow`, `purple`, `pink`, `orange`, `indigo`, `white`, `black`, `transparent`
+
+**Available shades:** `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
+
+> **Note:** You can extend the color palette with custom colors via `tailwind.config.*` — see [Custom Colors](#custom-colors)
+
+**Opacity Modifiers:**
+
+Apply transparency to any color using the `/` operator with a percentage value (0-100):
 
 ```tsx
-// ❌ This will NOT work
-const spacing = 4;
-<View className={`m-${spacing} p-2`} />
+<View className="bg-black/50 p-4">
+  {" "}
+  {/* 50% opacity black background */}
+  <Text className="text-gray-900/80">
+    {" "}
+    {/* 80% opacity gray text */}
+    Semi-transparent content
+  </Text>
+  <View className="border-2 border-red-500/30" /> {/* 30% opacity red border */}
+</View>
+```
 
-// ✅ Use inline styles for dynamic values
-<View className="p-2" style={{ margin: spacing * 4 }} />
+- Works with all color types: `bg-*`, `text-*`, `border-*`
+- Supports preset colors: `bg-blue-500/75`, `text-red-600/50`
+- Supports arbitrary colors: `bg-[#ff0000]/40`, `text-[#3B82F6]/90`
+- Supports custom colors: `bg-primary/60`, `text-brand/80`
+- Uses React Native's 8-digit hex format: `#RRGGBBAA`
+
+**Examples:**
+
+```tsx
+// Background opacity
+<View className="bg-white/90" />          // #FFFFFFE6
+<View className="bg-blue-500/50" />       // #3B82F680
+
+// Text opacity
+<Text className="text-black/70" />        // #000000B3
+<Text className="text-gray-900/60" />     // #11182799
+
+// Border opacity
+<View className="border-2 border-purple-500/40" /> // #A855F766
+
+// Arbitrary colors with opacity
+<View className="bg-[#ff6b6b]/25" />      // #FF6B6B40
+
+// Edge cases
+<View className="bg-black/0" />           // Fully transparent
+<View className="bg-blue-500/100" />      // Fully opaque
+<View className="bg-transparent/50" />    // Remains transparent
 ```
 
-For dynamic styling, use the `style` prop alongside `className`.
+### Typography
+
+**Font Size:**
+
+`text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `text-9xl`
+
+**Font Weight:**
+
+`font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`
+
+**Other:**
+
+- `italic`, `not-italic` — Font style
+- `text-left`, `text-center`, `text-right`, `text-justify` — Text alignment
+- `underline`, `line-through`, `no-underline` — Text decoration
+- `uppercase`, `lowercase`, `capitalize`, `normal-case` — Text transform
+- `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, `leading-loose` — Line height
+
+### Borders
+
+**Width:**
+
+- `border`, `border-0`, `border-2`, `border-4`, `border-8` — All sides
+- `border-t`, `border-r`, `border-b`, `border-l` (with variants `-0`, `-2`, `-4`, `-8`) — Directional
+- `border-[8px]`, `border-t-[12px]` — Arbitrary values
+
+**Radius:**
+
+- `rounded-none`, `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full` — All corners
+- `rounded-t`, `rounded-r`, `rounded-b`, `rounded-l` (with size variants) — Directional
+- `rounded-tl`, `rounded-tr`, `rounded-bl`, `rounded-br` (with size variants) — Individual corners
+- `rounded-[12px]`, `rounded-t-[8px]`, `rounded-tl-[16px]` — Arbitrary values
+
+**Style:**
+
+`border-solid`, `border-dotted`, `border-dashed`
+
+### Shadows & Elevation
+
+Apply platform-specific shadows and elevation to create depth and visual hierarchy. Automatically uses iOS shadow properties or Android elevation based on the platform:
+
+**Available shadow sizes:**
+
+- `shadow-sm` — Subtle shadow
+- `shadow` — Default shadow
+- `shadow-md` — Medium shadow
+- `shadow-lg` — Large shadow
+- `shadow-xl` — Extra large shadow
+- `shadow-2xl` — Extra extra large shadow
+- `shadow-none` — Remove shadow
+
+**Platform Differences:**
+
+| Platform    | Properties Used                                                | Example Output                             |
+| ----------- | -------------------------------------------------------------- | ------------------------------------------ |
+| **iOS**     | `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` | Native iOS shadow rendering                |
+| **Android** | `elevation`                                                    | Native Android elevation (Material Design) |
+
+**Examples:**
+
+```tsx
+// Card with shadow
+<View className="bg-white rounded-lg shadow-lg p-6 m-4">
+  <Text className="text-xl font-bold">Card Title</Text>
+  <Text className="text-gray-600">Card with large shadow</Text>
+</View>
+
+// Button with subtle shadow
+<Pressable className="bg-blue-500 shadow-sm rounded-lg px-6 py-3">
+  <Text className="text-white">Press Me</Text>
+</Pressable>
+
+// Different shadow sizes
+<View className="shadow-sm p-4">Subtle</View>
+<View className="shadow p-4">Default</View>
+<View className="shadow-md p-4">Medium</View>
+<View className="shadow-lg p-4">Large</View>
+<View className="shadow-xl p-4">Extra Large</View>
+<View className="shadow-2xl p-4">2X Large</View>
+
+// Remove shadow
+<View className="shadow-lg md:shadow-none p-4">
+  Conditional shadow removal
+</View>
+```
+
+**iOS Shadow Values:**
+
+| Class        | shadowOpacity | shadowRadius | shadowOffset             |
+| ------------ | ------------- | ------------ | ------------------------ |
+| `shadow-sm`  | 0.05          | 1            | { width: 0, height: 1 }  |
+| `shadow`     | 0.1           | 2            | { width: 0, height: 1 }  |
+| `shadow-md`  | 0.15          | 4            | { width: 0, height: 3 }  |
+| `shadow-lg`  | 0.2           | 8            | { width: 0, height: 6 }  |
+| `shadow-xl`  | 0.25          | 12           | { width: 0, height: 10 } |
+| `shadow-2xl` | 0.3           | 24           | { width: 0, height: 20 } |
+
+**Android Elevation Values:**
+
+| Class        | elevation |
+| ------------ | --------- |
+| `shadow-sm`  | 1         |
+| `shadow`     | 2         |
+| `shadow-md`  | 4         |
+| `shadow-lg`  | 8         |
+| `shadow-xl`  | 12        |
+| `shadow-2xl` | 16        |
+
+> **Note:** All shadow parsing happens at compile-time with zero runtime overhead. The platform detection uses React Native's `Platform.select()` API.
+
+### Aspect Ratio
+
+Control the aspect ratio of views using preset or arbitrary values. Requires React Native 0.71+:
+
+**Preset values:**
+
+- `aspect-auto` — Remove aspect ratio constraint
+- `aspect-square` — 1:1 aspect ratio
+- `aspect-video` — 16:9 aspect ratio
+
+**Arbitrary values:**
+
+Use `aspect-[width/height]` for custom ratios:
+
+```tsx
+<View className="aspect-[4/3]" />    // 4:3 ratio (1.333...)
+<View className="aspect-[16/9]" />   // 16:9 ratio (1.778...)
+<View className="aspect-[21/9]" />   // 21:9 ultrawide
+<View className="aspect-[9/16]" />   // 9:16 portrait
+<View className="aspect-[3/2]" />    // 3:2 ratio (1.5)
+```
+
+**Examples:**
+
+```tsx
+// Square image container
+<View className="w-full aspect-square bg-gray-200">
+  <Image source={avatar} className="w-full h-full" />
+</View>
+
+// Video player container (16:9)
+<View className="w-full aspect-video bg-black">
+  <VideoPlayer />
+</View>
+
+// Instagram-style square grid
+<View className="flex-row flex-wrap gap-2">
+  {photos.map((photo) => (
+    <View key={photo.id} className="w-[32%] aspect-square">
+      <Image source={photo.uri} className="w-full h-full rounded" />
+    </View>
+  ))}
+</View>
+
+// Custom aspect ratio for wide images
+<View className="w-full aspect-[21/9] rounded-lg overflow-hidden">
+  <Image source={banner} className="w-full h-full" resizeMode="cover" />
+</View>
+
+// Portrait orientation
+<View className="h-full aspect-[9/16]">
+  <Story />
+</View>
+
+// Remove aspect ratio constraint
+<View className="aspect-square md:aspect-auto">
+  Responsive aspect ratio
+</View>
+```
+
+**Common Aspect Ratios:**
+
+| Ratio | Class           | Decimal | Use Case                     |
+| ----- | --------------- | ------- | ---------------------------- |
+| 1:1   | `aspect-square` | 1.0     | Profile pictures, thumbnails |
+| 16:9  | `aspect-video`  | 1.778   | Videos, landscape photos     |
+| 4:3   | `aspect-[4/3]`  | 1.333   | Standard photos              |
+| 3:2   | `aspect-[3/2]`  | 1.5     | Classic photography          |
+| 21:9  | `aspect-[21/9]` | 2.333   | Ultrawide/cinematic          |
+| 9:16  | `aspect-[9/16]` | 0.5625  | Stories, vertical video      |
+
+> **Note:** The aspect ratio is calculated as `width / height`. When combined with `w-full`, the height will be automatically calculated to maintain the ratio.
+
+### Sizing
+
+- `w-{size}`, `h-{size}` — Width/height
+- `min-w-{size}`, `min-h-{size}` — Min width/height
+- `max-w-{size}`, `max-h-{size}` — Max width/height
+
+**Available sizes:**
+
+- **Numeric:** `0`-`96` (same as spacing scale)
+- **Fractional:** `1/2`, `1/3`, `2/3`, `1/4`, `3/4`, `1/5`, `2/5`, `3/5`, `4/5`, `1/6`, `2/6`, `3/6`, `4/6`, `5/6`
+- **Special:** `full` (100%), `auto`
+- **Arbitrary:** `w-[123px]`, `h-[50%]`, `min-w-[200px]`, `max-h-[80%]`
+
+> **Note:** Arbitrary sizing supports pixel values (`[123px]` or `[123]`) and percentages (`[50%]`). Other units (`rem`, `em`, `vh`, `vw`) are not supported in React Native.
 
 ## Advanced
 

package/dist/babel/index.cjs

@@ -620,94 +620,57 @@ function parseLayout(cls) {
 }
 
 // src/parser/shadows.ts
-var import_react_native = require("react-native");
-var SHADOW_DEFINITIONS = {
+var SHADOW_SCALE = {
   "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
   }
 };
-function buildShadowScale() {
-  const scale = {};
-  for (const [key, value] of Object.entries(SHADOW_DEFINITIONS)) {
-    scale[key] = import_react_native.Platform.select(value);
-  }
-  return scale;
-}
-var SHADOW_SCALE = buildShadowScale();
 function parseShadow(cls) {
   if (cls in SHADOW_SCALE) {
     return SHADOW_SCALE[cls];

package/dist/parser/shadows.d.ts

@@ -4,23 +4,19 @@
  */
 import type { StyleObject } from "../types";
 /**
- * Helper function to build the shadow scale using Platform.select()
- * This allows tests to rebuild the scale after changing the platform mock
+ * 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
  */
-declare function buildShadowScale(): Record<string, StyleObject>;
-/**
- * Computed shadow scale using Platform.select()
- * This is evaluated at module load time for production use
- */
-declare let SHADOW_SCALE: Record<string, StyleObject>;
-/**
- * Rebuild the shadow scale (useful for testing with platform mocks)
- */
-export declare function rebuildShadowScale(): void;
+declare const SHADOW_SCALE: Record<string, StyleObject>;
 /**
  * Parse shadow classes
  * @param cls - Class name to parse
  * @returns Style object or null if not a shadow class
  */
 export declare function parseShadow(cls: string): StyleObject | null;
-export { buildShadowScale, SHADOW_SCALE };
+export { SHADOW_SCALE };

package/dist/parser/shadows.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SHADOW_SCALE=void 0;exports.buildShadowScale=buildShadowScale;exports.parseShadow=parseShadow;exports.rebuildShadowScale=rebuildShadowScale;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var SHADOW_DEFINITIONS={"shadow-sm":{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:0.05,shadowRadius:1},android:{elevation:1}},shadow:{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:0.1,shadowRadius:2},android:{elevation:2}},"shadow-md":{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:3},shadowOpacity:0.15,shadowRadius:4},android:{elevation:4}},"shadow-lg":{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:6},shadowOpacity:0.2,shadowRadius:8},android:{elevation:8}},"shadow-xl":{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:10},shadowOpacity:0.25,shadowRadius:12},android:{elevation:12}},"shadow-2xl":{ios:{shadowColor:"#000000",shadowOffset:{width:0,height:20},shadowOpacity:0.3,shadowRadius:24},android:{elevation:16}},"shadow-none":{ios:{shadowColor:"transparent",shadowOffset:{width:0,height:0},shadowOpacity:0,shadowRadius:0},android:{elevation:0}}};function buildShadowScale(){var scale={};for(var _ref of Object.entries(SHADOW_DEFINITIONS)){var _ref2=(0,_slicedToArray2.default)(_ref,2);var key=_ref2[0];var value=_ref2[1];scale[key]=_reactNative.Platform.select(value);}return scale;}var SHADOW_SCALE=exports.SHADOW_SCALE=buildShadowScale();function rebuildShadowScale(){exports.SHADOW_SCALE=SHADOW_SCALE=buildShadowScale();}function parseShadow(cls){if(cls in SHADOW_SCALE){return SHADOW_SCALE[cls];}return null;}
+Object.defineProperty(exports,"__esModule",{value:true});exports.SHADOW_SCALE=void 0;exports.parseShadow=parseShadow;var SHADOW_SCALE=exports.SHADOW_SCALE={"shadow-sm":{shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:0.05,shadowRadius:1,elevation:1},shadow:{shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:0.1,shadowRadius:2,elevation:2},"shadow-md":{shadowColor:"#000000",shadowOffset:{width:0,height:3},shadowOpacity:0.15,shadowRadius:4,elevation:4},"shadow-lg":{shadowColor:"#000000",shadowOffset:{width:0,height:6},shadowOpacity:0.2,shadowRadius:8,elevation:8},"shadow-xl":{shadowColor:"#000000",shadowOffset:{width:0,height:10},shadowOpacity:0.25,shadowRadius:12,elevation:12},"shadow-2xl":{shadowColor:"#000000",shadowOffset:{width:0,height:20},shadowOpacity:0.3,shadowRadius:24,elevation:16},"shadow-none":{shadowColor:"transparent",shadowOffset:{width:0,height:0},shadowOpacity:0,shadowRadius:0,elevation:0}};function parseShadow(cls){if(cls in SHADOW_SCALE){return SHADOW_SCALE[cls];}return null;}

package/dist/parser/shadows.test.js

@@ -1 +1 @@
-var _reactNative=require("test/mocks/react-native");var _vitest=require("vitest");var _shadows=require("./shadows");(0,_vitest.beforeEach)(function(){(0,_reactNative.setPlatform)("ios");(0,_shadows.rebuildShadowScale)();});(0,_vitest.describe)("SHADOW_SCALE",function(){(0,_vitest.it)("should export complete shadow scale",function(){(0,_vitest.expect)(_shadows.SHADOW_SCALE).toMatchSnapshot();});(0,_vitest.it)("should have all shadow variants",function(){(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-sm");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-md");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-lg");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-xl");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-2xl");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-none");});});(0,_vitest.describe)("parseShadow - basic shadows",function(){(0,_vitest.it)("should parse shadow-sm",function(){var result=(0,_shadows.parseShadow)("shadow-sm");(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(result).toHaveProperty("shadowColor");(0,_vitest.expect)(result).toHaveProperty("shadowOffset");(0,_vitest.expect)(result).toHaveProperty("shadowOpacity");(0,_vitest.expect)(result).toHaveProperty("shadowRadius");});(0,_vitest.it)("should parse default shadow",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-md",function(){var result=(0,_shadows.parseShadow)("shadow-md");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-lg",function(){var result=(0,_shadows.parseShadow)("shadow-lg");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-xl",function(){var result=(0,_shadows.parseShadow)("shadow-xl");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-2xl",function(){var result=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-none",function(){var result=(0,_shadows.parseShadow)("shadow-none");(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(result).toMatchObject({shadowColor:"transparent",shadowOpacity:0,shadowRadius:0});});});(0,_vitest.describe)("parseShadow - shadow properties (iOS)",function(){(0,_vitest.beforeEach)(function(){(0,_reactNative.setPlatform)("ios");});(0,_vitest.it)("should have increasing shadow values for larger shadows",function(){var sm=(0,_shadows.parseShadow)("shadow-sm");var md=(0,_shadows.parseShadow)("shadow-md");var lg=(0,_shadows.parseShadow)("shadow-lg");var xl=(0,_shadows.parseShadow)("shadow-xl");var xxl=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(md==null?void 0:md.shadowOpacity).toBeGreaterThan(sm==null?void 0:sm.shadowOpacity);(0,_vitest.expect)(lg==null?void 0:lg.shadowOpacity).toBeGreaterThan(md==null?void 0:md.shadowOpacity);(0,_vitest.expect)(md==null?void 0:md.shadowRadius).toBeGreaterThan(sm==null?void 0:sm.shadowRadius);(0,_vitest.expect)(lg==null?void 0:lg.shadowRadius).toBeGreaterThan(md==null?void 0:md.shadowRadius);(0,_vitest.expect)(xl==null?void 0:xl.shadowRadius).toBeGreaterThan(lg==null?void 0:lg.shadowRadius);(0,_vitest.expect)(xxl==null?void 0:xxl.shadowRadius).toBeGreaterThan(xl==null?void 0:xl.shadowRadius);});(0,_vitest.it)("should use consistent shadow color",function(){var shadows=["shadow-sm","shadow","shadow-md","shadow-lg","shadow-xl","shadow-2xl"];shadows.forEach(function(shadow){var result=(0,_shadows.parseShadow)(shadow);(0,_vitest.expect)(result==null?void 0:result.shadowColor).toBe("#000000");});});(0,_vitest.it)("should have proper shadowOffset structure",function(){var _result$shadowOffset,_result$shadowOffset2;var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result==null?void 0:result.shadowOffset).toHaveProperty("width");(0,_vitest.expect)(result==null?void 0:result.shadowOffset).toHaveProperty("height");(0,_vitest.expect)(typeof(result==null||(_result$shadowOffset=result.shadowOffset)==null?void 0:_result$shadowOffset.width)).toBe("number");(0,_vitest.expect)(typeof(result==null||(_result$shadowOffset2=result.shadowOffset)==null?void 0:_result$shadowOffset2.height)).toBe("number");});(0,_vitest.it)("should not have elevation property on iOS",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).not.toHaveProperty("elevation");});});(0,_vitest.describe)("parseShadow - shadow properties (Android)",function(){(0,_vitest.beforeEach)(function(){(0,_reactNative.setPlatform)("android");(0,_shadows.rebuildShadowScale)();});(0,_vitest.it)("should have increasing elevation values for larger shadows",function(){var sm=(0,_shadows.parseShadow)("shadow-sm");var md=(0,_shadows.parseShadow)("shadow-md");var lg=(0,_shadows.parseShadow)("shadow-lg");var xl=(0,_shadows.parseShadow)("shadow-xl");var xxl=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(md==null?void 0:md.elevation).toBeGreaterThan(sm==null?void 0:sm.elevation);(0,_vitest.expect)(lg==null?void 0:lg.elevation).toBeGreaterThan(md==null?void 0:md.elevation);(0,_vitest.expect)(xl==null?void 0:xl.elevation).toBeGreaterThan(lg==null?void 0:lg.elevation);(0,_vitest.expect)(xxl==null?void 0:xxl.elevation).toBeGreaterThan(xl==null?void 0:xl.elevation);});(0,_vitest.it)("should not have shadow properties on Android",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).not.toHaveProperty("shadowColor");(0,_vitest.expect)(result).not.toHaveProperty("shadowOffset");(0,_vitest.expect)(result).not.toHaveProperty("shadowOpacity");(0,_vitest.expect)(result).not.toHaveProperty("shadowRadius");});});(0,_vitest.describe)("parseShadow - invalid classes",function(){(0,_vitest.it)("should return null for invalid shadow classes",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-invalid")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadows")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-small")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-3xl")).toBeNull();});(0,_vitest.it)("should return null for non-shadow classes",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("bg-blue-500")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("p-4")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("text-white")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("border-2")).toBeNull();});(0,_vitest.it)("should return null for empty or invalid input",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow123")).toBeNull();});});(0,_vitest.describe)("parseShadow - comprehensive coverage",function(){(0,_vitest.it)("should parse all shadow variants without errors",function(){var variants=["shadow-sm","shadow","shadow-md","shadow-lg","shadow-xl","shadow-2xl","shadow-none"];variants.forEach(function(variant){var result=(0,_shadows.parseShadow)(variant);(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(typeof result).toBe("object");});});(0,_vitest.it)("should return consistent results for same input",function(){var result1=(0,_shadows.parseShadow)("shadow-md");var result2=(0,_shadows.parseShadow)("shadow-md");(0,_vitest.expect)(result1).toEqual(result2);});(0,_vitest.it)("should handle case-sensitive class names",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("SHADOW")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("Shadow-md")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-MD")).toBeNull();});});
+var _vitest=require("vitest");var _shadows=require("./shadows");(0,_vitest.describe)("SHADOW_SCALE",function(){(0,_vitest.it)("should export complete shadow scale",function(){(0,_vitest.expect)(_shadows.SHADOW_SCALE).toMatchSnapshot();});(0,_vitest.it)("should have all shadow variants",function(){(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-sm");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-md");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-lg");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-xl");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-2xl");(0,_vitest.expect)(_shadows.SHADOW_SCALE).toHaveProperty("shadow-none");});});(0,_vitest.describe)("parseShadow - basic shadows",function(){(0,_vitest.it)("should parse shadow-sm",function(){var result=(0,_shadows.parseShadow)("shadow-sm");(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(result).toHaveProperty("shadowColor");(0,_vitest.expect)(result).toHaveProperty("shadowOffset");(0,_vitest.expect)(result).toHaveProperty("shadowOpacity");(0,_vitest.expect)(result).toHaveProperty("shadowRadius");});(0,_vitest.it)("should parse default shadow",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-md",function(){var result=(0,_shadows.parseShadow)("shadow-md");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-lg",function(){var result=(0,_shadows.parseShadow)("shadow-lg");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-xl",function(){var result=(0,_shadows.parseShadow)("shadow-xl");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-2xl",function(){var result=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(result).toBeTruthy();});(0,_vitest.it)("should parse shadow-none",function(){var result=(0,_shadows.parseShadow)("shadow-none");(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(result).toMatchObject({shadowColor:"transparent",shadowOpacity:0,shadowRadius:0});});});(0,_vitest.describe)("parseShadow - shadow properties (iOS)",function(){(0,_vitest.it)("should have increasing shadow values for larger shadows",function(){var sm=(0,_shadows.parseShadow)("shadow-sm");var md=(0,_shadows.parseShadow)("shadow-md");var lg=(0,_shadows.parseShadow)("shadow-lg");var xl=(0,_shadows.parseShadow)("shadow-xl");var xxl=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(md==null?void 0:md.shadowOpacity).toBeGreaterThan(sm==null?void 0:sm.shadowOpacity);(0,_vitest.expect)(lg==null?void 0:lg.shadowOpacity).toBeGreaterThan(md==null?void 0:md.shadowOpacity);(0,_vitest.expect)(md==null?void 0:md.shadowRadius).toBeGreaterThan(sm==null?void 0:sm.shadowRadius);(0,_vitest.expect)(lg==null?void 0:lg.shadowRadius).toBeGreaterThan(md==null?void 0:md.shadowRadius);(0,_vitest.expect)(xl==null?void 0:xl.shadowRadius).toBeGreaterThan(lg==null?void 0:lg.shadowRadius);(0,_vitest.expect)(xxl==null?void 0:xxl.shadowRadius).toBeGreaterThan(xl==null?void 0:xl.shadowRadius);});(0,_vitest.it)("should use consistent shadow color",function(){var shadows=["shadow-sm","shadow","shadow-md","shadow-lg","shadow-xl","shadow-2xl"];shadows.forEach(function(shadow){var result=(0,_shadows.parseShadow)(shadow);(0,_vitest.expect)(result==null?void 0:result.shadowColor).toBe("#000000");});});(0,_vitest.it)("should have proper shadowOffset structure",function(){var result=(0,_shadows.parseShadow)("shadow");var shadowOffset=result==null?void 0:result.shadowOffset;(0,_vitest.expect)(shadowOffset).toHaveProperty("width");(0,_vitest.expect)(shadowOffset).toHaveProperty("height");if(typeof shadowOffset==="object"&&shadowOffset!==null){(0,_vitest.expect)(typeof shadowOffset.width).toBe("number");(0,_vitest.expect)(typeof shadowOffset.height).toBe("number");}});(0,_vitest.it)("should include both iOS shadow and Android elevation properties",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).toHaveProperty("shadowColor");(0,_vitest.expect)(result).toHaveProperty("shadowOffset");(0,_vitest.expect)(result).toHaveProperty("shadowOpacity");(0,_vitest.expect)(result).toHaveProperty("shadowRadius");(0,_vitest.expect)(result).toHaveProperty("elevation");});});(0,_vitest.describe)("parseShadow - shadow properties (Android)",function(){(0,_vitest.it)("should have increasing elevation values for larger shadows",function(){var sm=(0,_shadows.parseShadow)("shadow-sm");var md=(0,_shadows.parseShadow)("shadow-md");var lg=(0,_shadows.parseShadow)("shadow-lg");var xl=(0,_shadows.parseShadow)("shadow-xl");var xxl=(0,_shadows.parseShadow)("shadow-2xl");(0,_vitest.expect)(md==null?void 0:md.elevation).toBeGreaterThan(sm==null?void 0:sm.elevation);(0,_vitest.expect)(lg==null?void 0:lg.elevation).toBeGreaterThan(md==null?void 0:md.elevation);(0,_vitest.expect)(xl==null?void 0:xl.elevation).toBeGreaterThan(lg==null?void 0:lg.elevation);(0,_vitest.expect)(xxl==null?void 0:xxl.elevation).toBeGreaterThan(xl==null?void 0:xl.elevation);});(0,_vitest.it)("should include elevation property for Android",function(){var result=(0,_shadows.parseShadow)("shadow");(0,_vitest.expect)(result).toHaveProperty("elevation");(0,_vitest.expect)(typeof(result==null?void 0:result.elevation)).toBe("number");});});(0,_vitest.describe)("parseShadow - invalid classes",function(){(0,_vitest.it)("should return null for invalid shadow classes",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-invalid")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadows")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-small")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-3xl")).toBeNull();});(0,_vitest.it)("should return null for non-shadow classes",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("bg-blue-500")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("p-4")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("text-white")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("border-2")).toBeNull();});(0,_vitest.it)("should return null for empty or invalid input",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow123")).toBeNull();});});(0,_vitest.describe)("parseShadow - comprehensive coverage",function(){(0,_vitest.it)("should parse all shadow variants without errors",function(){var variants=["shadow-sm","shadow","shadow-md","shadow-lg","shadow-xl","shadow-2xl","shadow-none"];variants.forEach(function(variant){var result=(0,_shadows.parseShadow)(variant);(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(typeof result).toBe("object");});});(0,_vitest.it)("should return consistent results for same input",function(){var result1=(0,_shadows.parseShadow)("shadow-md");var result2=(0,_shadows.parseShadow)("shadow-md");(0,_vitest.expect)(result1).toEqual(result2);});(0,_vitest.it)("should handle case-sensitive class names",function(){(0,_vitest.expect)((0,_shadows.parseShadow)("SHADOW")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("Shadow-md")).toBeNull();(0,_vitest.expect)((0,_shadows.parseShadow)("shadow-MD")).toBeNull();});});

package/dist/types.d.ts

@@ -3,12 +3,10 @@
  */
 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;
 export type Parser = (className: string) => StyleObject | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

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/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;