Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use contentInsetAdjustmentBehavior for Safe Areas
6 
7Use `contentInsetAdjustmentBehavior="automatic"` on the root ScrollView instead of wrapping content in SafeAreaView or manual padding. This lets iOS handle safe area insets natively with proper scroll behavior.
8 
9**Incorrect (SafeAreaView wrapper):**
10 
11```tsx
12import { SafeAreaView, ScrollView, View, Text } from 'react-native'
13 
14function MyScreen() {
15  return (
16    <SafeAreaView style={{ flex: 1 }}>
17      <ScrollView>
18        <View>
19          <Text>Content</Text>
20        </View>
21      </ScrollView>
22    </SafeAreaView>
23  )
24}
25```
26 
27**Incorrect (manual safe area padding):**
28 
29```tsx
30import { ScrollView, View, Text } from 'react-native'
31import { useSafeAreaInsets } from 'react-native-safe-area-context'
32 
33function MyScreen() {
34  const insets = useSafeAreaInsets()
35 
36  return (
37    <ScrollView contentContainerStyle={{ paddingTop: insets.top }}>
38      <View>
39        <Text>Content</Text>
40      </View>
41    </ScrollView>
42  )
43}
44```
45 
46**Correct (native content inset adjustment):**
47 
48```tsx
49import { ScrollView, View, Text } from 'react-native'
50 
51function MyScreen() {
52  return (
53    <ScrollView contentInsetAdjustmentBehavior='automatic'>
54      <View>
55        <Text>Content</Text>
56      </View>
57    </ScrollView>
58  )
59}
60```
61 
62The native approach handles dynamic safe areas (keyboard, toolbars) and allows content to scroll behind the status bar naturally.
63