DEV Community: M620

Keeping an uploaded audio file in a draft after a page reload (Expo web + native)

M620 — Wed, 28 Oct 2026 14:00:00 +0000

In Suno's "Create" screen you can attach your own audio file and then keep writing lyrics and styles. In my open-source Suno clone I wanted that draft to survive a page reload, including the audio file.

Saving the text is easy: put it in AsyncStorage. The file is the hard part. A file picked in the browser gives you a blob: URL, and that URL dies with the page. Storing a few megabytes of base64 in localStorage isn't an option either (around 5 MB total, synchronous, and it blocks the main thread).

Here is the approach that works on both web and native with one interface.

Live demo: https://migrant620.github.io/suno/ · Source (MIT): https://github.com/migrant620/suno-clone

One interface, two files

Metro (Expo's bundler) picks name.web.ts over name.ts when building for web. So I have:

src/draftAudioFiles.ts      // native: expo-file-system
src/draftAudioFiles.web.ts  // web: Cache Storage

Both export the same three functions:

saveDraftAudioFile(id: string, source: AudioSource): Promise<void>
readDraftAudioFile(id: string): Promise<{ source: { uri: string }; release: () => void }>
removeDraftAudioFile(id: string): Promise<void>

The rest of the app imports ./draftAudioFiles and never knows which one it got.

Web: put the file in Cache Storage

The Cache API (caches) is usually associated with service workers, but it is available on any secure page. It stores real Response objects, so binary data stays binary and you don't need IndexedDB boilerplate:

const CACHE = 'draft-audio:v1';
const key = (id: string) =>
  new URL(`/__draft_audio__/${encodeURIComponent(id)}`, location.origin).href;

export async function saveDraftAudioFile(id: string, source: AudioSource) {
  const uri = typeof source === 'string' ? source : source?.uri;
  if (!uri) throw new Error('Missing audio file');
  const blob = await (await fetch(uri)).blob();   // works for blob: URLs too
  if (!blob.size) throw new Error('Audio file is empty');
  const cache = await caches.open(CACHE);
  await cache.put(key(id), new Response(blob, {
    headers: { 'Content-Type': blob.type || 'audio/mpeg' },
  }));
}

The key is a fake same-origin URL. Nothing is ever served from it; it just has to be a valid URL.

Reading it back creates a fresh object URL, which the audio player can use like any other source:

export async function readDraftAudioFile(id: string) {
  const res = await (await caches.open(CACHE)).match(key(id));
  if (!res) throw new Error('Saved audio is missing');
  const uri = URL.createObjectURL(await res.blob());
  return { source: { uri }, release: () => URL.revokeObjectURL(uri) };
}

Note the release function. Object URLs keep the blob in memory until you revoke them, so the hook that restores the draft calls release() when it unmounts.

Native: copy it into the documents folder

On iOS and Android the picker returns a file in a temporary cache directory that the OS may clear. Copy it somewhere permanent:

import * as FileSystem from 'expo-file-system/legacy';

const dir = `${FileSystem.documentDirectory}draft-audio/`;

export async function saveDraftAudioFile(id: string, source: AudioSource) {
  const uri = typeof source === 'string' ? source : source?.uri;
  if (!uri) throw new Error('Missing audio file');
  await FileSystem.makeDirectoryAsync(dir, { intermediates: true });
  const target = dir + encodeURIComponent(id);
  if (uri !== target) await FileSystem.copyAsync({ from: uri, to: target });
  const info = await FileSystem.getInfoAsync(target);
  if (!info.exists || !info.size) throw new Error('Audio file is empty');
}

Checking the size after copying catches the case where the copy "succeeds" but writes nothing.

The draft hook: metadata in AsyncStorage, file by id

The draft itself stores only the track's metadata (id, title, styles) and the edit settings. The source field is stripped before saving:

const { source, cover, ...track } = audio;
await AsyncStorage.setItem(KEY, JSON.stringify({ track, edit }));

On startup the hook reads that JSON, validates it, and asks readDraftAudioFile(track.id) for the file. Things I learned the hard way:

Validate what you read. Old versions of the app, or a user poking at storage, can leave JSON with a different shape. Check the fields you need and treat anything else as "no draft".
Tell the user when restoring fails. If the metadata exists but the file is gone (the browser cleared site data, for example), show "Your saved audio could not be restored. Select the file again", plus a way to discard it. Silently dropping the attachment is worse.
Serialise writes. Picking a new file quickly after another can start two saves at once. I run every read/write for this key through a small promise-chain lock, so they happen in order.
Clean up the old file. When the user replaces or removes the attachment, delete the previous file by id after the new metadata is saved, not before. If the save fails, the old draft is still intact.
Skip no-op writes. Compare the serialised draft to the last one written and return early if they're equal. Otherwise every re-render writes to storage.

Limits

Cache Storage is per origin and can be evicted under storage pressure. navigator.storage.persist() can ask the browser to keep it, but browsers may say no.
Private browsing modes may give you a cache that is wiped when the window closes. That's fine for a draft.
caches only exists on secure origins (HTTPS or localhost).

Try it

Open https://migrant620.github.io/suno/, go to Create, attach an audio file, then reload the page. The attachment is still there. The code is in src/useAudioDraft.ts and src/draftAudioFiles.web.ts.

This is one of six app UIs I've rebuilt with React Native + Expo (Airbnb, Threads, Luma, Suno, Tiimo, Structured), all MIT-licensed at https://migrant620.github.io/.

Earlier in this series: Tiimo's timer ring with one SVG arc · fixing blank Expo web pages on slow networks · a background that follows the cover image.

Making a screen's background follow its cover image in React Native Web (no library)

M620 — Sun, 25 Oct 2026 14:00:00 +0000

Open an event in Luma and the whole page takes its colour from the cover image: a red poster gives you a deep red page, a blue one gives you navy. It makes every event feel designed, even when the organiser only uploaded one picture.

My open-source Luma clone does the same thing on the web in about 100 lines, with a <canvas> and no colour library. Here is how.

Live demo: https://migrant620.github.io/luma/ (open any event)
Source (MIT): https://github.com/migrant620/luma-clone

1. Shrink the image to 48 × 48

You don't need every pixel to find the main colour. Drawing the image into a tiny canvas averages it for free and keeps the loop cheap:

const N = 48;
const canvas = document.createElement('canvas');
canvas.width = N;
canvas.height = N;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.drawImage(img, 0, 0, N, N);
const { data } = ctx.getImageData(0, 0, N, N); // 48*48*4 bytes

getImageData throws if the image comes from another origin without CORS headers. Wrap it in try/catch and fall back to your default background.

2. Bucket colours, but weight them

The naive "average all pixels" gives you mud: a red poster with white text averages to a dusty pink. Instead, put each pixel into a coarse bucket (3 bits per channel, 512 buckets) and keep a weighted sum per bucket:

const key = ((r >> 5) << 6) | ((g >> 5) << 3) | (b >> 5);
let w = 0.15 + saturation([r, g, b]);   // colourful pixels count more
const v = Math.max(r, g, b) / 255;
if (v < 0.1 || v > 0.95) w *= 0.25;      // near-black and near-white count less

Two weights do most of the work:

Saturation boost. Grey backgrounds and skin tones are common in photos, but they are rarely the colour you want the page to be.
Black/white penalty. Text, borders and letterboxing would otherwise win on almost every poster.

The bucket with the biggest weight wins, and you use the mean of its pixels, not the bucket's corner value, so the result isn't quantised.

One more rule: if the winner is still greyish (saturation under 0.15) but there is a clearly colourful runner-up with at least a third of its weight, take the runner-up. That handles "mostly white poster with one bold logo" nicely.

3. Turn one colour into a background

A flat fill looks cheap. A vertical gradient from a darker version of the colour at the top to a soft, desaturated version lower down looks like the real thing:

const shade = (c: RGB, f: number): RGB => c.map((v) => v * f) as RGB;
const luma = (c: RGB) => 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
const desat = (c: RGB, t: number): RGB =>
  c.map((v) => v + (luma(c) - v) * t) as RGB;

function background(c: RGB) {
  const top = shade(c, 0.5);
  const bottom = shade(desat(c, 0.9), 70 / Math.max(luma(c), 1));
  return `linear-gradient(180deg, ${css(top)} 0%, ${css(shade(c, 0.3))} 35%, ${css(bottom)} 90%)`;
}

Scaling the bottom colour by 70 / luma normalises brightness. A pale yellow cover and a dark purple one end up with backgrounds of similar lightness, so white text stays readable on both. Layering a soft radial-gradient on top adds a bit of glow; that part is taste.

4. Wire it into React Native Web

React Native styles don't accept CSS gradients, but on web the style object is passed through, so background works if you cast it:

const [bg, setBg] = React.useState<string | null>(null);

React.useEffect(() => {
  let alive = true;
  extractCoverBackground(ev.cover).then((css) => {
    if (alive && css) setBg(css);
  });
  return () => { alive = false; };
}, [ev.cover]);

<View style={[styles.root, bg ? ({ background: bg } as any) : null]}>

Three details:

Cache by URI. Store the promise in a Map, so going back and forth between events doesn't decode the image again.
Resolve Expo assets. A require('./cover.jpg') on web is an object, not a URL. Read its uri (or httpServerLocation + name + type) before loading it into an <img>.
Keep a default. The page renders immediately with a neutral dark background and swaps to the extracted one when it is ready. On native, the function just returns null.

Try it

Open a few events with different posters and compare the pages: https://migrant620.github.io/luma/

The full file is src/palette.ts. This is one of six app UIs I've rebuilt with React Native + Expo (Airbnb, Threads, Luma, Suno, Tiimo, Structured), all MIT-licensed at https://migrant620.github.io/.

Previous posts in this series: Tiimo's timer ring with one SVG arc · fixing blank Expo web pages on slow networks.

My Expo web demos showed a blank page on slow networks. Here's what fixed it

M620 — Fri, 23 Oct 2026 03:10:08 +0000

I have six app UI clones (Airbnb, Threads, Luma, Suno, Tiimo, Structured) built with React Native + Expo and published as static web demos. On a good connection they open instantly. On a throttled 40 KB/s connection, some of them showed nothing for 40+ seconds, and one showed a "Font loading failed" error instead of the app.

Three changes fixed it. None of them is specific to my apps, so they should work for any Expo web export.

Demos: https://migrant620.github.io/ · Source (MIT): https://github.com/migrant620

How I measured

Chrome DevTools can throttle the network, and so can a headless browser through the DevTools protocol:

await client.send('Network.emulateNetworkConditions', {
  offline: false,
  latency: 150,                  // ms
  downloadThroughput: 40 * 1024, // bytes/s
  uploadThroughput: 40 * 1024,
});

I recorded two numbers per app: when the first text appears, and when all web fonts have finished loading. Cache disabled, two runs each.

1. Don't block the first render on fonts

The default Expo pattern is:

const [loaded] = useFonts({ Roboto: require('./Roboto.ttf') });
if (!loaded) return null; // blank page until every font arrives

On a slow connection, "every font" can mean a megabyte or more, so the user stares at a white screen. If a font request fails or times out, some setups show an error instead of the app.

What I do instead is register the fonts with font-display: swap and render immediately:

const css = Object.entries(FACES)
  .map(([family, url]) =>
    `@font-face{font-family:${family};src:url("${url}") format("truetype");font-display:swap;}`)
  .join('\n');
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);

