1---
2title: Use contentInset for Dynamic ScrollView Spacing
3impact: LOW
4impactDescription: smoother updates, no layout recalculation
5tags: scrollview, layout, contentInset, performance
6---
7 
8## Use contentInset for Dynamic ScrollView Spacing
9 
10When adding space to the top or bottom of a ScrollView that may change
11(keyboard, toolbars, dynamic content), use `contentInset` instead of padding.
12Changing `contentInset` doesn't trigger layout recalculation—it adjusts the
13scroll area without re-rendering content.
14 
15**Incorrect (padding causes layout recalculation):**
16 
17```tsx
18function Feed({ bottomOffset }: { bottomOffset: number }) {
19  return (
20    <ScrollView contentContainerStyle={{ paddingBottom: bottomOffset }}>
21      {children}
22    </ScrollView>
23  )
24}
25// Changing bottomOffset triggers full layout recalculation
26```
27 
28**Correct (contentInset for dynamic spacing):**
29 
30```tsx
31function Feed({ bottomOffset }: { bottomOffset: number }) {
32  return (
33    <ScrollView
34      contentInset={{ bottom: bottomOffset }}
35      scrollIndicatorInsets={{ bottom: bottomOffset }}
36    >
37      {children}
38    </ScrollView>
39  )
40}
41// Changing bottomOffset only adjusts scroll bounds
42```
43 
44Use `scrollIndicatorInsets` alongside `contentInset` to keep the scroll
45indicator aligned. For static spacing that never changes, padding is fine.
46