Initial commit — Singular Particular Space v1

Homepage (site/index.html): integration-v14 promoted, Writings section
integrated with 33 pieces clustered by type (stories/essays/miscellany),
Writings welcome lightbox, content frame at 98% opacity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 12:09:22 +02:00
commit 5422131782
359 changed files with 117437 additions and 0 deletions

View File

@@ -0,0 +1,66 @@
---
title: Use expo-image for Optimized Images
impact: HIGH
impactDescription: memory efficiency, caching, blurhash placeholders, progressive loading
tags: 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):**
```tsx
import { Image } from 'react-native'
function Avatar({ url }: { url: string }) {
return <Image source={{ uri: url }} style={styles.avatar} />
}
```
**Correct (expo-image):**
```tsx
import { Image } from 'expo-image'
function Avatar({ url }: { url: string }) {
return <Image source={{ uri: url }} style={styles.avatar} />
}
```
**With blurhash placeholder:**
```tsx
<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:**
```tsx
<Image
source={{ uri: url }}
priority="high"
cachePolicy="memory-disk"
style={styles.hero}
/>
```
**Key props:**
- `placeholder` — Blurhash or thumbnail while loading
- `contentFit``cover`, `contain`, `fill`, `scale-down`
- `transition` — Fade-in duration (ms)
- `priority``low`, `normal`, `high`
- `cachePolicy``memory`, `disk`, `memory-disk`, `none`
- `recyclingKey` — 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](https://docs.expo.dev/versions/latest/sdk/image/)