Every fontFamily in the styles also gets a system fallback, so text is readable right away and swaps to the real font when it lands. A short grace timer (a second or two) still avoids a flash of fallback text on fast connections; after that the app renders no matter what.

I also load the fonts the first screen needs before the rest:

const load = (families: string[]) =>
  Promise.all(families.map((f) => document.fonts.load(`16px ${f}`)));

load(FIRST_SCREEN_FACES).then(() => load(OTHER_FACES));

2. Ship only the glyphs you use

Icon fonts were the worst offenders. A full MaterialCommunityIcons TTF is over 1 MB, and each app used a few dozen icons. Text fonts were also full Unicode builds while the UI is English only.

fontTools cuts a font down to the characters you list:

pyftsubset Roboto-Regular.ttf \
  --unicodes="U+0020-007E,U+00A0-00FF,U+2013-2026" \
  --layout-features='*' \
  --output-file=Roboto-Regular.subset.ttf

For icon fonts, pass the code points of the icons you actually render. Results:

App	Fonts before	Fonts after
Tiimo	1.92 MB	416 KB
Structured	1.89 MB	410 KB
Airbnb	655 KB	233 KB

Glyph shapes and widths are unchanged, so layout doesn't move.

3. Lazy-load everything that isn't the first screen

Expo's web export supports React.lazy and splits each dynamic import() into its own chunk:

const loadSettings = () => import('./screens/SettingsScreen');
const SettingsScreen = React.lazy(() =>
  loadSettings().then((m) => ({ default: m.SettingsScreen })));

// ...
<React.Suspense fallback={null}>
  {tab === 'settings' ? <SettingsScreen /> : null}
</React.Suspense>

Two details made this smooth:

Prefetch after first paint. Once the first screen and its fonts are in, I call the load*() functions in the background, so by the time someone taps Settings the chunk is usually there.
Check the sub-path. My demos live under /structured/, /suno/ and so on. Build with the right base URL and confirm the chunk files return 200 on the deployed site, not just locally.

Results

Same 40 KB/s, 150 ms connection:

App	First text	All fonts loaded
Structured	16.1 s → 13.6 s	61.2 s → 19.4 s
Suno	39.5 s → 24.4 s	no longer shows an error
Tiimo	16.0 s → 15.0 s	62.0 s → 25.3 s

Most of the remaining first-text time is React DOM plus React Native Web itself (roughly 300 KB together). That's the next thing to look at.

If you have an Expo web app, try opening it with DevTools set to "Slow 3G" and cache disabled. If you see a blank page, the font gate is the first place to look.

Previous post in this series: Building Tiimo's focus timer ring with one SVG arc.

Building Tiimo's focus timer ring in React Native with one SVG arc

