Pictures of the scene

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#

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#

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:

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.
• Placing things by hand: saving layouts.