DEV Community

Nasyx Rakeeb
Nasyx Rakeeb

Posted on

I Built a Screen Capture Library for React Native (and Here's Why You Might Need It)

#reactnative #expo #android #androiddev

I Built a Screen Capture Library for React Native 📸

Ever needed to capture what's happening on a user's screen in your React Native app? Maybe for a time-lapse feature, monitoring tool, or screen recording app? I recently faced this challenge and ended up building react-native-frame-capture to solve it.

The Problem

I was working on a project that needed to capture screen frames at regular intervals. Sounds simple, right? Well, not quite. Here's what I needed:

  • Capture frames even when the app is in the background
  • Add timestamps and watermarks to each frame
  • Handle storage efficiently (temporary vs permanent)
  • Work reliably without draining the battery
  • Support the new React Native architecture

After searching through existing solutions, I couldn't find anything that checked all these boxes. So I decided to build it myself.

What I Built

react-native-frame-capture is a library that lets you capture screen frames at configurable intervals with a bunch of useful features:

import * as FrameCapture from 'react-native-frame-capture';

// Start capturing every second
await FrameCapture.startCapture({
  capture: { interval: 1000 },
  image: { quality: 80, format: 'jpeg' },
  storage: { saveFrames: true, location: 'private' },
});

// Listen for captured frames
FrameCapture.addListener(
  FrameCapture.CaptureEventType.FRAME_CAPTURED,
  (event) => {
    console.log('Got frame:', event.filePath);
  }
);
Enter fullscreen mode Exit fullscreen mode

That's it! You're now capturing screen frames every second.

The Cool Parts

1. Background Capture That Actually Works

One of the trickiest parts was making capture work reliably in the background. Android loves killing background processes to save battery. The solution? A foreground service with a persistent notification.

Users see a notification while capture is active, and Android keeps your app alive. Win-win.

2. Dynamic Overlays

Want to add timestamps or watermarks? Easy:

await FrameCapture.startCapture({
  capture: { interval: 1000 },
  overlays: [
    {
      type: 'text',
      content: 'Frame {frameNumber} • {timestamp}',
      position: 'bottom-right',
      style: {
        fontSize: 14,
        color: '#FFFFFF',
        backgroundColor: '#00000099',
      },
    },
  ],
});
Enter fullscreen mode Exit fullscreen mode

The {frameNumber} and {timestamp} get replaced automatically for each frame. Super handy for debugging or creating time-lapse videos.

3. Smart Storage Options

Not all captures are created equal. Sometimes you want temporary frames (for uploading to a server), sometimes you want them saved permanently. The library handles both:

  • Temporary - Stored in cache, auto-cleaned on app restart
  • Private - App-specific folder, deleted on uninstall
  • Public - Visible in the gallery, persists after uninstall
  • Custom - Your own directory path

Real-World Use Cases

Here are some things you could build with this:

📹 Screen Recording Apps
Capture frames and stitch them into a video

🎬 Time-Lapse Creators
Capture at intervals and create time-lapse videos

📊 Monitoring Tools
Track what users are doing (with permission, of course!)

🎮 Gaming Highlights
Capture gameplay moments automatically

🔍 QA Tools
Record user sessions for bug reports

The Technical Bits

For the nerds (like me), here's what's under the hood:

  • MediaProjection API - Android's official screen capture API
  • TurboModule - New React Native architecture support
  • Kotlin - Native Android implementation
  • TypeScript - Type-safe JavaScript API
  • ImageReader - Efficient frame capture without lag

Challenges I Faced

Building this wasn't all smooth sailing. Here are some fun challenges:

1. Permission Hell
Android 13+ requires notification permissions, MediaProjection needs runtime permission, and foreground services need manifest declarations. Getting all of this right took some time.

2. Memory Management
Capturing high-res frames every second can eat memory fast. Had to implement smart buffering and cleanup strategies.

3. Overlay Rendering
Drawing text and images on bitmaps efficiently in Kotlin while keeping the API simple in JavaScript was... interesting.

What's Next?

I'm planning to add:

  • Video encoding (stitch frames into MP4)
  • More overlay options (shapes, animations)
  • Performance optimizations
  • Better error handling

Try It Out!

The library is open source and available on npm:

npm install react-native-frame-capture
Enter fullscreen mode Exit fullscreen mode

Check it out:

Your Turn

Have you ever needed screen capture in your apps? What features would make this more useful for you? Drop a comment below - I'd love to hear your thoughts!

And if you find this useful, give it a ⭐ on GitHub. It really helps!

Built with ❤️ and way too much coffee ☕

Top comments (0)