React Native Image Sequence Encoder

On‑device PNG → MP4 encoder for React‑Native & Expo

No FFmpeg • No GPL • Just the platform video encoders — AVAssetWriter (iOS) & MediaCodec (Android)

Table of Contents

• React Native Image Sequence Encoder
  • Table of Contents
  • Features
  • Installation
    • Expo‑managed / Expo dev‑client
    • Bare React‑Native ≥ 0.60
      • iOS
      • Android
    • React‑Native < 0.60 (manual linking)
  • Usage
    • API
  • Troubleshooting
  • Contributing
  • License

Features

• Offline – runs entirely on the device, no upload required
• Tiny footprint – adds ≈150 kB native code, zero third-party binaries
• Expo-friendly – ships with a config-plugin; just add it to app.json
• Classic & New Architecture – works if the host app opts into TurboModule/Fabric later

Installation

Supported React‑Native versions: 0.65 → 0.73 (Expo SDK 49/50).
Older versions may compile but are not tested.

Expo‑managed / Expo dev‑client

npx expo install react-native-image-sequence-encoder

Add the plugin entry to app.json / app.config.js so EAS can autolink:

{
  "expo": {
    "plugins": ["react-native-image-sequence-encoder"]
  }
}

That’s it — run a development build or EAS production build and the native module is ready.

Local testing: run npx expo run:ios or npx expo run:android after installing the library; Expo Go will not include the native code.

Bare React‑Native ≥ 0.60

npm install react-native-image-sequence-encoder

iOS

cd ios && pod install && cd ..

Android

Android registration (one‑time): open MainApplication.java or MainApplication.kt and add the package:

import com.reactnativeimagesequenceencoder.ImageSequenceEncoderPackage;

@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new ImageSequenceEncoderPackage());
  return packages;
}

Storage permission (optional): only needed if you save the MP4 outside the app sandbox.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<!-- Android 13+ -->
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

React‑Native < 0.60 (manual linking)

For legacy projects still on RN 0.59 or below:

react-native link react-native-image-sequence-encoder

Then follow the iOS pod install and Android package registration steps above.

Usage

import { encode } from 'react-native-image-sequence-encoder';
import * as FileSystem from 'expo-file-system';

// after you have /cache/frames/frame-00000.png …
const uri = await encode({
  folder:  FileSystem.cacheDirectory + 'frames/',
  fps:     30,
  width:   1280,
  height:  720,
  output:  FileSystem.documentDirectory + 'chat.mp4',
});

console.log('MP4 saved at', uri);

API

Option	Type	Description
folder	string	Directory ending with /, containing sequential PNG frames
fps	number	Frames per second in the output file
width	number	Output width in pixels
height	number	Output height in pixels
output	string	Absolute path for the MP4 (overwritten if already exists)

Returns Promise<string> – absolute file URI of the saved video.

⚠️ The module does no down‑scaling; make sure width & height match the PNG resolution or resize the frames before calling encode().

Troubleshooting

Problem	Fix
Native module not linked	Rebuild the dev client (eas build --profile development) or run npx react-native run-android / run-ios.
INFO_OUTPUT_FORMAT_CHANGED twice (Android)	Stick to even dimensions (e.g. 1280×720); some encoders reject odd sizes.
iOS < 12 crash	The podspec targets iOS 12+. Older OS versions are not supported.

Contributing

PRs are welcome! See CONTRIBUTING.md for details.

License

MIT © 2025 Elliot Fleming