Basic Example

Wrap any content in a <RecordingView> and link it to a recorder session via useViewRecorder. When you call record(), the library calls your onFrame callback for each frame, waits for React to re-render, captures the native view, and encodes it to H.264 video.

Here is a basic example that records a 5-second video of an animated frame counter. The resulting video is saved to the app's cache directory as video.mp4.

App.tsx

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

export default function App() {
  const recorder = useViewRecorder();
  const [frame, setFrame] = useState(0);

  const handleRecord = async () => {
    await recorder.record({
      output: FileSystem.cacheDirectory + "video.mp4",
      fps: 30,
      totalFrames: 150,
      onFrame: async ({ frameIndex }) => setFrame(frameIndex),
    });
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <RecordingView
        sessionId={recorder.sessionId}
        style={{ width: 300, height: 200, backgroundColor: "#111" }}
      >
        <Text style={{ color: "#fff", fontSize: 48 }}>{frame}</Text>
      </RecordingView>

      <Button title="Record 5s" onPress={handleRecord} />
    </View>
  );
}

Next steps

RecordOptions for all available options (encoding, audio, callbacks)
Recording Skia canvases with @shopify/react-native-skia

Next steps

On this page