M620 — Fri, 23 Oct 2026 02:20:48 +0000

Tiimo's focus screen is one big ring: a pale band, a coloured disc in the middle with the task's emoji, and a thick arc that grows clockwise as the timer runs, with a small arrow riding on its tip. It looks like a progress indicator, but it is really a few lines of SVG. Here is how the version in my open-source Tiimo clone works.

Live demo: https://migrant620.github.io/tiimo/ (open a task and start the timer)
Source (MIT): https://github.com/migrant620/tiimo-clone

Three layers, one `<Svg>`

<Svg width={CANVAS} height={CANVAS} viewBox={`0 0 ${CANVAS} ${CANVAS}`}>
  {/* 1. the pale band */}
  <Circle cx={c} cy={c} r={(outer + disc) / 2} fill="none"
          stroke={colors.aura} strokeWidth={outer - disc} />
  {/* 2. the progress arc */}
  <Path d={arcPath(angle)} stroke={colors.primary}
        strokeWidth={arcWidth} strokeLinecap="round" fill="none" />
  {/* 3. the disc on top */}
  <Circle cx={c} cy={c} r={disc} fill={discColor} />
</Svg>

The band is not a filled donut. It is a single circle whose stroke is as wide as the band, drawn on the circle halfway between the outer edge and the disc. That gives you a perfect annulus without any path maths.

The disc is drawn last, so the arc can be wider than the visible band and still look tidy: the disc hides the inner half.

The arc path

