rn-av-binder 1.0.0

package/README.md

@@ -0,0 +1,130 @@
+# rn-av-binder
+
+On-device **image + audio → MP4** composition for React Native — no FFmpeg, no third-party
+media libraries. Uses **AVFoundation** on iOS and **MediaCodec / MediaMuxer / MediaExtractor**
+on Android. Built as an Expo Module for the **New Architecture** (Fabric + JSI).
+
+## Motivation
+
+`ffmpeg-kit` was retired in April 2025, leaving React Native apps without a maintained, fully
+on-device way to turn a still image plus an audio track into a playable video. `rn-av-binder`
+is the pure-native replacement for the common "audiogram" use case: it encodes a single static
+image as a 2-frame H.264 video and muxes the original audio in **unmodified** (passthrough, no
+re-encode), so the output duration matches the source audio and the operation is fast and
+lossless on the audio side.
+
+## Installation
+
+```bash
+yarn add rn-av-binder
+npx expo run:ios   # or eas build
+```
+
+Add the plugin to your `app.json`, then rebuild the native project:
+
+```json
+{
+  "expo": {
+    "plugins": ["rn-av-binder"]
+  }
+}
+```
+
+> Native linking itself is automatic via Expo Modules autolinking; the plugin entry exists so
+> the package is registered in your config and to allow future native config tweaks.
+
+## API
+
+```ts
+import { createVideo } from "rn-av-binder";
+
+createVideo(options, onProgress?): Promise<CreateVideoResult>;
+```
+
+### `CreateVideoOptions`
+
+| Field       | Type     | Required | Description                                                        |
+| ----------- | -------- | -------- | ------------------------------------------------------------------ |
+| `imageUri`  | `string` | yes      | `file://` URI to a JPEG or PNG image                               |
+| `audioUri`  | `string` | yes      | `file://` URI to an AAC, MP3, or M4A audio file                    |
+| `outputUri` | `string` | no       | `file://` URI for the MP4. Defaults to `<cacheDir>/image_audio_<timestamp>.mp4` |
+
+### `CreateVideoResult`
+
+| Field        | Type     | Description                            |
+| ------------ | -------- | -------------------------------------- |
+| `uri`        | `string` | `file://` URI of the created MP4       |
+| `durationMs` | `number` | Duration of the output video, in ms    |
+
+### `ProgressEvent`
+
+| Field      | Type     | Description                          |
+| ---------- | -------- | ------------------------------------ |
+| `progress` | `number` | Encoding progress from `0.0` to `1.0` |
+
+The optional `onProgress` callback receives `{ progress }` and fires at `0.0`, `0.5`, and `1.0`.
+
+## Usage
+
+```ts
+import * as ImagePicker from "expo-image-picker";
+import * as DocumentPicker from "expo-document-picker";
+import { createVideo } from "rn-av-binder";
+
+async function makeVideo() {
+  const image = await ImagePicker.launchImageLibraryAsync({ mediaTypes: "Images" });
+  const audio = await DocumentPicker.getDocumentAsync({ type: "audio/*" });
+  if (image.canceled || audio.canceled) return;
+
+  const result = await createVideo(
+    { imageUri: image.assets[0].uri, audioUri: audio.assets[0].uri },
+    ({ progress }) => console.log(`${Math.round(progress * 100)}%`),
+  );
+
+  console.log(result.uri, `${(result.durationMs / 1000).toFixed(1)}s`);
+}
+```
+
+## Platform requirements
+
+- **iOS** 15.0+
+- **Android** API 26+ (minSdkVersion 26)
+- **Expo** SDK 52+
+- **React Native** 0.76+
+- **New Architecture required** (`newArchEnabled: true`)
+
+## Running the example app
+
+The repo includes a standalone example under `example/` that installs the package via
+`"rn-av-binder": "file:.."` — exactly what a consumer does after `yarn add`.
+
+```bash
+# from the package root
+yarn install
+yarn build
+
+cd example
+yarn install
+npx expo run:ios      # requires Xcode + iOS 15 simulator/device
+npx expo run:android  # requires Android Studio + API 26 emulator/device
+```
+
+Pick an image and an audio file, tap **Create Video**, watch the progress bar, and the encoded
+MP4 plays inline on completion.
+
+## Publishing checklist
+
+1. `yarn build` completes with no TypeScript errors; `build/index.js` and `build/index.d.ts` exist.
+2. `npm pack --dry-run` includes `build/`, `ios/`, `android/`, `expo-module.config.json`,
+   `rn-av-binder.podspec`, `app.plugin.js` — and **excludes** `example/`.
+3. `npm login` (authenticate).
+4. `npm publish` (runs `prepare` → `yarn build` automatically).
+
+## Known limitations
+
+- Single static image only — no slideshow, no transitions.
+- No video-to-video processing; input must be one image + one audio file.
+- Audio is passed through unchanged; the container must support the source audio codec (MP4
+  supports AAC/M4A; some exotic codecs may need transcoding, which this library does not do).
+- On the iOS Simulator, camera-roll access can be limited — a physical device may be required
+  for picking images.

