# Pictures of the scene

> Save what a scene shows as a PNG with captureScene, for share cards, gallery thumbnails and previews. Sizes, file names, where the files go, and when to capture.

`captureScene` takes the scene's next frame, exactly as the screen shows it (look, shadows, occlusion), and saves it as a PNG:

- on a phone, as a file in the app's cache (needs `expo-file-system`);
- on the web, as a blob URL.

It lives in its own entry point, `@apricot/react/capture`, so apps that never save pictures don't bundle the PNG encoder.

## Share a picture

```tsx title="ShareScene.tsx"
import { type ApricotScene, Box, Scene } from "@apricot/react";
import { captureScene } from "@apricot/react/capture";
import * as Sharing from "expo-sharing";
import { useState } from "react";
import { Button, View } from "react-native";

export function ShareScene() {
  const [scene, setScene] = useState<ApricotScene | null>(null);
  const share = async () => {
    if (!scene) return;
    const { uri } = await captureScene(scene, { maxSize: 1080 });
    await Sharing.shareAsync(uri);
  };
  return (
    <View style={{ flex: 1 }}>
      <Scene style={{ flex: 1 }} look="studio" onCreated={setScene}>
        <Box radius={0.1} material="car-paint" />
      </Scene>
      <Button title="Share" disabled={!scene} onPress={share} />
    </View>
  );
}
```

Get the scene from `onCreated` (or `onReady`, or `useScene()` inside it). `captureScene` waits until the scene has drawn its content.

## Options

| Option | Default | Meaning |
| --- | --- | --- |
| `maxSize` | as drawn | The largest it may be, in pixels: `[width, height]`, or one number for both. Made smaller to fit, never larger |
| `name` | `capture-<time>` | The file's name, without `.png`. Saving again under the same name replaces the file |

It resolves to `{ uri, width, height }` (pixels).

## Thumbnails

Saving a full-screen picture takes a moment on a phone; a 256-pixel thumbnail is quick. Give each thumbnail a fixed `name`, so a new picture replaces the old one:

```ts
const thumbnail = await captureScene(scene, { maxSize: 256, name: `room-${roomId}` });
```

For a gallery of saved rooms or designs, capture each one once (when it changes) and show the pictures with `<Image>`, instead of running many live scenes at once.

## Good to know

- Models still loading are not in the picture: capture after their `onLoad`.
- Files go in an `apricot` folder in the app's cache. The system may clear the cache; copy a picture elsewhere to keep it.
- Without `expo-file-system` on a phone, `captureScene` throws an error that names it.

## Related

- [Scene reference](https://matthiasbrandolin.dev/apricot/reference/scene#apricotscene).
- [Placing things by hand](https://matthiasbrandolin.dev/apricot/guides/placement): saving layouts.