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.6 KiB
1.6 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use expo-image for Optimized Images | HIGH | memory efficiency, caching, blurhash placeholders, progressive loading | images, performance, expo-image, ui |
Use expo-image for Optimized Images
Use expo-image instead of React Native's Image. It provides memory-efficient caching, blurhash placeholders, progressive loading, and better performance for lists.
Incorrect (React Native Image):
import { Image } from 'react-native';
function Avatar({ url }: { url: string }) {
return <Image source={{ uri: url }} style={styles.avatar} />;
}
Correct (expo-image):
import { Image } from 'expo-image';
function Avatar({ url }: { url: string }) {
return <Image source={{ uri: url }} style={styles.avatar} />;
}
With blurhash placeholder:
<Image
source={{ uri: url }}
placeholder={{ blurhash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.' }}
contentFit="cover"
transition={200}
style={styles.image}
/>
With priority and caching:
<Image source={{ uri: url }} priority="high" cachePolicy="memory-disk" style={styles.hero} />
Key props:
placeholder— Blurhash or thumbnail while loadingcontentFit—cover,contain,fill,scale-downtransition— Fade-in duration (ms)priority—low,normal,highcachePolicy—memory,disk,memory-disk,nonerecyclingKey— Unique key for list recycling
For cross-platform (web + native), use SolitoImage from solito/image which uses expo-image under the hood.
Reference: expo-image