package/android/build.gradle

@@ -0,0 +1,45 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+group = 'expo.modules.imageaudiovideo'
+version = '1.0.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce
+// breaking changes in your module code. Most of the time, you may like to manage the Android SDK
+// versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 26)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.imageaudiovideo"
+  defaultConfig {
+    versionCode 1
+    versionName "1.0.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/java/expo/modules/imageaudiovideo/ImageAudioVideoModule.kt

@@ -0,0 +1,237 @@
+package expo.modules.imageaudiovideo
+
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.media.MediaCodec
+import android.media.MediaCodecInfo
+import android.media.MediaExtractor
+import android.media.MediaFormat
+import android.media.MediaMetadataRetriever
+import android.media.MediaMuxer
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import java.io.File
+import java.nio.ByteBuffer
+
+class ImageAudioVideoModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ImageAudioVideo")
+    Events("onProgress")
+
+    AsyncFunction("createVideoAsync") { options: Map<String, String?> ->
+      withContext(Dispatchers.IO) {
+        createVideo(options)
+      }
+    }
+  }
+
+  private data class EncodedChunk(val data: ByteArray, val info: MediaCodec.BufferInfo)
+
+  private fun createVideo(options: Map<String, String?>): Map<String, Any> {
+    // ── Step 1 — Resolve paths ────────────────────────────────────────────────
+    val imagePath = options["imageUri"]?.takeIf { it.isNotEmpty() }
+      ?: throw Exception("ERR_INVALID_IMAGE: imageUri is required")
+    val audioPath = options["audioUri"]?.takeIf { it.isNotEmpty() }
+      ?: throw Exception("ERR_INVALID_AUDIO: audioUri is required")
+    val outputPath = options["outputUri"]?.takeIf { it.isNotEmpty() }
+      ?: (appContext.reactContext!!.cacheDir.absolutePath + "/image_audio_${System.currentTimeMillis()}.mp4")
+
+    File(outputPath).parentFile?.mkdirs()
+    File(outputPath).takeIf { it.exists() }?.delete()
+    sendEvent("onProgress", mapOf("progress" to 0.0))
+
+    // ── Step 2 — Load and prepare image ───────────────────────────────────────
+    var bitmap = BitmapFactory.decodeFile(imagePath)
+      ?: throw Exception("ERR_INVALID_IMAGE: could not decode image at $imagePath")
+    if (bitmap.width > 4096 || bitmap.height > 4096) {
+      val scale = 4096.0 / maxOf(bitmap.width, bitmap.height)
+      bitmap = Bitmap.createScaledBitmap(
+        bitmap, (bitmap.width * scale).toInt(), (bitmap.height * scale).toInt(), true
+      )
+    }
+    if (bitmap.config != Bitmap.Config.ARGB_8888) {
+      bitmap = bitmap.copy(Bitmap.Config.ARGB_8888, false)
+    }
+    // Round both dimensions down to the nearest even integer (H.264 requires even dims)
+    val width = (bitmap.width / 2) * 2
+    val height = (bitmap.height / 2) * 2
+    if (width <= 0 || height <= 0) throw Exception("ERR_INVALID_IMAGE: image dimensions are too small")
+
+    // ── Step 3 — Get audio duration and validate ──────────────────────────────
+    val retriever = MediaMetadataRetriever()
+    retriever.setDataSource(audioPath)
+    val durationMs = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION)
+      ?.toLongOrNull() ?: throw Exception("ERR_INVALID_AUDIO: cannot read audio duration")
+    retriever.release()
+    if (durationMs <= 0) throw Exception("ERR_INVALID_AUDIO: audio has zero or invalid duration")
+    val durationUs = durationMs * 1000L
+
+    val validator = MediaExtractor()
+    validator.setDataSource(audioPath)
+    val hasAudio = (0 until validator.trackCount).any {
+      validator.getTrackFormat(it).getString(MediaFormat.KEY_MIME)?.startsWith("audio/") == true
+    }
+    validator.release()
+    if (!hasAudio) throw Exception("ERR_NO_AUDIO_TRACK: audio file has no audio track")
+
+    // ── Step 4 — Configure H.264 encoder ──────────────────────────────────────
+    val videoFormat = MediaFormat.createVideoFormat(MediaFormat.MIMETYPE_VIDEO_AVC, width, height).apply {
+      setInteger(MediaFormat.KEY_COLOR_FORMAT, MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420Flexible)
+      setInteger(MediaFormat.KEY_BIT_RATE, width * height * 2)
+      setInteger(MediaFormat.KEY_FRAME_RATE, 1)
+      setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, 1)
+    }
+    val encoder = MediaCodec.createEncoderByType(MediaFormat.MIMETYPE_VIDEO_AVC)
+    encoder.configure(videoFormat, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
+    encoder.start()
+
+    // ── Step 6 — Encode exactly 2 frames and collect output ───────────────────
+    val videoChunks = mutableListOf<EncodedChunk>()
+    var outputFormat: MediaFormat? = null
+
+    fun encodeFrame(yuvData: ByteArray, presentationTimeUs: Long, isLast: Boolean) {
+      val inputIndex = encoder.dequeueInputBuffer(10_000L)
+      if (inputIndex >= 0) {
+        val inputBuffer = encoder.getInputBuffer(inputIndex)!!
+        inputBuffer.clear()
+        inputBuffer.put(yuvData)
+        val flags = if (isLast) MediaCodec.BUFFER_FLAG_END_OF_STREAM else 0
+        encoder.queueInputBuffer(inputIndex, 0, yuvData.size, presentationTimeUs, flags)
+      }
+      // Drain output
+      val bufferInfo = MediaCodec.BufferInfo()
+      var draining = true
+      while (draining) {
+        val outputIndex = encoder.dequeueOutputBuffer(bufferInfo, 10_000L)
+        when {
+          outputIndex == MediaCodec.INFO_OUTPUT_FORMAT_CHANGED -> outputFormat = encoder.outputFormat
+          outputIndex >= 0 -> {
+            val outputBuffer = encoder.getOutputBuffer(outputIndex)!!
+            val chunk = ByteArray(bufferInfo.size)
+            outputBuffer.get(chunk)
+            videoChunks.add(EncodedChunk(chunk, MediaCodec.BufferInfo().also {
+              it.offset = 0
+              it.size = bufferInfo.size
+              it.presentationTimeUs = bufferInfo.presentationTimeUs
+              it.flags = bufferInfo.flags
+            }))
+            encoder.releaseOutputBuffer(outputIndex, false)
+            if (bufferInfo.flags and MediaCodec.BUFFER_FLAG_END_OF_STREAM != 0) draining = false
+          }
+          else -> draining = false
+        }
+      }
+    }
+
+    val yuvData = bitmapToYuv420(bitmap, width, height)
+    encodeFrame(yuvData, 0L, false)
+    encodeFrame(yuvData, durationUs - 1000L, true)
+
+    encoder.stop()
+    encoder.release()
+    sendEvent("onProgress", mapOf("progress" to 0.5))
+
+    // ── Step 7 — Mux video + audio ────────────────────────────────────────────
+    val muxer = MediaMuxer(outputPath, MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4)
+    val videoTrack = muxer.addTrack(
+      outputFormat ?: throw Exception("ERR_ENCODE: encoder produced no output format")
+    )
+
+    // Add audio track from extractor
+    val extractor = MediaExtractor()
+    extractor.setDataSource(audioPath)
+    val audioTrackIndex = (0 until extractor.trackCount).first {
+      extractor.getTrackFormat(it).getString(MediaFormat.KEY_MIME)?.startsWith("audio/") == true
+    }
+    extractor.selectTrack(audioTrackIndex)
+    val audioTrack = muxer.addTrack(extractor.getTrackFormat(audioTrackIndex))
+    muxer.start()
+
+    // Write video
+    val videoBuffer = ByteBuffer.allocate(1024 * 512)
+    for (chunk in videoChunks) {
+      videoBuffer.clear()
+      videoBuffer.put(chunk.data)
+      videoBuffer.flip()
+      muxer.writeSampleData(videoTrack, videoBuffer, chunk.info)
+    }
+
+    // Write audio (passthrough)
+    val audioBuffer = ByteBuffer.allocate(1024 * 512)
+    val audioInfo = MediaCodec.BufferInfo()
+    while (true) {
+      val sampleSize = extractor.readSampleData(audioBuffer, 0)
+      if (sampleSize < 0) break
+      audioInfo.offset = 0
+      audioInfo.size = sampleSize
+      audioInfo.presentationTimeUs = extractor.sampleTime
+      audioInfo.flags = extractor.sampleFlags
+      muxer.writeSampleData(audioTrack, audioBuffer, audioInfo)
+      extractor.advance()
+    }
+
+    extractor.release()
+    muxer.stop()
+    muxer.release()
+
+    sendEvent("onProgress", mapOf("progress" to 1.0))
+    return mapOf("uri" to outputPath, "durationMs" to durationMs)
+  }
+
+  // ── Step 5 — RGB → YUV420 (I420 planar: Y, then U, then V) ──────────────────
+  private fun bitmapToYuv420(bitmap: Bitmap, width: Int, height: Int): ByteArray {
+    val ySize = width * height
+    val cSize = (width / 2) * (height / 2)
+    val out = ByteArray(ySize + 2 * cSize)
+    val pixels = IntArray(width * height)
+    bitmap.getPixels(pixels, 0, width, 0, 0, width, height)
+
+    // Y plane (full resolution)
+    var yIndex = 0
+    for (j in 0 until height) {
+      for (i in 0 until width) {
+        val p = pixels[j * width + i]
+        val r = (p shr 16) and 0xFF
+        val g = (p shr 8) and 0xFF
+        val b = p and 0xFF
+        val y = ((66 * r + 129 * g + 25 * b + 128) shr 8) + 16
+        out[yIndex++] = clamp(y).toByte()
+      }
+    }
+
+    // U and V planes (subsampled — average each 2×2 block)
+    var uIndex = ySize
+    var vIndex = ySize + cSize
+    for (j in 0 until height step 2) {
+      for (i in 0 until width step 2) {
+        var sumR = 0
+        var sumG = 0
+        var sumB = 0
+        for (dj in 0 until 2) {
+          for (di in 0 until 2) {
+            val p = pixels[(j + dj) * width + (i + di)]
+            sumR += (p shr 16) and 0xFF
+            sumG += (p shr 8) and 0xFF
+            sumB += p and 0xFF
+          }
+        }
+        val r = sumR / 4
+        val g = sumG / 4
+        val b = sumB / 4
+        val u = ((-38 * r - 74 * g + 112 * b + 128) shr 8) + 128
+        val v = ((112 * r - 94 * g - 18 * b + 128) shr 8) + 128
+        out[uIndex++] = clamp(u).toByte()
+        out[vIndex++] = clamp(v).toByte()
+      }
+    }
+    return out
+  }
+
+  private fun clamp(value: Int): Int = when {
+    value < 0 -> 0
+    value > 255 -> 255
+    else -> value
+  }
+}

