expo-image-to-video 0.1.0

package/README.md

@@ -0,0 +1,35 @@
+# expo-image-to-video
+
+High-performance native image-to-video conversion for Expo
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/image-to-video/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/image-to-video/)
+
+# Installation in managed Expo projects
+
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
+
+```
+npm install expo-image-to-video
+```
+
+### Configure for Android
+
+
+
+
+### Configure for iOS
+
+Run `npx pod-install` after installing the npm package.
+
+# Contributing
+
+Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Sat Jan 17 14:59:53 ICT 2026
+gradle.version=8.9

package/android/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.imagetovideo'
+version = '0.1.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", 36)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 24)
+      targetSdkVersion safeExtGet("targetSdkVersion", 36)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.imagetovideo"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/imagetovideo/ExpoImageToVideoModule.kt

@@ -0,0 +1,103 @@
+package expo.modules.imagetovideo
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import java.io.File
+import java.net.URL
+
+class ExpoImageToVideoModule : Module() {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  override fun definition() = ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ExpoImageToVideo')` in JavaScript.
+    Name("ExpoImageToVideo")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Math.PI
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { value: String ->
+      // Send an event to JavaScript.
+      sendEvent("onChange", mapOf(
+        "value" to value
+      ))
+    }
+
+    AsyncFunction("generateVideo") { options: VideoOptions, promise: expo.modules.kotlin.Promise ->
+            val context = appContext.reactContext ?: throw Exception("Context not found")
+            
+            // Run in background thread to keep UI and JS thread responsive
+            CoroutineScope(Dispatchers.IO).launch {
+                try {
+                    val outputFile = if (options.outputPath != null) {
+                        File(options.outputPath)
+                    } else {
+                        File(context.cacheDir, "video_${System.currentTimeMillis()}.mp4")
+                    }
+
+                    val encoder = VideoEncoder(
+                        outputFile,
+                        options.width,
+                        options.height,
+                        options.fps,
+                        options.bitrate ?: 2500000
+                    )
+
+                    encoder.start()
+
+                    options.images.forEach { uri ->
+                        // Resolve Expo/Content URIs to Bitmaps
+                        val bitmap = ImageUtils.loadBitmap(context, uri, options.width, options.height)
+                            ?: throw Exception("Failed to load image: $uri")
+                        
+                        encoder.encodeFrame(bitmap)
+                        bitmap.recycle() // Critical for memory management
+                    }
+
+                    encoder.stop()
+                    promise.resolve(outputFile.absolutePath)
+                } catch (e: Exception) {
+                    promise.reject("ERR_VIDEO_ENCODING", e.message, e)
+                }
+            }
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of
+    // the view definition: Prop, Events.
+    View(ExpoImageToVideoView::class) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { view: ExpoImageToVideoView, url: URL ->
+        view.webView.loadUrl(url.toString())
+      }
+      // Defines an event that the view can send to JavaScript.
+      Events("onLoad")
+    }
+  }
+}
+
+// Data class for Expo Module auto-serialization
+data class VideoOptions(
+    val images: List<String>,
+    val fps: Int,
+    val width: Int,
+    val height: Int,
+    val bitrate: Int?,
+    val outputPath: String?
+) : expo.modules.kotlin.types.Enumerable

package/android/src/main/java/expo/modules/imagetovideo/ExpoImageToVideoView.kt

@@ -0,0 +1,30 @@
+package expo.modules.imagetovideo
+
+import android.content.Context
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class ExpoImageToVideoView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Creates and initializes an event dispatcher for the `onLoad` event.
+  // The name of the event is inferred from the value and needs to match the event name defined in the module.
+  private val onLoad by EventDispatcher()
+
+  // Defines a WebView that will be used as the root subview.
+  internal val webView = WebView(context).apply {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    webViewClient = object : WebViewClient() {
+      override fun onPageFinished(view: WebView, url: String) {
+        // Sends an event to JavaScript. Triggers a callback defined on the view component in JavaScript.
+        onLoad(mapOf("url" to url))
+      }
+    }
+  }
+
+  init {
+    // Adds the WebView to the view hierarchy.
+    addView(webView)
+  }
+}

package/android/src/main/java/expo/modules/imagetovideo/VideoEncoder.kt