SVG arcs are defined by a start point, an end point and two flags. Starting at 12 o'clock and going clockwise:

function arcPath(angle: number) {
  const r = badgeRadius;
  const rad = (Math.min(angle, 359.9) * Math.PI) / 180;
  const x = c + r * Math.sin(rad);
  const y = c - r * Math.cos(rad);
  return `M ${c} ${c - r} A ${r} ${r} 0 ${angle > 180 ? 1 : 0} 1 ${x} ${y}`;
}

Three details matter:

sin for x and -cos for y puts 0° at the top instead of at 3 o'clock, so you don't need a rotate transform.
The large-arc flag (angle > 180 ? 1 : 0) tells the renderer which of the two possible arcs to take. Forget it and the arc jumps to the short way round after the halfway mark.
The angle is clamped to 359.9. At exactly 360° the start and end points are identical, and an SVG arc between two identical points draws nothing, so your full ring would vanish in the last frame.

Zero progress: draw a dot, not an empty arc

When the timer has just started, the arc has zero length. With strokeLinecap="round" some renderers still draw a dot and some draw nothing. To keep it consistent, draw the dot yourself:

{angle > 0.05
  ? <Path d={arcPath(angle)} ... />
  : <Circle cx={head.x} cy={head.y} r={arcWidth / 2} fill={colors.primary} />}

The arrow on the tip

The arrow is a normal icon view positioned at the arc's head and rotated to follow the direction of travel:

const head = {
  x: SIZE / 2 + badgeRadius * Math.sin(rad),
  y: SIZE / 2 - badgeRadius * Math.cos(rad),
};
const glyphPos = {
  left: head.x - arrowSize / 2,
  top: head.y - arrowSize / 2,
  transform: [{ rotate: `${angle - 90}deg` }],
};

Keeping it outside the SVG means it uses the same icon font as the rest of the app and stays crisp at any size.

The bug that clipped my ring flat

For a while the outer edge of the ring looked slightly flattened at the top, bottom and sides. The cause: the canvas was exactly as wide as the ring's outer diameter. A stroke is centred on its path, and anti-aliasing spills a fraction of a pixel past the edge, so the outermost pixels fell outside the <Svg> and were cut off.

The fix is a couple of pixels of padding around the canvas, then shifting it back so the layout doesn't move:

const PAD = 2;
const CANVAS = SIZE + PAD * 2;
// ...
canvas: { position: 'absolute', left: -PAD, top: -PAD },

If a round shape in react-native-svg ever looks "almost round", check whether its stroke touches the canvas edge.

Try it

The whole component is about 90 lines: src/components/TimerRing.tsx. The demo runs in any browser, no install needed: https://migrant620.github.io/tiimo/

This is one of six app UIs I've rebuilt with React Native + Expo (Airbnb, Threads, Luma, Suno, Tiimo, Structured). All of them are MIT-licensed and live at https://migrant620.github.io/. Next in this series: why my Expo web demos showed a blank page on slow networks, and what fixed it.

Six mobile app UIs you can tap through in a browser tab (Expo + React Native Web)

M620 — Sat, 10 Oct 2026 09:25:41 +0000

A screenshot of an interface tells you what it looks like. It doesn't tell you how it feels — what happens when you tap, how a sheet rises, whether the hierarchy still holds once you start typing.

So I've been rebuilding mobile app interfaces I admire as interactive prototypes. Real components and real state, running in a browser tab — you open a link and the thing works.

Six are live:

App	Try it	What to tap
Suno (AI music)	migrant620.github.io/suno	Type a prompt, open Search, start the featured song — the player plays sample audio
Luma (events)	migrant620.github.io/luma	Round button → Continue with Phone → open an event
Threads (social)	migrant620.github.io/threads	Like a post, then tap + and start a new thread
Airbnb (stays)	migrant620.github.io/airbnb	Start your search → where, when, who
Tiimo (visual planner)	migrant620.github.io/tiimo	Add a task, start it, watch the focus ring
Structured (day timeline)	migrant620.github.io/structured	Add Task → pick a suggestion → complete it

