Snapshot

import { useCallback, useState } from "react";
import { Button, Image, View } from "react-native";
import * as FileSystem from "expo-file-system";
import { RecordingView, useViewRecorder } from "react-native-view-recorder";

export default function SnapshotExample() {
  const recorder = useViewRecorder();
  const [imageUri, setImageUri] = useState<string | null>(null);

  const handleSnapshot = useCallback(async () => {
    const uri = await recorder.snapshot({
      output: FileSystem.cacheDirectory + "snapshot.png",
      format: "png",
    });
    setImageUri(uri);
  }, [recorder]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", gap: 16 }}>
      <RecordingView
        sessionId={recorder.sessionId}
        style={{ width: 300, height: 200, backgroundColor: "#111" }}
      >
        {/* Your content here */}
      </RecordingView>

      <Button title="Take Snapshot" onPress={handleSnapshot} />

      {imageUri && (
        <Image
          source={{ uri: `file://${imageUri}` }}
          style={{ width: 300, height: 200 }}
          resizeMode="contain"
        />
      )}
    </View>
  );
}

const base64 = await recorder.snapshot({
  format: "jpg",
  quality: 0.8,
  result: "base64",
});
// Use as data URI: `data:image/jpeg;base64,${base64}`

const uri = await recorder.snapshot({
  output: "/path/to/thumbnail.jpg",
  format: "jpg",
  quality: 0.7,
  width: 320,
  height: 240,
});