@@ -0,0 +1,102 @@
+package expo.modules.imagetovideo
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Rect
+import android.media.MediaCodec
+import android.media.MediaCodecInfo
+import android.media.MediaFormat
+import android.media.MediaMuxer
+import android.view.Surface
+import java.io.File
+
+class VideoEncoder(
+    private val outputFile: File,
+    private val width: Int,
+    private val height: Int,
+    private val fps: Int,
+    private val bitrate: Int
+) {
+    private var encoder: MediaCodec? = null
+    private var muxer: MediaMuxer? = null
+    private var inputSurface: Surface? = null
+    private var trackIndex = -1
+    private var frameDurationUs = 1000000L / fps
+    private var frameCount = 0
+
+    fun start() {
+        val format = MediaFormat.createVideoFormat(MediaFormat.MIMETYPE_VIDEO_AVC, width, height).apply {
+            setInteger(MediaFormat.KEY_COLOR_FORMAT, MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface)
+            setInteger(MediaFormat.KEY_BIT_RATE, bitrate)
+            setInteger(MediaFormat.KEY_FRAME_RATE, fps)
+            setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, 1) // One I-frame per second
+        }
+
+        encoder = MediaCodec.createEncoderByType(MediaFormat.MIMETYPE_VIDEO_AVC).apply {
+            configure(format, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE)
+            inputSurface = createInputSurface()
+            start()
+        }
+
+        muxer = MediaMuxer(outputFile.absolutePath, MediaMuxer.OutputFormat.MUXER_OUTPUT_MPEG_4)
+    }
+
+    fun encodeFrame(bitmap: Bitmap) {
+        val canvas = inputSurface?.lockCanvas(null) ?: return
+        try {
+            // Draw bitmap and scale to fit the video frame
+            val destRect = Rect(0, 0, width, height)
+            canvas.drawBitmap(bitmap, null, destRect, null)
+        } finally {
+            // Setting presentation time in microseconds
+            val pts = frameCount * frameDurationUs
+            inputSurface?.unlockCanvasAndPost(canvas)
+            drainEncoder(false, pts)
+            frameCount++
+        }
+    }
+
+    private fun drainEncoder(endOfStream: Boolean, pts: Long) {
+        val bufferInfo = MediaCodec.BufferInfo()
+        val encoder = encoder ?: return
+
+        if (endOfStream) {
+            encoder.signalEndOfInputStream()
+        }
+
+        while (true) {
+            val outputBufferIndex = encoder.dequeueOutputBuffer(bufferInfo, 10000)
+            if (outputBufferIndex == MediaCodec.INFO_TRY_AGAIN_LATER) {
+                if (!endOfStream) break
+            } else if (outputBufferIndex == MediaCodec.INFO_OUTPUT_FORMAT_CHANGED) {
+                trackIndex = muxer?.addTrack(encoder.outputFormat) ?: -1
+                muxer?.start()
+            } else if (outputBufferIndex >= 0) {
+                val encodedData = encoder.getOutputBuffer(outputBufferIndex) ?: continue
+                
+                if (bufferInfo.flags and MediaCodec.BUFFER_FLAG_CODEC_CONFIG != 0) {
+                    bufferInfo.size = 0
+                }
+
+                if (bufferInfo.size != 0 && trackIndex != -1) {
+                    encodedData.position(bufferInfo.offset)
+                    encodedData.limit(bufferInfo.offset + bufferInfo.size)
+                    bufferInfo.presentationTimeUs = pts
+                    muxer?.writeSampleData(trackIndex, encodedData, bufferInfo)
+                }
+
+                encoder.releaseOutputBuffer(outputBufferIndex, false)
+                if (bufferInfo.flags and MediaCodec.BUFFER_FLAG_END_OF_STREAM != 0) break
+            }
+        }
+    }
+
+    fun stop() {
+        drainEncoder(true, frameCount * frameDurationUs)
+        encoder?.stop()
+        encoder?.release()
+        muxer?.stop()
+        muxer?.release()
+        inputSurface?.release()
+    }
+}

package/build/ExpoImageToVideo.types.d.ts