Index with source and a DESIGN.md for each: github.com/migrant620/awesome-app-design-md

One codebase, opened as a link

Each app is an Expo / React Native / TypeScript project rendered on the web through React Native Web. The browser build is what makes them shareable. A link you can tap through beats a Dribbble shot when you're trying to explain why an interface works.

The layouts are designed for a phone-width column. On a desktop they stay a centred column rather than stretching — open them in your browser's device mode, or just on your phone.

Six things these interfaces get right

Rebuilding a UI forces you to notice decisions you'd normally scroll past. A few I liked:

Suno: the player borrows the artwork. Opening a song turns the whole screen dark and paints it from the cover, so the controls sit on the mood of the track instead of a neutral panel. The pink-to-orange gradient is spent on exactly one job — making — so it never competes with anything else.

Luma: a feed that reads like a calendar. "Picked for You" is grouped by date, with a quiet grey slash between the date and the weekday. Then tapping an event drops you into a deep indigo detail page. Light list, dark detail — each makes the other feel more distinct.

Threads: text first, chrome last. The feed is a single column of avatar, handle and words; counts sit quietly under each post and the photo, when there is one, is the only colour. The composer opens as a plain sheet that is mostly empty space, which is the point.

Airbnb: search is a sentence you fill in. Where, When and Who are three stacked clauses on one sheet, not three screens. Each shows its current answer in bold and its question in grey, so a half-finished query stays readable while you edit one part of it.

Tiimo: time you can see. In focus mode a lavender arc grows clockwise from twelve o'clock, one full turn per task. The digits tell you how long is left; the arc lets you feel it at a glance. The day is split into Anytime / Morning / Afternoon / Evening instead of minutes, which lowers the precision a plan asks of you.

Structured: completed means struck through, not removed. Every task is a disc on one vertical spine. Finishing a task keeps it in place with a line-through, so the day's history stays visible. One coral colour carries every plan and action; greys do everything else.

What's a DESIGN.md here?

Each repo ships a DESIGN.md: colour tokens, type scale, spacing, radii and component notes — written as prose you can read in five minutes, next to source code that shows the values in use. Token files tell you what a value is. I'm trying to also say why it's there, in a form a person or a coding agent can rebuild from.

That format is still evolving, and it's the part I'd most like feedback on. Too much detail? Not enough? Would you rather have it as structured YAML?

The fine print

These are unofficial study projects, not affiliated with or endorsed by Suno, Luma, Threads, Airbnb, Tiimo or Structured. All content is sample data; nothing signs in or talks to the real services. The source is MIT-licensed, so feel free to read it, fork it and reuse it.

If you open one and something feels off — a spacing, a transition, a state that doesn't behave — tell me in the comments or open an issue. That's the most useful thing you could send.

DEV Community: M620

Keeping an uploaded audio file in a draft after a page reload (Expo web + native)

One interface, two files

Web: put the file in Cache Storage

Native: copy it into the documents folder

The draft hook: metadata in AsyncStorage, file by id

Limits

Try it

Making a screen's background follow its cover image in React Native Web (no library)

1. Shrink the image to 48 × 48

2. Bucket colours, but weight them

3. Turn one colour into a background

4. Wire it into React Native Web

Try it

My Expo web demos showed a blank page on slow networks. Here's what fixed it

How I measured

1. Don't block the first render on fonts

2. Ship only the glyphs you use

3. Lazy-load everything that isn't the first screen

Results

Building Tiimo's focus timer ring in React Native with one SVG arc

Three layers, one <Svg>

The arc path

Zero progress: draw a dot, not an empty arc

The arrow on the tip

The bug that clipped my ring flat

Try it

Six mobile app UIs you can tap through in a browser tab (Expo + React Native Web)

One codebase, opened as a link

Six things these interfaces get right

What's a DESIGN.md here?

The fine print

Three layers, one `<Svg>`