Skip to content

Commit af3e7bf

Browse files
BrentlokBrentlok
authored
docs: split uniwind skill (#583)
* docs: split uniwind skill * docs: update references in troubleshooting
1 parent f23e849 commit af3e7bf

10 files changed

Lines changed: 2200 additions & 2184 deletions

File tree

‎skills/uniwind/SKILL.md‎

Lines changed: 18 additions & 2184 deletions
Large diffs are not rendered by default.

‎skills/uniwind/references/component-bindings.md‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
## Component Bindings
2+
3+
All core React Native components support `className` out of the box. Some have additional className props for sub-styles (like `contentContainerClassName`) and non-style color props (requiring `accent-` prefix).
4+
5+
### Complete Reference
6+
7+
**Legend**: Props marked with ⚡ require the `accent-` prefix. Props in parentheses are platform-specific.
8+
9+
#### View
10+
11+
| Prop | Maps to | Prefix |
12+
|------|---------|--------|
13+
| `className` | `style` | — |
14+
15+
#### Text
16+
17+
| Prop | Maps to | Prefix |
18+
|------|---------|--------|
19+
| `className` | `style` | — |
20+
| `selectionColorClassName` | `selectionColor` | ⚡ `accent-` |
21+
22+
#### Pressable
23+
24+
| Prop | Maps to | Prefix |
25+
|------|---------|--------|
26+
| `className` | `style` | — |
27+
28+
Supports `active:`, `disabled:`, `focus:` state selectors.
29+
30+
#### Image
31+
32+
| Prop | Maps to | Prefix |
33+
|------|---------|--------|
34+
| `className` | `style` | — |
35+
| `tintColorClassName` | `tintColor` | ⚡ `accent-` |
36+
37+
#### TextInput
38+
39+
| Prop | Maps to | Prefix |
40+
|------|---------|--------|
41+
| `className` | `style` | — |
42+
| `cursorColorClassName` | `cursorColor` | ⚡ `accent-` |
43+
| `selectionColorClassName` | `selectionColor` | ⚡ `accent-` |
44+
| `placeholderTextColorClassName` | `placeholderTextColor` | ⚡ `accent-` |
45+
| `selectionHandleColorClassName` | `selectionHandleColor` | ⚡ `accent-` |
46+
| `underlineColorAndroidClassName` | `underlineColorAndroid` (Android) | ⚡ `accent-` |
47+
48+
Supports `focus:`, `active:`, `disabled:` state selectors.
49+
50+
#### ScrollView
51+
52+
| Prop | Maps to | Prefix |
53+
|------|---------|--------|
54+
| `className` | `style` | — |
55+
| `contentContainerClassName` | `contentContainerStyle` | — |
56+
| `endFillColorClassName` | `endFillColor` | ⚡ `accent-` |
57+
58+
#### FlatList
59+
60+
| Prop | Maps to | Prefix |
61+
|------|---------|--------|
62+
| `className` | `style` | — |
63+
| `contentContainerClassName` | `contentContainerStyle` | — |
64+
| `columnWrapperClassName` | `columnWrapperStyle` | — |
65+
| `ListHeaderComponentClassName` | `ListHeaderComponentStyle` | — |
66+
| `ListFooterComponentClassName` | `ListFooterComponentStyle` | — |
67+
| `endFillColorClassName` | `endFillColor` | ⚡ `accent-` |
68+
69+
#### SectionList
70+
71+
| Prop | Maps to | Prefix |
72+
|------|---------|--------|
73+
| `className` | `style` | — |
74+
| `contentContainerClassName` | `contentContainerStyle` | — |
75+
| `ListHeaderComponentClassName` | `ListHeaderComponentStyle` | — |
76+
| `ListFooterComponentClassName` | `ListFooterComponentStyle` | — |
77+
| `endFillColorClassName` | `endFillColor` | ⚡ `accent-` |
78+
79+
#### VirtualizedList
80+
81+
| Prop | Maps to | Prefix |
82+
|------|---------|--------|
83+
| `className` | `style` | — |
84+
| `contentContainerClassName` | `contentContainerStyle` | — |
85+
| `ListHeaderComponentClassName` | `ListHeaderComponentStyle` | — |
86+
| `ListFooterComponentClassName` | `ListFooterComponentStyle` | — |
87+
| `endFillColorClassName` | `endFillColor` | ⚡ `accent-` |
88+
89+
#### Switch
90+
91+
| Prop | Maps to | Prefix |
92+
|------|---------|--------|
93+
| `thumbColorClassName` | `thumbColor` | ⚡ `accent-` |
94+
| `trackColorOnClassName` | `trackColor.true` (on) | ⚡ `accent-` |
95+
| `trackColorOffClassName` | `trackColor.false` (off) | ⚡ `accent-` |
96+
| `ios_backgroundColorClassName` | `ios_backgroundColor` (iOS) | ⚡ `accent-` |
97+
98+
Note: Switch does NOT support `className` (`className?: never` in types). Use only the color-specific className props above. Supports `disabled:` state selector.
99+
100+
#### ActivityIndicator
101+
102+
| Prop | Maps to | Prefix |
103+
|------|---------|--------|
104+
| `className` | `style` | — |
105+
| `colorClassName` | `color` | ⚡ `accent-` |
106+
107+
#### Button
108+
109+
| Prop | Maps to | Prefix |
110+
|------|---------|--------|
111+
| `colorClassName` | `color` | ⚡ `accent-` |
112+
113+
Note: Button does not support `className` (no `style` prop on RN Button).
114+
115+
#### Modal
116+
117+
| Prop | Maps to | Prefix |
118+
|------|---------|--------|
119+
| `className` | `style` | — |
120+
| `backdropColorClassName` | `backdropColor` | ⚡ `accent-` |
121+
122+
#### RefreshControl
123+
124+
| Prop | Maps to | Prefix |
125+
|------|---------|--------|
126+
| `className` | `style` | — |
127+
| `colorsClassName` | `colors` (Android) | ⚡ `accent-` |
128+
| `tintColorClassName` | `tintColor` (iOS) | ⚡ `accent-` |
129+
| `titleColorClassName` | `titleColor` (iOS) | ⚡ `accent-` |
130+
| `progressBackgroundColorClassName` | `progressBackgroundColor` (Android) | ⚡ `accent-` |
131+
132+
#### ImageBackground
133+
134+
| Prop | Maps to | Prefix |
135+
|------|---------|--------|
136+
| `className` | `style` | — |
137+
| `imageClassName` | `imageStyle` | — |
138+
| `tintColorClassName` | `tintColor` | ⚡ `accent-` |
139+
140+
#### SafeAreaView
141+
142+
| Prop | Maps to | Prefix |
143+
|------|---------|--------|
144+
| `className` | `style` | — |
145+
146+
#### KeyboardAvoidingView
147+
148+
| Prop | Maps to | Prefix |
149+
|------|---------|--------|
150+
| `className` | `style` | — |
151+
| `contentContainerClassName` | `contentContainerStyle` | — |
152+
153+
#### InputAccessoryView
154+
155+
| Prop | Maps to | Prefix |
156+
|------|---------|--------|
157+
| `className` | `style` | — |
158+
| `backgroundColorClassName` | `backgroundColor` | ⚡ `accent-` |
159+
160+
#### TouchableHighlight
161+
162+
| Prop | Maps to | Prefix |
163+
|------|---------|--------|
164+
| `className` | `style` | — |
165+
| `underlayColorClassName` | `underlayColor` | ⚡ `accent-` |
166+
167+
Supports `active:`, `disabled:` state selectors.
168+
169+
#### TouchableOpacity
170+
171+
| Prop | Maps to | Prefix |
172+
|------|---------|--------|
173+
| `className` | `style` | — |
174+
175+
Supports `active:`, `disabled:` state selectors.
176+
177+
#### TouchableNativeFeedback
178+
179+
| Prop | Maps to | Prefix |
180+
|------|---------|--------|
181+
| `className` | `style` | — |
182+
183+
Supports `active:`, `disabled:` state selectors.
184+
185+
#### TouchableWithoutFeedback
186+
187+
| Prop | Maps to | Prefix |
188+
|------|---------|--------|
189+
| `className` | `style` | — |
190+
191+
Supports `active:`, `disabled:` state selectors.
192+
193+
### Usage Examples
194+
195+
```tsx
196+
import { View, Text, Pressable, TextInput, ScrollView, FlatList, Switch, Image, ActivityIndicator, Modal, RefreshControl, Button } from 'react-native';
197+
198+
// View — basic layout
199+
<View className="flex-1 bg-background p-4">
200+
<Text className="text-foreground text-lg font-bold">Title</Text>
201+
</View>
202+
203+
// Pressable — with press/focus states
204+
<Pressable className="bg-primary px-6 py-3 rounded-lg active:opacity-80 active:bg-primary/90 focus:ring-2">
205+
<Text className="text-white text-center font-semibold">Press Me</Text>
206+
</Pressable>
207+
208+
// TextInput — with focus state and accent- color props
209+
<TextInput
210+
className="border border-border rounded-lg px-4 py-2 text-base text-foreground focus:border-primary"
211+
placeholderTextColorClassName="accent-muted"
212+
selectionColorClassName="accent-primary"
213+
cursorColorClassName="accent-primary"
214+
selectionHandleColorClassName="accent-primary"
215+
underlineColorAndroidClassName="accent-transparent"
216+
placeholder="Enter text..."
217+
/>
218+
219+
// ScrollView — with content container
220+
<ScrollView className="flex-1" contentContainerClassName="p-4 gap-4">
221+
{/* content */}
222+
</ScrollView>
223+
224+
// FlatList — with all sub-style props
225+
<FlatList
226+
className="flex-1"
227+
contentContainerClassName="p-4 gap-3"
228+
columnWrapperClassName="gap-3"
229+
ListHeaderComponentClassName="pb-4"
230+
ListFooterComponentClassName="pt-4"
231+
endFillColorClassName="accent-gray-100"
232+
numColumns={2}
233+
data={items}
234+
renderItem={({ item }) => <ItemCard item={item} />}
235+
/>
236+
237+
// Switch — no className support, use color-specific props only
238+
<Switch
239+
thumbColorClassName="accent-white"
240+
trackColorOnClassName="accent-primary"
241+
trackColorOffClassName="accent-gray-300 dark:accent-gray-700"
242+
ios_backgroundColorClassName="accent-gray-200"
243+
/>
244+
245+
// Image — tint color
246+
<Image className="w-6 h-6" tintColorClassName="accent-primary" source={icon} />
247+
248+
// ActivityIndicator
249+
<ActivityIndicator className="m-4" colorClassName="accent-primary" size="large" />
250+
251+
// Button — only colorClassName (no className)
252+
<Button colorClassName="accent-primary" title="Submit" onPress={handleSubmit} />
253+
254+
// Modal — backdrop color
255+
<Modal className="flex-1" backdropColorClassName="accent-black/50">
256+
{/* content */}
257+
</Modal>
258+
259+
// RefreshControl — platform-specific color props
260+
<RefreshControl
261+
className="p-4"
262+
tintColorClassName="accent-primary"
263+
titleColorClassName="accent-gray-500"
264+
colorsClassName="accent-primary"
265+
progressBackgroundColorClassName="accent-white dark:accent-gray-800"
266+
/>
267+
268+
// ImageBackground — separate image styling
269+
<ImageBackground
270+
className="flex-1 justify-center items-center"
271+
imageClassName="opacity-50"
272+
tintColorClassName="accent-blue-500"
273+
source={bgImage}
274+
>
275+
<Text className="text-white text-2xl font-bold">Overlay</Text>
276+
</ImageBackground>
277+
278+
// KeyboardAvoidingView
279+
<KeyboardAvoidingView
280+
behavior="padding"
281+
className="flex-1 bg-white"
282+
contentContainerClassName="p-4 justify-end"
283+
>
284+
<TextInput className="border border-gray-300 rounded-lg p-3" placeholder="Type..." />
285+
</KeyboardAvoidingView>
286+
287+
// InputAccessoryView
288+
<InputAccessoryView
289+
className="p-4 border-t border-gray-300"
290+
backgroundColorClassName="accent-white dark:accent-gray-800"
291+
>
292+
<Button title="Done" onPress={dismissKeyboard} />
293+
</InputAccessoryView>
294+
295+
// TouchableHighlight — underlay color
296+
<TouchableHighlight
297+
className="bg-blue-500 px-6 py-3 rounded-lg"
298+
underlayColorClassName="accent-blue-600 dark:accent-blue-700"
299+
onPress={handlePress}
300+
>
301+
<Text className="text-white font-semibold">Press Me</Text>
302+
</TouchableHighlight>
303+
```
304+
305+
## The accent- Prefix Pattern
306+
307+
React Native components have props like `color`, `tintColor`, `thumbColor` that are NOT part of the `style` object. To set these via Tailwind classes, use the `accent-` prefix with the corresponding `{propName}ClassName` prop:
308+
309+
```tsx
310+
// color prop → colorClassName with accent- prefix
311+
<ActivityIndicator colorClassName="accent-blue-500 dark:accent-blue-400" />
312+
<Button colorClassName="accent-primary" title="Submit" />
313+
314+
// tintColor prop → tintColorClassName
315+
<Image className="w-6 h-6" tintColorClassName="accent-red-500" source={icon} />
316+
317+
// thumbColor → thumbColorClassName
318+
<Switch thumbColorClassName="accent-white" trackColorOnClassName="accent-primary" />
319+
320+
// placeholderTextColor → placeholderTextColorClassName
321+
<TextInput placeholderTextColorClassName="accent-gray-400 dark:accent-gray-600" />
322+
```
323+
324+
**CRITICAL Rule**: `className` maps to the `style` prop — it handles layout, typography, backgrounds, borders, etc. But React Native has many color props that live OUTSIDE of `style` (like `color`, `tintColor`, `thumbColor`, `placeholderTextColor`). These require a separate `{propName}ClassName` prop with the `accent-` prefix. Without `accent-`, the class resolves to a style object — but these props expect a plain color string.
325+
326+
```tsx
327+
// WRONG — className sets style, but ActivityIndicator's color is NOT a style prop
328+
<ActivityIndicator className="text-blue-500" /> // color will NOT be set
329+
330+
// CORRECT — use the dedicated colorClassName prop with accent- prefix
331+
<ActivityIndicator colorClassName="accent-blue-500" /> // color IS set to #3b82f6
332+
333+
// WRONG — tintColor is not a style prop on Image
334+
<Image className="tint-blue-500" source={icon} /> // won't work
335+
336+
// CORRECT
337+
<Image tintColorClassName="accent-blue-500" source={icon} />
338+
```

0 commit comments

Comments
 (0)