@@ -0,0 +1,33 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type OnLoadEventPayload = {
+    url: string;
+};
+export type ExpoImageToVideoModuleEvents = {
+    onChange: (params: ChangeEventPayload) => void;
+};
+export type ChangeEventPayload = {
+    value: string;
+};
+export type ExpoImageToVideoViewProps = {
+    url: string;
+    onLoad: (event: {
+        nativeEvent: OnLoadEventPayload;
+    }) => void;
+    style?: StyleProp<ViewStyle>;
+};
+export interface VideoOptions {
+    /** Array of local file URIs (e.g., from expo-image-picker or expo-file-system) */
+    images: string[];
+    /** Frames per second (e.g., 30 or 60) */
+    fps: number;
+    /** Final video width (pixels) */
+    width: number;
+    /** Final video height (pixels) */
+    height: number;
+    /** Target bitrate in bits per second. Default is 2.5Mbps (2,500,000) */
+    bitrate?: number;
+    /** Optional custom output path. If not provided, a temp file is created */
+    outputPath?: string;
+}
+export type VideoModuleEvents = {};
+//# sourceMappingURL=ExpoImageToVideo.types.d.ts.map

package/build/ExpoImageToVideo.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideo.types.d.ts","sourceRoot":"","sources":["../src/ExpoImageToVideo.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,kBAAkB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,kFAAkF;IAClF,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,EAE/B,CAAC"}

package/build/ExpoImageToVideo.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ExpoImageToVideo.types.js.map