package/android/src/main/java/expo/modules/imageaudiovideo/ImageAudioVideoPackage.kt

@@ -0,0 +1,7 @@
+package expo.modules.imageaudiovideo
+
+import expo.modules.kotlin.Package
+
+class ImageAudioVideoPackage : Package {
+  override fun createModules() = listOf(ImageAudioVideoModule())
+}

package/app.plugin.js

@@ -0,0 +1,8 @@
+const { withPlugins } = require("@expo/config-plugins");
+
+/**
+ * Expo Config Plugin for rn-av-binder.
+ * Pass-through: native linking is handled automatically by Expo Modules autolinking.
+ * Exists to satisfy app.json `plugins` array and allow future native config modifications.
+ */
+module.exports = (config) => withPlugins(config, []);

package/build/index.d.ts

@@ -0,0 +1,32 @@
+export interface CreateVideoOptions {
+    /** file:// URI to a JPEG or PNG image */
+    imageUri: string;
+    /** file:// URI to an AAC, MP3, or M4A audio file */
+    audioUri: string;
+    /**
+     * Optional file:// URI for the output MP4.
+     * Defaults to <cacheDir>/image_audio_<timestamp>.mp4
+     */
+    outputUri?: string;
+}
+export interface CreateVideoResult {
+    /** file:// URI of the created MP4 */
+    uri: string;
+    /** Duration of the output video in milliseconds */
+    durationMs: number;
+}
+export interface ProgressEvent {
+    /** Encoding progress from 0.0 to 1.0 */
+    progress: number;
+}
+/**
+ * Compose a static image and an audio file into an MP4 video, entirely on-device.
+ *
+ * @example
+ * const result = await createVideo(
+ *   { imageUri: 'file:///path/to/image.jpg', audioUri: 'file:///path/to/audio.m4a' },
+ *   ({ progress }) => console.log(`${Math.round(progress * 100)}%`)
+ * );
+ * console.log(result.uri); // file:///path/to/output.mp4
+ */
+export declare function createVideo(options: CreateVideoOptions, onProgress?: (event: ProgressEvent) => void): Promise<CreateVideoResult>;

