1---
2title: Use contentInsetAdjustmentBehavior for Safe Areas
3impact: MEDIUM
4impactDescription: native safe area handling, no layout shifts
5tags: safe-area, scrollview, layout
6---
7 
8## Use contentInsetAdjustmentBehavior for Safe Areas
9 
10Use `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.
11 
12**Incorrect (SafeAreaView wrapper):**
13 
14```tsx
15import { SafeAreaView, ScrollView, View, Text } from 'react-native'
16 
17function MyScreen() {
18  return (
19    <SafeAreaView style={{ flex: 1 }}>
20      <ScrollView>
21        <View>
22          <Text>Content</Text>
23        </View>
24      </ScrollView>
25    </SafeAreaView>
26  )
27}
28```
29 
30**Incorrect (manual safe area padding):**
31 
32```tsx
33import { ScrollView, View, Text } from 'react-native'
34import { useSafeAreaInsets } from 'react-native-safe-area-context'
35 
36function MyScreen() {
37  const insets = useSafeAreaInsets()
38 
39  return (
40    <ScrollView contentContainerStyle={{ paddingTop: insets.top }}>
41      <View>
42        <Text>Content</Text>
43      </View>
44    </ScrollView>
45  )
46}
47```
48 
49**Correct (native content inset adjustment):**
50 
51```tsx
52import { ScrollView, View, Text } from 'react-native'
53 
54function MyScreen() {
55  return (
56    <ScrollView contentInsetAdjustmentBehavior='automatic'>
57      <View>
58        <Text>Content</Text>
59      </View>
60    </ScrollView>
61  )
62}
63```
64 
65The native approach handles dynamic safe areas (keyboard, toolbars) and allows content to scroll behind the status bar naturally.
66