package/build/ExpoImageToVideo.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideo.types.js","sourceRoot":"","sources":["../src/ExpoImageToVideo.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nexport type OnLoadEventPayload = {\n  url: string;\n};\n\nexport type ExpoImageToVideoModuleEvents = {\n  onChange: (params: ChangeEventPayload) => void;\n};\n\nexport type ChangeEventPayload = {\n  value: string;\n};\n\nexport type ExpoImageToVideoViewProps = {\n  url: string;\n  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;\n  style?: StyleProp<ViewStyle>;\n};\n\nexport interface VideoOptions {\n  /** Array of local file URIs (e.g., from expo-image-picker or expo-file-system) */\n  images: string[];\n  /** Frames per second (e.g., 30 or 60) */\n  fps: number;\n  /** Final video width (pixels) */\n  width: number;\n  /** Final video height (pixels) */\n  height: number;\n  /** Target bitrate in bits per second. Default is 2.5Mbps (2,500,000) */\n  bitrate?: number;\n  /** Optional custom output path. If not provided, a temp file is created */\n  outputPath?: string;\n}\n\nexport type VideoModuleEvents = {\n  // You could add onProgress here later if needed\n};"]}

package/build/ExpoImageToVideoModule.d.ts

@@ -0,0 +1,11 @@
+import { NativeModule } from 'expo';
+import { ExpoImageToVideoModuleEvents, VideoOptions } from './ExpoImageToVideo.types';
+declare class ExpoImageToVideoModule extends NativeModule<ExpoImageToVideoModuleEvents> {
+    PI: number;
+    hello(): string;
+    setValueAsync(value: string): Promise<void>;
+    generateVideo(options: VideoOptions): Promise<string>;
+}
+declare const _default: ExpoImageToVideoModule;
+export default _default;
+//# sourceMappingURL=ExpoImageToVideoModule.d.ts.map

package/build/ExpoImageToVideoModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoModule.d.ts","sourceRoot":"","sources":["../src/ExpoImageToVideoModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,EAAE,4BAA4B,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEtF,OAAO,OAAO,sBAAuB,SAAQ,YAAY,CAAC,4BAA4B,CAAC;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,IAAI,MAAM;IACf,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAC3C,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;CACtD;;AAGD,wBAA+E"}

package/build/ExpoImageToVideoModule.js

@@ -0,0 +1,6 @@
+import { requireNativeModule } from 'expo';
+// This call loads the native module object from the JSI.
+export default requireNativeModule('ExpoImageToVideo');
+// // This links directly to the 'Name("ExpoImageToVideo")' defined in Swift/Kotlin
+// export default requireNativeModule('ExpoImageToVideo');
+//# sourceMappingURL=ExpoImageToVideoModule.js.map

package/build/ExpoImageToVideoModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoModule.js","sourceRoot":"","sources":["../src/ExpoImageToVideoModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAWzD,yDAAyD;AACzD,eAAe,mBAAmB,CAAyB,kBAAkB,CAAC,CAAC;AAE/E,mFAAmF;AACnF,0DAA0D","sourcesContent":["import { NativeModule, requireNativeModule } from 'expo';\n\nimport { ExpoImageToVideoModuleEvents, VideoOptions } from './ExpoImageToVideo.types';\n\ndeclare class ExpoImageToVideoModule extends NativeModule<ExpoImageToVideoModuleEvents> {\n  PI: number;\n  hello(): string;\n  setValueAsync(value: string): Promise<void>;\n  generateVideo(options: VideoOptions): Promise<string>;\n}\n\n// This call loads the native module object from the JSI.\nexport default requireNativeModule<ExpoImageToVideoModule>('ExpoImageToVideo');\n\n// // This links directly to the 'Name(\"ExpoImageToVideo\")' defined in Swift/Kotlin\n// export default requireNativeModule('ExpoImageToVideo');"]}

package/build/ExpoImageToVideoModule.web.d.ts

@@ -0,0 +1,10 @@
+import { NativeModule } from 'expo';
+import { ExpoImageToVideoModuleEvents } from './ExpoImageToVideo.types';
+declare class ExpoImageToVideoModule extends NativeModule<ExpoImageToVideoModuleEvents> {
+    PI: number;
+    setValueAsync(value: string): Promise<void>;
+    hello(): string;
+}
+declare const _default: typeof ExpoImageToVideoModule;
+export default _default;
+//# sourceMappingURL=ExpoImageToVideoModule.web.d.ts.map

package/build/ExpoImageToVideoModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoModule.web.d.ts","sourceRoot":"","sources":["../src/ExpoImageToVideoModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,MAAM,MAAM,CAAC;AAEvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAExE,cAAM,sBAAuB,SAAQ,YAAY,CAAC,4BAA4B,CAAC;IAC7E,EAAE,SAAW;IACP,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAGjD,KAAK;CAGN;;AAED,wBAAmF"}

package/build/ExpoImageToVideoModule.web.js

@@ -0,0 +1,12 @@
+import { registerWebModule, NativeModule } from 'expo';
+class ExpoImageToVideoModule extends NativeModule {
+    PI = Math.PI;
+    async setValueAsync(value) {
+        this.emit('onChange', { value });
+    }
+    hello() {
+        return 'Hello world! 👋';
+    }
+}
+export default registerWebModule(ExpoImageToVideoModule, 'ExpoImageToVideoModule');
+//# sourceMappingURL=ExpoImageToVideoModule.web.js.map

package/build/ExpoImageToVideoModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoModule.web.js","sourceRoot":"","sources":["../src/ExpoImageToVideoModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAIvD,MAAM,sBAAuB,SAAQ,YAA0C;IAC7E,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,aAAa,CAAC,KAAa;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,KAAK;QACH,OAAO,iBAAiB,CAAC;IAC3B,CAAC;CACF;AAED,eAAe,iBAAiB,CAAC,sBAAsB,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { registerWebModule, NativeModule } from 'expo';\n\nimport { ExpoImageToVideoModuleEvents } from './ExpoImageToVideo.types';\n\nclass ExpoImageToVideoModule extends NativeModule<ExpoImageToVideoModuleEvents> {\n  PI = Math.PI;\n  async setValueAsync(value: string): Promise<void> {\n    this.emit('onChange', { value });\n  }\n  hello() {\n    return 'Hello world! 👋';\n  }\n}\n\nexport default registerWebModule(ExpoImageToVideoModule, 'ExpoImageToVideoModule');\n"]}

package/build/ExpoImageToVideoView.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ExpoImageToVideoViewProps } from './ExpoImageToVideo.types';
+export default function ExpoImageToVideoView(props: ExpoImageToVideoViewProps): React.JSX.Element;
+//# sourceMappingURL=ExpoImageToVideoView.d.ts.map

package/build/ExpoImageToVideoView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoView.d.ts","sourceRoot":"","sources":["../src/ExpoImageToVideoView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAE5E"}

package/build/ExpoImageToVideoView.js

@@ -0,0 +1,7 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+const NativeView = requireNativeView('ExpoImageToVideo');
+export default function ExpoImageToVideoView(props) {
+    return <NativeView {...props}/>;
+}
+//# sourceMappingURL=ExpoImageToVideoView.js.map