package/build/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVideo = createVideo;
+const expo_modules_core_1 = require("expo-modules-core");
+const native = (0, expo_modules_core_1.requireNativeModule)("ImageAudioVideo");
+// ─── Public API ───────────────────────────────────────────────────────────────
+/**
+ * Compose a static image and an audio file into an MP4 video, entirely on-device.
+ *
+ * @example
+ * const result = await createVideo(
+ *   { imageUri: 'file:///path/to/image.jpg', audioUri: 'file:///path/to/audio.m4a' },
+ *   ({ progress }) => console.log(`${Math.round(progress * 100)}%`)
+ * );
+ * console.log(result.uri); // file:///path/to/output.mp4
+ */
+async function createVideo(options, onProgress) {
+    const nativeOptions = {
+        imageUri: options.imageUri.replace(/^file:\/\//, ""),
+        audioUri: options.audioUri.replace(/^file:\/\//, ""),
+        outputUri: options.outputUri?.replace(/^file:\/\//, ""),
+    };
+    let subscription;
+    if (onProgress) {
+        subscription = native.addListener("onProgress", onProgress);
+    }
+    try {
+        const result = await native.createVideoAsync(nativeOptions);
+        return {
+            uri: result.uri.startsWith("file://")
+                ? result.uri
+                : `file://${result.uri}`,
+            durationMs: result.durationMs,
+        };
+    }
+    finally {
+        subscription?.remove();
+    }
+}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android"],
+  "apple": {
+    "modules": ["ImageAudioVideoModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.imageaudiovideo.ImageAudioVideoModule"]
+  }
+}

package/ios/ImageAudioVideoModule.swift

@@ -0,0 +1,233 @@
+import ExpoModulesCore
+import AVFoundation
+import UIKit
+import CoreVideo
+import CoreMedia
+
+public class ImageAudioVideoModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ImageAudioVideo")
+    Events("onProgress")
+
+    AsyncFunction("createVideoAsync") { (options: [String: String?], promise: Promise) in
+      Task {
+        do {
+          let result = try await self.createVideo(options: options)
+          promise.resolve(result)
+        } catch {
+          promise.reject("ERR_CREATE_VIDEO", error.localizedDescription)
+        }
+      }
+    }
+  }
+
+  // MARK: - Core
+
+  private func createVideo(options: [String: String?]) async throws -> [String: Any] {
+    // ── Step 1 — Resolve paths ────────────────────────────────────────────────
+    guard let imagePath = options["imageUri"] ?? nil, !imagePath.isEmpty else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_IMAGE: imageUri is required"])
+    }
+    guard let audioPath = options["audioUri"] ?? nil, !audioPath.isEmpty else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_AUDIO: audioUri is required"])
+    }
+
+    let outputPath: String
+    if let provided = options["outputUri"] ?? nil, !provided.isEmpty {
+      outputPath = provided
+    } else {
+      let ts = Int(Date().timeIntervalSince1970 * 1000)
+      outputPath = NSTemporaryDirectory() + "image_audio_\(ts).mp4"
+    }
+    let outputURL = URL(fileURLWithPath: outputPath)
+
+    // Ensure parent directory exists
+    let parentDir = outputURL.deletingLastPathComponent()
+    if !FileManager.default.fileExists(atPath: parentDir.path) {
+      try FileManager.default.createDirectory(at: parentDir, withIntermediateDirectories: true)
+    }
+    // Delete any pre-existing file (AVAssetWriter fails if it exists)
+    try? FileManager.default.removeItem(at: outputURL)
+
+    sendEvent("onProgress", ["progress": 0.0])
+
+    // ── Step 2 — Load and prepare image ───────────────────────────────────────
+    guard var image = UIImage(contentsOfFile: imagePath) else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_IMAGE: could not decode image at \(imagePath)"])
+    }
+    guard image.cgImage != nil else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_IMAGE: image has no backing bitmap"])
+    }
+
+    var rawWidth = image.cgImage!.width
+    var rawHeight = image.cgImage!.height
+
+    // Clamp the larger dimension to 4096
+    let maxDim = 4096
+    if rawWidth > maxDim || rawHeight > maxDim {
+      let scale = Double(maxDim) / Double(max(rawWidth, rawHeight))
+      let scaledSize = CGSize(width: CGFloat(Double(rawWidth) * scale),
+                              height: CGFloat(Double(rawHeight) * scale))
+      let renderer = UIGraphicsImageRenderer(size: scaledSize)
+      image = renderer.image { _ in
+        image.draw(in: CGRect(origin: .zero, size: scaledSize))
+      }
+      rawWidth = image.cgImage!.width
+      rawHeight = image.cgImage!.height
+    }
+
+    // Round both dimensions down to the nearest even integer (H.264 requires even dims)
+    let width = (rawWidth / 2) * 2
+    let height = (rawHeight / 2) * 2
+    guard width > 0 && height > 0 else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_IMAGE: image dimensions are too small"])
+    }
+
+    // ── Step 3 — Load audio and get duration ──────────────────────────────────
+    let audioURL = URL(fileURLWithPath: audioPath)
+    let audioAsset = AVURLAsset(url: audioURL)
+    let duration = try await audioAsset.load(.duration)
+    if duration == .invalid || CMTimeGetSeconds(duration) <= 0 {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_AUDIO: audio has zero or invalid duration"])
+    }
+    let tracks = try await audioAsset.loadTracks(withMediaType: .audio)
+    if tracks.isEmpty {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_NO_AUDIO_TRACK: audio file has no audio track"])
+    }
+
+    // ── Step 4 — Set up AVAssetWriter ─────────────────────────────────────────
+    let writer = try AVAssetWriter(outputURL: outputURL, fileType: .mp4)
+
+    // ── Step 5 — Video input (H.264, static frames) ───────────────────────────
+    let videoSettings: [String: Any] = [
+      AVVideoCodecKey: AVVideoCodecType.h264,
+      AVVideoWidthKey: NSNumber(value: width),
+      AVVideoHeightKey: NSNumber(value: height),
+      AVVideoCompressionPropertiesKey: [
+        AVVideoAverageBitRateKey: width * height * 2,
+        AVVideoProfileLevelKey: AVVideoProfileLevelH264HighAutoLevel,
+      ] as [String: Any],
+    ]
+    let videoInput = AVAssetWriterInput(mediaType: .video, outputSettings: videoSettings)
+    videoInput.expectsMediaDataInRealTime = false
+
+    let adaptor = AVAssetWriterInputPixelBufferAdaptor(
+      assetWriterInput: videoInput,
+      sourcePixelBufferAttributes: [
+        kCVPixelBufferPixelFormatTypeKey as String: Int(kCVPixelFormatType_32ARGB),
+        kCVPixelBufferWidthKey as String: width,
+        kCVPixelBufferHeightKey as String: height,
+      ]
+    )
+    writer.add(videoInput)
+
+    // ── Step 6 — Audio input (passthrough, no re-encoding) ────────────────────
+    let audioInput = AVAssetWriterInput(mediaType: .audio, outputSettings: nil)
+    audioInput.expectsMediaDataInRealTime = false
+    writer.add(audioInput)
+
+    // ── Step 8 — Write exactly 2 video frames ─────────────────────────────────
+    guard writer.startWriting() else {
+      throw writer.error ?? NSError(domain: "ImageAudioVideo", code: -1,
+        userInfo: [NSLocalizedDescriptionKey: "AVAssetWriter failed to start writing"])
+    }
+    writer.startSession(atSourceTime: .zero)
+
+    let pixelBuffer = try imageToPixelBuffer(image, width: width, height: height)
+
+    // Frame 1: presentation time = 0
+    while !videoInput.isReadyForMoreMediaData { await Task.yield() }
+    adaptor.append(pixelBuffer, withPresentationTime: .zero)
+
+    // Frame 2: presentation time = duration - 1 tick (avoids single-frame player quirks)
+    let lastFrameTime = CMTimeSubtract(duration, CMTime(value: 1, timescale: 600))
+    while !videoInput.isReadyForMoreMediaData { await Task.yield() }
+    adaptor.append(pixelBuffer, withPresentationTime: lastFrameTime)
+
+    videoInput.markAsFinished()
+    sendEvent("onProgress", ["progress": 0.5])
+
+    // ── Step 9 — Pipe audio via AVAssetReader (passthrough) ───────────────────
+    let reader = try AVAssetReader(asset: audioAsset)
+    let audioTrack = tracks.first!
+    let readerOutput = AVAssetReaderTrackOutput(track: audioTrack, outputSettings: nil) // nil = compressed passthrough
+    reader.add(readerOutput)
+    reader.startReading()
+
+    while let sampleBuffer = readerOutput.copyNextSampleBuffer() {
+      while !audioInput.isReadyForMoreMediaData {
+        await Task.yield()
+      }
+      audioInput.append(sampleBuffer)
+    }
+    audioInput.markAsFinished()
+
+    // ── Step 10 — Finish and return ───────────────────────────────────────────
+    await writer.finishWriting()
+    guard writer.status == .completed else {
+      throw writer.error ?? NSError(domain: "ImageAudioVideo", code: -1,
+        userInfo: [NSLocalizedDescriptionKey: "AVAssetWriter failed with status \(writer.status.rawValue)"])
+    }
+    sendEvent("onProgress", ["progress": 1.0])
+    return [
+      "uri": outputURL.path,
+      "durationMs": CMTimeGetSeconds(duration) * 1000.0,
+    ]
+  }
+
+  // MARK: - Step 7 — Image → CVPixelBuffer helper
+
+  private func imageToPixelBuffer(_ image: UIImage, width: Int, height: Int) throws -> CVPixelBuffer {
+    let attrs: [String: Any] = [
+      kCVPixelBufferCGImageCompatibilityKey as String: true,
+      kCVPixelBufferCGBitmapContextCompatibilityKey as String: true,
+    ]
+    var pixelBuffer: CVPixelBuffer?
+    let status = CVPixelBufferCreate(
+      kCFAllocatorDefault, width, height,
+      kCVPixelFormatType_32ARGB, attrs as CFDictionary, &pixelBuffer
+    )
+    guard status == kCVReturnSuccess, let buffer = pixelBuffer else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_PIXEL_BUFFER: could not allocate pixel buffer"])
+    }
+
+    CVPixelBufferLockBaseAddress(buffer, [])
+    defer { CVPixelBufferUnlockBaseAddress(buffer, []) }
+
+    guard let baseAddress = CVPixelBufferGetBaseAddress(buffer) else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_PIXEL_BUFFER: could not lock pixel buffer"])
+    }
+
+    let colorSpace = CGColorSpaceCreateDeviceRGB()
+    let bitmapInfo = CGImageAlphaInfo.noneSkipFirst.rawValue | CGBitmapInfo.byteOrder32Big.rawValue
+    guard let context = CGContext(
+      data: baseAddress,
+      width: width,
+      height: height,
+      bitsPerComponent: 8,
+      bytesPerRow: CVPixelBufferGetBytesPerRow(buffer),
+      space: colorSpace,
+      bitmapInfo: bitmapInfo
+    ) else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_PIXEL_BUFFER: could not create CGContext"])
+    }
+
+    guard let cgImage = image.cgImage else {
+      throw NSError(domain: "ImageAudioVideo", code: -1,
+                    userInfo: [NSLocalizedDescriptionKey: "ERR_INVALID_IMAGE: missing cgImage"])
+    }
+    context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
+
+    return buffer
+  }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rn-av-binder",
+  "version": "1.0.0",
+  "description": "On-device image + audio → MP4 composition for React Native. AVFoundation (iOS) and MediaCodec/MediaMuxer (Android). New Architecture compatible.",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "author": "mustneerahmadr7@gmail.com",
+  "files": [
+    "build/",
+    "ios/",
+    "android/",
+    "expo-module.config.json",
+    "rn-av-binder.podspec",
+    "app.plugin.js"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepare": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "video",
+    "audio",
+    "mp4",
+    "avfoundation",
+    "mediacodec"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "expo": ">=52.0.0",
+    "expo-modules-core": "*",
+    "react-native": ">=0.76.0"
+  },
+  "devDependencies": {
+    "expo-modules-core": "^2.0.0",
+    "typescript": "^5.3.0"
+  }
+}

package/rn-av-binder.podspec

@@ -0,0 +1,17 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'rn-av-binder'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.license        = { :type => 'MIT' }
+  s.homepage       = 'https://github.com/yourname/rn-av-binder'
+  s.authors        = { 'Author' => 'mustneerahmadr7@gmail.com' }
+  s.source         = { :git => 'https://github.com/yourname/rn-av-binder.git',
+                       :tag => s.version.to_s }
+  s.platforms      = { :ios => '15.0' }
+  s.swift_version  = '5.9'
+  s.source_files   = 'ios/**/*.swift'
+  s.dependency     'ExpoModulesCore'
+end