Skip to content

Commit 19dc258

Browse files
committed
docs: update transforms documentation for multiple transform support
Replace limitation warning with documentation showing multiple transforms are now fully supported. Add examples and note about transform order preservation.
1 parent 95b8b25 commit 19dc258

File tree

1 file changed

+20
-11
lines changed

1 file changed

+20
-11
lines changed

docs/src/content/docs/reference/transforms.md

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -147,24 +147,33 @@ Uses spacing scale (same as `m-*`, `p-*`):
147147
<View className="skew-x-6 w-16 h-16 bg-cyan-500" />
148148
```
149149

150-
## Multiple Transforms Limitation
150+
## Multiple Transforms
151151

152-
:::caution
153-
Due to the current architecture, multiple transform classes on the same element will overwrite each other. For example:
152+
Multiple transform classes on the same element are fully supported and will be combined into a single transform array:
154153

155154
```tsx
156-
// ❌ Only rotate-45 will apply (overwrites scale-110)
155+
// ✅ Both transforms are applied
157156
<View className="scale-110 rotate-45 w-16 h-16 bg-blue-500" />
157+
// Compiles to: { transform: [{ scale: 1.1 }, { rotate: '45deg' }], ... }
158158

159-
// ✅ Workaround: Use nested Views for multiple transforms
160-
<View className="scale-110">
161-
<View className="rotate-45">
162-
<View className="w-16 h-16 bg-blue-500" />
163-
</View>
164-
</View>
159+
// ✅ Combine many transforms
160+
<View className="perspective-500 rotate-45 scale-110 translate-x-4" />
161+
// Compiles to: { transform: [{ perspective: 500 }, { rotate: '45deg' }, { scale: 1.1 }, { translateX: 16 }] }
162+
```
163+
164+
:::note[Order Matters]
165+
Transform order is preserved from the className string. In React Native (and CSS), different orders produce different visual results:
166+
167+
```tsx
168+
// Rotate first, then scale
169+
<View className="rotate-45 scale-110" />
170+
// { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
171+
172+
// Scale first, then rotate
173+
<View className="scale-110 rotate-45" />
174+
// { transform: [{ scale: 1.1 }, { rotate: '45deg' }] }
165175
```
166176

167-
This limitation exists because the current parser uses `Object.assign()` which overwrites the `transform` property.
168177
:::
169178

170179
## What's Not Supported

0 commit comments

Comments
 (0)