package/build/ExpoImageToVideoView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoView.js","sourceRoot":"","sources":["../src/ExpoImageToVideoView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,GACd,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,OAAO,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACnC,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport { ExpoImageToVideoViewProps } from './ExpoImageToVideo.types';\n\nconst NativeView: React.ComponentType<ExpoImageToVideoViewProps> =\n  requireNativeView('ExpoImageToVideo');\n\nexport default function ExpoImageToVideoView(props: ExpoImageToVideoViewProps) {\n  return <NativeView {...props} />;\n}\n"]}

package/build/ExpoImageToVideoView.web.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ExpoImageToVideoViewProps } from './ExpoImageToVideo.types';
+export default function ExpoImageToVideoView(props: ExpoImageToVideoViewProps): React.JSX.Element;
+//# sourceMappingURL=ExpoImageToVideoView.web.d.ts.map

package/build/ExpoImageToVideoView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoView.web.d.ts","sourceRoot":"","sources":["../src/ExpoImageToVideoView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAU5E"}

package/build/ExpoImageToVideoView.web.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export default function ExpoImageToVideoView(props) {
+    return (<div>
+      <iframe style={{ flex: 1 }} src={props.url} onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}/>
+    </div>);
+}
+//# sourceMappingURL=ExpoImageToVideoView.web.js.map

package/build/ExpoImageToVideoView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageToVideoView.web.js","sourceRoot":"","sources":["../src/ExpoImageToVideoView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,OAAO,CACL,CAAC,GAAG,CACF;MAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACnB,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CACf,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAEpE;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { ExpoImageToVideoViewProps } from './ExpoImageToVideo.types';\n\nexport default function ExpoImageToVideoView(props: ExpoImageToVideoViewProps) {\n  return (\n    <div>\n      <iframe\n        style={{ flex: 1 }}\n        src={props.url}\n        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}\n      />\n    </div>\n  );\n}\n"]}

package/build/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ExpoImageToVideoView } from './ExpoImageToVideoView';
+import { VideoOptions } from './ExpoImageToVideo.types';
+/**
+ * Converts a list of images to an MP4 video file using native hardware encoders.
+ * @param options Configuration for the video encoding process.
+ * @returns A promise that resolves to the local URI of the generated .mp4 file.
+ */
+export declare function generateVideo(options: VideoOptions): Promise<string>;
+export * from './ExpoImageToVideo.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAIzE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CAO1E;AAED,cAAc,0BAA0B,CAAC"}

package/build/index.js

@@ -0,0 +1,20 @@
+// Reexport the native module. On web, it will be resolved to ExpoImageToVideoModule.web.ts
+// and on native platforms to ExpoImageToVideoModule.ts
+// export { default } from './ExpoImageToVideoModule';
+export { default as ExpoImageToVideoView } from './ExpoImageToVideoView';
+// export * from  './ExpoImageToVideo.types';
+import ExpoImageToVideoModule from './ExpoImageToVideoModule';
+/**
+ * Converts a list of images to an MP4 video file using native hardware encoders.
+ * @param options Configuration for the video encoding process.
+ * @returns A promise that resolves to the local URI of the generated .mp4 file.
+ */
+export async function generateVideo(options) {
+    // Validate basic requirements before hitting native code
+    if (options.images.length === 0) {
+        throw new Error("At least one image is required to generate a video.");
+    }
+    return await ExpoImageToVideoModule.generateVideo(options);
+}
+export * from './ExpoImageToVideo.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,uDAAuD;AACvD,sDAAsD;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,6CAA6C;AAE7C,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAI9D;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAqB;IACvD,yDAAyD;IACzD,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,MAAM,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC7D,CAAC;AAED,cAAc,0BAA0B,CAAC","sourcesContent":["// Reexport the native module. On web, it will be resolved to ExpoImageToVideoModule.web.ts\n// and on native platforms to ExpoImageToVideoModule.ts\n// export { default } from './ExpoImageToVideoModule';\nexport { default as ExpoImageToVideoView } from './ExpoImageToVideoView';\n// export * from  './ExpoImageToVideo.types';\n\nimport ExpoImageToVideoModule from './ExpoImageToVideoModule';\nimport { VideoOptions } from './ExpoImageToVideo.types';\n\n\n/**\n * Converts a list of images to an MP4 video file using native hardware encoders.\n * @param options Configuration for the video encoding process.\n * @returns A promise that resolves to the local URI of the generated .mp4 file.\n */\nexport async function generateVideo(options: VideoOptions): Promise<string> {\n  // Validate basic requirements before hitting native code\n  if (options.images.length === 0) {\n    throw new Error(\"At least one image is required to generate a video.\");\n  }\n  \n  return await ExpoImageToVideoModule.generateVideo(options);\n}\n\nexport * from './ExpoImageToVideo.types';"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["ExpoImageToVideoModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.imagetovideo.ExpoImageToVideoModule"]
+  }
+}

