React Native View Recorder

Capture any React Native View to a video or an image. Add your own audio. Ideal for creating shareable content in your apps.

ViewRecorder.mp4

Features

• View-level capture: record a specific view, not the entire screen
• Works with Skia: captures @shopify/react-native-skia canvases and TextureViews
• Hardware-accelerated: AVAssetWriter on iOS, MediaCodec on Android
• Audio support: mux audio files or generate samples per-frame via JS callback
• HEVC support: H.264, H.265, and HEVC with alpha (iOS)
• Tiny footprint: ~90 KB of native code, zero third-party binaries
• MIT licensed: no GPL/LGPL concerns (unlike FFmpeg-based solutions)
• New Architecture: Fabric native component + TurboModule

Documentation

For full docs, examples, and API reference, visit react-native-view-recorder.awingender.com.

Installation

# expo
npx expo install react-native-view-recorder

# npm
npm install react-native-view-recorder

# bun
bun add react-native-view-recorder

Expo Go does not support native modules. You need a development build.

Quick start

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>
  );
}

Skia support

Record Skia canvases with the same RecordingView and useViewRecorder:

import { Canvas, Circle, Fill } from "@shopify/react-native-skia";
import { RecordingView, useViewRecorder } from "react-native-view-recorder";

function SkiaExample() {
  const recorder = useViewRecorder();

  return (
    <RecordingView sessionId={recorder.sessionId} style={{ width: 300, height: 300 }}>
      <Canvas style={{ flex: 1 }}>
        <Fill color="black" />
        <Circle cx={150} cy={150} r={100} color="cyan" />
      </Canvas>
    </RecordingView>
  );
}

Sponsoring

If this library helps you, particularly if you are a big company, consider sponsoring me. Helps a ton, thank you!

License

MIT