fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.5 KiB
1.5 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use contentInsetAdjustmentBehavior for Safe Areas | MEDIUM | native safe area handling, no layout shifts | safe-area, scrollview, layout |
Use contentInsetAdjustmentBehavior for Safe Areas
Use 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.
Incorrect (SafeAreaView wrapper):
import { SafeAreaView, ScrollView, View, Text } from 'react-native';
function MyScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View>
<Text>Content</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
Incorrect (manual safe area padding):
import { ScrollView, View, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
function MyScreen() {
const insets = useSafeAreaInsets();
return (
<ScrollView contentContainerStyle={{ paddingTop: insets.top }}>
<View>
<Text>Content</Text>
</View>
</ScrollView>
);
}
Correct (native content inset adjustment):
import { ScrollView, View, Text } from 'react-native';
function MyScreen() {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View>
<Text>Content</Text>
</View>
</ScrollView>
);
}
The native approach handles dynamic safe areas (keyboard, toolbars) and allows content to scroll behind the status bar naturally.