package/ios/ExpoImageToVideo.podspec

@@ -0,0 +1,31 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ExpoImageToVideo'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/tsnguyenducphuong/media-kit' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.frameworks = 'AVFoundation', 'CoreMedia', 'CoreVideo', 'UIKit'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/ExpoImageToVideoModule.swift

@@ -0,0 +1,108 @@
+import ExpoModulesCore
+import AVFoundation
+
+public class ExpoImageToVideoModule: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ExpoImageToVideo')` in JavaScript.
+    Name("ExpoImageToVideo")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Double.pi
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    AsyncFunction("generateVideo") { (options: VideoOptions, promise: Promise) in
+      // Move to background thread to avoid blocking the JS/UI threads
+      DispatchQueue.global(qos: .userInitiated).async {
+        do {
+          let outputURL = options.outputPath != nil 
+            ? URL(fileURLWithPath: options.outputPath!) 
+            : URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent("video_\(UUID().uuidString).mp4")
+
+          // Delete existing file if it exists (AVAssetWriter will fail otherwise)
+          if FileManager.default.fileExists(atPath: outputURL.path) {
+            try FileManager.default.removeItem(at: outputURL)
+          }
+
+          let encoder = try VideoEncoder(
+            outputURL: outputURL,
+            width: options.width,
+            height: options.height,
+            fps: options.fps,
+            bitrate: options.bitrate ?? 2_500_000
+          )
+
+          for (index, imageUri) in options.images.enumerated() {
+            // Use autoreleasepool to prevent memory spikes during high-res processing
+            try autoreleasepool {
+              guard let url = URL(string: imageUri),
+                    let data = try? Data(contentsOf: url),
+                    let image = UIImage(data: data) else {
+                throw NSError(domain: "ExpoImageToVideo", code: 1, userInfo: [NSLocalizedDescriptionKey: "Failed to load image at \(imageUri)"])
+              }
+
+              let frameTime = CMTime(value: Int64(index), timescale: Int32(options.fps))
+              try encoder.addFrame(image: image, at: frameTime)
+            }
+          }
+
+          encoder.finish { success in
+            if success {
+              promise.resolve(outputURL.path)
+            } else {
+              promise.reject("ERR_VIDEO_FINALIZATION", "Could not finalize MP4 file")
+            }
+          }
+        } catch {
+          promise.reject("ERR_VIDEO_ENCODING", error.localizedDescription)
+        }
+      }
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(ExpoImageToVideoView.self) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: ExpoImageToVideoView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
+      }
+
+      Events("onLoad")
+    }
+  }
+}
+
+
+// Structure to map the JS options object
+struct VideoOptions: Record {
+  @Field var images: [String] = []
+  @Field var fps: Int = 30
+  @Field var width: Int = 1280
+  @Field var height: Int = 720
+  @Field var bitrate: Int? = nil
+  @Field var outputPath: String? = nil
+}

package/ios/ExpoImageToVideoView.swift

@@ -0,0 +1,38 @@
+import ExpoModulesCore
+import WebKit
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class ExpoImageToVideoView: ExpoView {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
+}

package/ios/VideoEncoder.swift

