Cursor rule

1---
2alwaysApply: false
3---
4 
5## Modern React Native Styling Patterns
6 
7Follow these styling patterns for cleaner, more consistent React Native code.
8 
9**Always use `borderCurve: 'continuous'` with `borderRadius`:**
10 
11```tsx
12// Incorrect
13{ borderRadius: 12 }
14 
15// Correct – smoother iOS-style corners
16{ borderRadius: 12, borderCurve: 'continuous' }
17```
18 
19**Use `gap` instead of margin for spacing between elements:**
20 
21```tsx
22// Incorrect – margin on children
23<View>
24  <Text style={{ marginBottom: 8 }}>Title</Text>
25  <Text style={{ marginBottom: 8 }}>Subtitle</Text>
26</View>
27 
28// Correct – gap on parent
29<View style={{ gap: 8 }}>
30  <Text>Title</Text>
31  <Text>Subtitle</Text>
32</View>
33```
34 
35**Use `padding` for space within, `gap` for space between:**
36 
37```tsx
38<View style={{ padding: 16, gap: 12 }}>
39  <Text>First</Text>
40  <Text>Second</Text>
41</View>
42```
43 
44**Use `experimental_backgroundImage` for linear gradients:**
45 
46```tsx
47// Incorrect – third-party gradient library
48<LinearGradient colors={['#000', '#fff']} />
49 
50// Correct – native CSS gradient syntax
51<View
52  style={{
53    experimental_backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
54  }}
55/>
56```
57 
58**Use CSS `boxShadow` string syntax for shadows:**
59 
60```tsx
61// Incorrect – legacy shadow objects or elevation
62{ shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 }
63{ elevation: 4 }
64 
65// Correct – CSS box-shadow syntax
66{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }
67```
68 
69**Avoid multiple font sizes – use weight and color for emphasis:**
70 
71```tsx
72// Incorrect – varying font sizes for hierarchy
73<Text style={{ fontSize: 18 }}>Title</Text>
74<Text style={{ fontSize: 14 }}>Subtitle</Text>
75<Text style={{ fontSize: 12 }}>Caption</Text>
76 
77// Correct – consistent size, vary weight and color
78<Text style={{ fontWeight: '600' }}>Title</Text>
79<Text style={{ color: '#666' }}>Subtitle</Text>
80<Text style={{ color: '#999' }}>Caption</Text>
81```
82 
83Limiting font sizes creates visual consistency. Use `fontWeight` (bold/semibold)
84and grayscale colors for hierarchy instead.
85