Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Compound Components Over Polymorphic Children
6 
7Don't create components that can accept a string if they aren't a text node. If
8a component can receive a string child, it must be a dedicated `*Text`
9component. For components like buttons, which can have both a View (or
10Pressable) together with text, use compound components, such a `Button`,
11`ButtonText`, and `ButtonIcon`.
12 
13**Incorrect (polymorphic children):**
14 
15```tsx
16import { Pressable, Text } from 'react-native'
17 
18type ButtonProps = {
19  children: string | React.ReactNode
20  icon?: React.ReactNode
21}
22 
23function Button({ children, icon }: ButtonProps) {
24  return (
25    <Pressable>
26      {icon}
27      {typeof children === 'string' ? <Text>{children}</Text> : children}
28    </Pressable>
29  )
30}
31 
32// Usage is ambiguous
33<Button icon={<Icon />}>Save</Button>
34<Button><CustomText>Save</CustomText></Button>
35```
36 
37**Correct (compound components):**
38 
39```tsx
40import { Pressable, Text } from 'react-native'
41 
42function Button({ children }: { children: React.ReactNode }) {
43  return <Pressable>{children}</Pressable>
44}
45 
46function ButtonText({ children }: { children: React.ReactNode }) {
47  return <Text>{children}</Text>
48}
49 
50function ButtonIcon({ children }: { children: React.ReactNode }) {
51  return <>{children}</>
52}
53 
54// Usage is explicit and composable
55<Button>
56  <ButtonIcon><SaveIcon /></ButtonIcon>
57  <ButtonText>Save</ButtonText>
58</Button>
59 
60<Button>
61  <ButtonText>Cancel</ButtonText>
62</Button>
63```
64