@@ -0,0 +1,85 @@
+import AVFoundation
+import UIKit
+
+class VideoEncoder {
+    private let assetWriter: AVAssetWriter
+    private let input: AVAssetWriterInput
+    private let adaptor: AVAssetWriterInputPixelBufferAdaptor
+    private let width: Int
+    private let height: Int
+
+    init(outputURL: URL, width: Int, height: Int, fps: Int, bitrate: Int) throws {
+        self.width = width
+        self.height = height
+        
+        assetWriter = try AVAssetWriter(outputURL: outputURL, fileType: .mp4)
+        
+        let videoSettings: [String: Any] = [
+            AVVideoCodecKey: AVVideoCodecType.h264,
+            AVVideoWidthKey: width,
+            AVVideoHeightKey: height,
+            AVVideoCompressionPropertiesKey: [
+                AVVideoAverageBitRateKey: bitrate,
+                AVVideoExpectedSourceFrameRateKey: fps,
+                AVVideoMaxKeyFrameIntervalKey: fps
+            ]
+        ]
+        
+        input = AVAssetWriterInput(mediaType: .video, outputSettings: videoSettings)
+        input.expectsMediaDataInRealTime = false
+        
+        let bufferAttributes: [String: Any] = [
+            kCVPixelBufferPixelFormatTypeKey as String: kCVPixelFormatType_32ARGB,
+            kCVPixelBufferWidthKey as String: width,
+            kCVPixelBufferHeightKey as String: height
+        ]
+        
+        adaptor = AVAssetWriterInputPixelBufferAdaptor(assetWriterInput: input, sourcePixelBufferAttributes: bufferAttributes)
+        
+        assetWriter.add(input)
+        assetWriter.startWriting()
+        assetWriter.startSession(atSourceTime: .zero)
+    }
+
+    func addFrame(image: UIImage, at time: CMTime) throws {
+        // Wait until the hardware encoder is ready for the next frame
+        while !input.isReadyForMoreMediaData {
+            Thread.sleep(forTimeInterval: 0.01)
+        }
+        
+        guard let pixelBuffer = createPixelBuffer(from: image) else {
+            throw NSError(domain: "VideoEncoder", code: 2, userInfo: [NSLocalizedDescriptionKey: "PixelBuffer creation failed"])
+        }
+        
+        if !adaptor.append(pixelBuffer, withPresentationTime: time) {
+            throw assetWriter.error ?? NSError(domain: "VideoEncoder", code: 3, userInfo: [NSLocalizedDescriptionKey: "Failed to append pixel buffer"])
+        }
+    }
+
+    private func createPixelBuffer(from image: UIImage) -> CVPixelBuffer? {
+        var pixelBuffer: CVPixelBuffer?
+        let status = CVPixelBufferPoolCreatePixelBuffer(kCFAllocatorDefault, adaptor.pixelBufferPool!, &pixelBuffer)
+        
+        guard status == kCVReturnSuccess, let buffer = pixelBuffer else { return nil }
+        
+        CVPixelBufferLockBaseAddress(buffer, [])
+        let data = CVPixelBufferGetBaseAddress(buffer)
+        
+        let rgbColorSpace = CGColorSpaceCreateDeviceRGB()
+        let context = CGContext(data: data, width: width, height: height, bitsPerComponent: 8, bytesPerRow: CVPixelBufferGetBytesPerRow(buffer), space: rgbColorSpace, bitmapInfo: CGImageAlphaInfo.premultipliedFirst.rawValue)
+        
+        if let cgImage = image.cgImage {
+            context?.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
+        }
+        
+        CVPixelBufferUnlockBaseAddress(buffer, [])
+        return buffer
+    }
+
+    func finish(completion: @escaping (Bool) -> Void) {
+        input.markAsFinished()
+        assetWriter.finishWriting {
+            completion(self.assetWriter.status == .completed)
+        }
+    }
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "expo-image-to-video",
+  "version": "0.1.0",
+  "description": "High-performance native image-to-video conversion for Expo",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build",
+    "ios",
+    "android",
+    "expo-module.config.json",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-image-to-video",
+    "ExpoImageToVideo"
+  ],
+  "repository": "https://github.com/tsnguyenducphuong/media-kit",
+  "bugs": {
+    "url": "https://github.com/tsnguyenducphuong/media-kit/issues"
+  },
+  "author": "Phuong Nguyen <ts.nguyenducphuong@gmail.com> (https://github.com/tsnguyenducphuong)",
+  "license": "MIT",
+  "homepage": "https://github.com/tsnguyenducphuong/media-kit#readme",
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "expo": "^54.0.27",
+    "expo-module-scripts": "^5.0.8",
+    "react-native": "0.81.5"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}