react-native-media-view 0.2.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Darkce
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# react-native-media-view
+
+A high-performance React Native component for displaying images (including AVIF) and videos using native platform APIs. Renders images via `UIImageView` and videos via `AVKit` — no WebView overhead. Supports iOS only with the new architecture (Fabric).
+
+## Features
+
+- **Native image rendering** — Uses `UIImageView` with `UIImage` for fast, memory-efficient display
+- **AVIF support** — iOS 16+ decodes AVIF natively, including animated AVIF
+- **Native video playback** — Uses `AVQueuePlayer` + `AVPlayerLayer` with seamless looping
+- **Resize modes** — `contain`, `cover`, `stretch`, `center` (maps to `contentMode` / `videoGravity`)
+- **Lifecycle events** — `onLoadStart`, `onLoad`, `onLoadEnd`, `onError`
+- **No WebView, no third-party dependencies**
+
+## Installation
+
+```sh
+npm install react-native-media-view
+```
+
+For iOS, install pods:
+
+```sh
+cd ios && pod install
+```
+
+## Metro Configuration
+
+Add `avif` to your Metro asset extensions in `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('@react-native/metro-config');
+
+const config = getDefaultConfig(__dirname);
+config.resolver.assetExts.push('avif');
+
+module.exports = config;
+```
+
+## Usage
+
+```tsx
+import { MediaView } from 'react-native-media-view';
+
+// Local AVIF image
+<MediaView
+  source={require('./assets/image.avif')}
+  resizeMode="contain"
+  style={{ width: 300, height: 300 }}
+  onLoad={() => console.log('Loaded')}
+  onError={(e) => console.error(e.nativeEvent.error)}
+/>
+
+// Remote image
+<MediaView
+  source={{ uri: 'https://example.com/photo.avif' }}
+  resizeMode="cover"
+  style={{ width: '100%', aspectRatio: 16 / 9 }}
+/>
+
+// Video (auto-detected by file extension, loops + muted)
+<MediaView
+  source={{ uri: 'https://example.com/clip.mp4' }}
+  resizeMode="cover"
+  style={{ width: '100%', height: 200 }}
+/>
+```
+
+## Props
+
+| Prop         | Type                                            | Default      | Description                                |
+| ------------ | ----------------------------------------------- | ------------ | ------------------------------------------ |
+| `source`     | `ImageRequireSource \| { uri: string }`         | **required** | Image or video source (`require()` or URI) |
+| `resizeMode` | `'contain' \| 'cover' \| 'stretch' \| 'center'` | `'contain'`  | How media fits the view                    |
+| `style`      | `ViewStyle`                                     | —            | Standard React Native view style           |
+
+## Events
+
+| Event         | Payload     | Description                           |
+| ------------- | ----------- | ------------------------------------- |
+| `onLoadStart` | —           | Loading has begun                     |
+| `onLoad`      | —           | Media is ready for display / playback |
+| `onLoadEnd`   | —           | Loading finished (success or failure) |
+| `onError`     | `{ error }` | An error occurred                     |
+
+## How It Works
+
+| Media type | Rendered with                     |
+| ---------- | --------------------------------- |
+| Image      | `UIImageView` (`UIImage(data:)`)  |
+| Video      | `AVQueuePlayer` + `AVPlayerLayer` |
+
+- **Images** are loaded asynchronously (file or network) and decoded via `UIImage`, which supports AVIF on iOS 16+.
+- **Videos** are detected by file extension (`.mp4`, `.mov`, `.webm`, etc.) and played with `AVQueuePlayer` + `AVPlayerLooper` for seamless looping. Playback is muted by default.
+
+## Requirements
+
+- iOS 16.0+
+- React Native 0.74+ (New Architecture / Fabric)
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,67 @@
+buildscript {
+  ext.MediaView = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return MediaView[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.mediaview"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/mediaview/MediaView.kt

@@ -0,0 +1,15 @@
+package com.mediaview
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+
+class MediaView : View {
+  constructor(context: Context?) : super(context)
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
+  constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
+    context,
+    attrs,
+    defStyleAttr
+  )
+}

package/android/src/main/java/com/mediaview/MediaViewManager.kt

@@ -0,0 +1,41 @@
+package com.mediaview
+
+import android.graphics.Color
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.MediaViewManagerInterface
+import com.facebook.react.viewmanagers.MediaViewManagerDelegate
+
+@ReactModule(name = MediaViewManager.NAME)
+class MediaViewManager : SimpleViewManager<MediaView>(),
+  MediaViewManagerInterface<MediaView> {
+  private val mDelegate: ViewManagerDelegate<MediaView>
+
+  init {
+    mDelegate = MediaViewManagerDelegate(this)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<MediaView>? {
+    return mDelegate
+  }
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  public override fun createViewInstance(context: ThemedReactContext): MediaView {
+    return MediaView(context)
+  }
+
+  @ReactProp(name = "color")
+  override fun setColor(view: MediaView?, color: Int?) {
+    view?.setBackgroundColor(color ?: Color.TRANSPARENT)
+  }
+
+  companion object {
+    const val NAME = "MediaView"
+  }
+}

package/android/src/main/java/com/mediaview/MediaViewPackage.kt

@@ -0,0 +1,17 @@
+package com.mediaview
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class MediaViewPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(MediaViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider = ReactModuleInfoProvider { emptyMap() }
+}

package/ios/MediaImageView.swift

@@ -0,0 +1,293 @@
+//
+//  MediaImageView.swift
+//  react-native-media-view
+//
+//  Native media view using UIImageView (for images) and AVKit (for video)
+//
+
+import AVFoundation
+import AVKit
+import Foundation
+import UIKit
+
+/// Delegate protocol for handling media view events
+@objc public protocol MediaImageViewDelegate: AnyObject {
+  func handleOnLoadStart()
+  func handleOnLoad()
+  func handleOnLoadEnd()
+  func handleOnError(error: String)
+}
+
+/// Native UIView subclass for displaying images and video content
+@objcMembers
+public class MediaImageViewCore: UIView {
+  public weak var delegate: MediaImageViewDelegate?
+  private var currentURI: String?
+  private var currentResizeMode: String = "contain"
+
+  // MARK: - Image display
+
+  private lazy var imageView: UIImageView = {
+    let iv = UIImageView()
+    iv.clipsToBounds = true
+    iv.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    iv.backgroundColor = .clear
+    return iv
+  }()
+
+  // MARK: - Video display
+
+  private var queuePlayer: AVQueuePlayer?
+  private var playerLayer: AVPlayerLayer?
+  private var playerLooper: AVPlayerLooper?
+  private var playerItem: AVPlayerItem?
+  private var statusObservation: NSKeyValueObservation?
+  private var loadingTask: URLSessionDataTask?
+
+  // MARK: - Init
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupView()
+  }
+
+  public required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupView()
+  }
+
+  private func setupView() {
+    clipsToBounds = true
+    backgroundColor = .clear
+    isUserInteractionEnabled = false
+    imageView.frame = bounds
+    addSubview(imageView)
+  }
+
+  // MARK: - Layout
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    imageView.frame = bounds
+    playerLayer?.frame = bounds
+  }
+
+  // MARK: - Video detection
+
+  private static let videoExtensions: Set<String> = [
+    "mp4", "webm", "mov", "m4v", "avi", "mkv", "ogg", "ogv",
+  ]
+
+  private func isVideoURL(_ urlString: String) -> Bool {
+    guard let url = URL(string: urlString) else { return false }
+    let ext = url.pathExtension.lowercased()
+    return Self.videoExtensions.contains(ext)
+  }
+
+  // MARK: - Public API
+
+  public func setSource(_ source: NSDictionary) {
+    guard let uri = source["uri"] as? String, !uri.isEmpty else {
+      return
+    }
+
+    // Avoid reloading the same URI
+    if uri == currentURI { return }
+
+    delegate?.handleOnLoadStart()
+    currentURI = uri
+
+    // Clean up previous content
+    cleanupVideo()
+    cancelImageLoading()
+    imageView.image = nil
+
+    if isVideoURL(uri) {
+      loadVideo(uri: uri)
+    } else {
+      loadImage(uri: uri)
+    }
+  }
+
+  public func setResizeMode(_ resizeMode: String?) {
+    guard let resizeMode, resizeMode != currentResizeMode else { return }
+    currentResizeMode = resizeMode
+    applyResizeMode()
+  }
+
+  // MARK: - Image Loading
+
+  private func loadImage(uri: String) {
+    imageView.isHidden = false
+
+    guard let url = URL(string: uri) else {
+      delegate?.handleOnError(error: "Invalid image URI")
+      delegate?.handleOnLoadEnd()
+      return
+    }
+
+    if url.isFileURL {
+      loadImageFromFile(url: url)
+    } else {
+      loadImageFromNetwork(url: url)
+    }
+  }
+
+  private func loadImageFromFile(url: URL) {
+    DispatchQueue.global(qos: .userInitiated).async { [weak self] in
+      guard let self else { return }
+      do {
+        let data = try Data(contentsOf: url)
+        guard let image = UIImage(data: data) else {
+          DispatchQueue.main.async {
+            self.delegate?.handleOnError(error: "Failed to decode image")
+            self.delegate?.handleOnLoadEnd()
+          }
+          return
+        }
+        DispatchQueue.main.async {
+          guard self.currentURI == url.absoluteString else { return }
+          self.imageView.image = image
+          self.applyResizeMode()
+          self.delegate?.handleOnLoad()
+          self.delegate?.handleOnLoadEnd()
+        }
+      } catch {
+        DispatchQueue.main.async {
+          self.delegate?.handleOnError(error: error.localizedDescription)
+          self.delegate?.handleOnLoadEnd()
+        }
+      }
+    }
+  }
+
+  private func loadImageFromNetwork(url: URL) {
+    let task = URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
+      guard let self else { return }
+      DispatchQueue.main.async {
+        guard self.currentURI == url.absoluteString else { return }
+
+        if let error {
+          self.delegate?.handleOnError(error: error.localizedDescription)
+          self.delegate?.handleOnLoadEnd()
+          return
+        }
+
+        guard let data, let image = UIImage(data: data) else {
+          self.delegate?.handleOnError(error: "Failed to decode image from network")
+          self.delegate?.handleOnLoadEnd()
+          return
+        }
+
+        self.imageView.image = image
+        self.applyResizeMode()
+        self.delegate?.handleOnLoad()
+        self.delegate?.handleOnLoadEnd()
+      }
+    }
+    loadingTask = task
+    task.resume()
+  }
+
+  private func cancelImageLoading() {
+    loadingTask?.cancel()
+    loadingTask = nil
+  }
+
+  // MARK: - Video Loading
+
+  private func loadVideo(uri: String) {
+    imageView.isHidden = true
+
+    guard let url = URL(string: uri) else {
+      delegate?.handleOnError(error: "Invalid video URI")
+      delegate?.handleOnLoadEnd()
+      return
+    }
+
+    let item = AVPlayerItem(url: url)
+    playerItem = item
+
+    let player = AVQueuePlayer()
+    queuePlayer = player
+    player.isMuted = true
+
+    // Loop playback indefinitely — looper manages item insertion
+    playerLooper = AVPlayerLooper(player: player, templateItem: item)
+
+    let pLayer = AVPlayerLayer(player: player)
+    pLayer.frame = bounds
+    playerLayer = pLayer
+    layer.addSublayer(pLayer)
+    applyVideoGravity()
+
+    // Observe the player's currentItem status for readiness
+    statusObservation = player.observe(\.currentItem?.status, options: [.new]) {
+      [weak self] observedPlayer, _ in
+      DispatchQueue.main.async {
+        guard let self else { return }
+        guard let currentItem = observedPlayer.currentItem else { return }
+        switch currentItem.status {
+        case .readyToPlay:
+          self.delegate?.handleOnLoad()
+          self.delegate?.handleOnLoadEnd()
+          observedPlayer.play()
+        case .failed:
+          let msg = currentItem.error?.localizedDescription ?? "Unknown video error"
+          self.delegate?.handleOnError(error: msg)
+          self.delegate?.handleOnLoadEnd()
+        default:
+          break
+        }
+      }
+    }
+  }
+
+  private func cleanupVideo() {
+    statusObservation?.invalidate()
+    statusObservation = nil
+    queuePlayer?.pause()
+    queuePlayer = nil
+    playerLooper = nil
+    playerItem = nil
+    playerLayer?.removeFromSuperlayer()
+    playerLayer = nil
+  }
+
+  // MARK: - Resize Mode
+
+  private func applyResizeMode() {
+    switch currentResizeMode {
+    case "cover":
+      imageView.contentMode = .scaleAspectFill
+    case "contain":
+      imageView.contentMode = .scaleAspectFit
+    case "stretch":
+      imageView.contentMode = .scaleToFill
+    case "center":
+      imageView.contentMode = .center
+    default:
+      imageView.contentMode = .scaleAspectFit
+    }
+    applyVideoGravity()
+  }
+
+  private func applyVideoGravity() {
+    guard let playerLayer else { return }
+    switch currentResizeMode {
+    case "cover":
+      playerLayer.videoGravity = .resizeAspectFill
+    case "stretch":
+      playerLayer.videoGravity = .resize
+    default:
+      playerLayer.videoGravity = .resizeAspect
+    }
+  }
+
+  // MARK: - Cleanup
+
+  deinit {
+    cleanupVideo()
+    cancelImageLoading()
+  }
+}

package/ios/MediaView.h

@@ -0,0 +1,15 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef MediaViewNativeComponent_h
+#define MediaViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MediaView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* MediaViewNativeComponent_h */

package/ios/MediaView.mm

@@ -0,0 +1,105 @@
+//
+//  MediaView.mm
+//  react-native-media-view
+//
+//  React Native Fabric component binding for media view
+//
+
+#import "MediaView.h"
+#if __has_include(<react_native_media_view/react_native_media_view-Swift.h>)
+#import <react_native_media_view/react_native_media_view-Swift.h>
+#else
+#import "react_native_media_view-Swift.h"
+#endif
+#import <React/RCTConversions.h>
+
+#import <react/renderer/components/MediaViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/MediaViewSpec/EventEmitters.h>
+#import <react/renderer/components/MediaViewSpec/Props.h>
+#import <react/renderer/components/MediaViewSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@interface MediaView () <MediaImageViewDelegate, RCTMediaViewViewProtocol>
+@end
+
+@implementation MediaView {
+  MediaImageViewCore *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<MediaViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const MediaViewProps>();
+    _props = defaultProps;
+
+    _view = [[MediaImageViewCore alloc] init];
+    _view.delegate = self;
+
+    self.contentView = _view;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<MediaViewProps const>(_props);
+  const auto &newViewProps =
+      *std::static_pointer_cast<MediaViewProps const>(props);
+
+  // Update source
+  if (oldViewProps.source.uri != newViewProps.source.uri) {
+    NSDictionary *sourceDict =
+        @{@"uri" : RCTNSStringFromString(newViewProps.source.uri)};
+    [_view setSource:sourceDict];
+  }
+
+  // Update resizeMode (aligned with React Native Image)
+  if (oldViewProps.resizeMode != newViewProps.resizeMode) {
+    [_view setResizeMode:RCTNSStringFromString(newViewProps.resizeMode)];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+#pragma mark - MediaImageViewDelegate
+
+- (void)handleOnLoadStart {
+  if (_eventEmitter != nil) {
+    std::dynamic_pointer_cast<const MediaViewEventEmitter>(_eventEmitter)
+        ->onLoadStart(MediaViewEventEmitter::OnLoadStart{});
+  }
+}
+
+- (void)handleOnLoad {
+  if (_eventEmitter != nil) {
+    std::dynamic_pointer_cast<const MediaViewEventEmitter>(_eventEmitter)
+        ->onLoad(MediaViewEventEmitter::OnLoad{});
+  }
+}
+
+- (void)handleOnLoadEnd {
+  if (_eventEmitter != nil) {
+    std::dynamic_pointer_cast<const MediaViewEventEmitter>(_eventEmitter)
+        ->onLoadEnd(MediaViewEventEmitter::OnLoadEnd{});
+  }
+}
+
+- (void)handleOnErrorWithError:(NSString *)error {
+  if (_eventEmitter != nil) {
+    std::dynamic_pointer_cast<const MediaViewEventEmitter>(_eventEmitter)
+        ->onError(MediaViewEventEmitter::OnError{
+            .error = std::string([error UTF8String])});
+  }
+}
+
+@end
+
+Class<RCTComponentViewProtocol> MediaViewCls(void) { return MediaView.class; }

package/lib/module/MediaViewNativeComponent.ts

@@ -0,0 +1,41 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+
+/**
+ * Source props for media (resolved from require())
+ */
+export interface MediaSourceProps {
+  /** URI of the image or video */
+  uri?: string;
+}
+
+/**
+ * Resize mode for image display (aligned with React Native Image)
+ */
+export type ResizeMode = 'cover' | 'contain' | 'stretch' | 'center';
+
+/**
+ * Native props for MediaView component
+ */
+interface NativeProps extends ViewProps {
+  /** Source of the media */
+  source?: MediaSourceProps;
+  /** Resize mode for image display (aligned with React Native Image) */
+  resizeMode?: string;
+  /** Callback when loading starts */
+  onLoadStart?: DirectEventHandler<null>;
+  /** Callback when the image is loaded */
+  onLoad?: DirectEventHandler<null>;
+  /** Callback when loading ends (success or failure) */
+  onLoadEnd?: DirectEventHandler<null>;
+  /** Callback when an error occurs */
+  onError?: DirectEventHandler<Readonly<{ error: string }>>;
+}
+
+export type MediaViewComponent = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'MediaView'
+) as MediaViewComponent;

package/lib/module/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { Image } from 'react-native';
+import MediaViewNativeComponent from './MediaViewNativeComponent';
+
+/** @deprecated Use ResizeMode instead */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MediaView - A React Native component for displaying images and videos
+ * Supports AVIF, PNG, JPEG, GIF, WebP images, and video files (mp4, webm, mov, etc.)
+ * Video URIs are automatically detected by file extension and rendered with autoplay, loop, muted, playsinline.
+ */
+export function MediaView(props) {
+  const {
+    source,
+    resizeMode = 'contain',
+    ...restProps
+  } = props;
+  let resolvedSource;
+  if (typeof source === 'object' && 'uri' in source) {
+    resolvedSource = {
+      uri: source.uri
+    };
+  } else {
+    const resolved = Image.resolveAssetSource(source);
+    resolvedSource = {
+      uri: resolved?.uri || ''
+    };
+  }
+  return /*#__PURE__*/_jsx(MediaViewNativeComponent, {
+    ...restProps,
+    source: resolvedSource,
+    resizeMode: resizeMode
+  });
+}
+export default MediaView;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","MediaViewNativeComponent","jsx","_jsx","MediaView","props","source","resizeMode","restProps","resolvedSource","uri","resolved","resolveAssetSource"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AACA,SAAkCA,KAAK,QAAQ,cAAc;AAC7D,OAAOC,wBAAwB,MAIxB,4BAA4B;;AAInC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE;EAC/C,MAAM;IAAEC,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EAE9D,IAAII,cAAgC;EAEpC,IAAI,OAAOH,MAAM,KAAK,QAAQ,IAAI,KAAK,IAAIA,MAAM,EAAE;IACjDG,cAAc,GAAG;MAAEC,GAAG,EAAEJ,MAAM,CAACI;IAAI,CAAC;EACtC,CAAC,MAAM;IACL,MAAMC,QAAQ,GAAGX,KAAK,CAACY,kBAAkB,CAACN,MAA4B,CAAC;IACvEG,cAAc,GAAG;MAAEC,GAAG,EAAEC,QAAQ,EAAED,GAAG,IAAI;IAAG,CAAC;EAC/C;EAEA,oBACEP,IAAA,CAACF,wBAAwB;IAAA,GACnBO,SAAS;IACbF,MAAM,EAAEG,cAAe;IACvBF,UAAU,EAAEA;EAAW,CACxB,CAAC;AAEN;AAEA,eAAeH,SAAS","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/react-native.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=react-native.d.js.map

package/lib/module/react-native.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["react-native.d.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/MediaViewNativeComponent.d.ts

@@ -0,0 +1,37 @@
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+/**
+ * Source props for media (resolved from require())
+ */
+export interface MediaSourceProps {
+    /** URI of the image or video */
+    uri?: string;
+}
+/**
+ * Resize mode for image display (aligned with React Native Image)
+ */
+export type ResizeMode = 'cover' | 'contain' | 'stretch' | 'center';
+/**
+ * Native props for MediaView component
+ */
+interface NativeProps extends ViewProps {
+    /** Source of the media */
+    source?: MediaSourceProps;
+    /** Resize mode for image display (aligned with React Native Image) */
+    resizeMode?: string;
+    /** Callback when loading starts */
+    onLoadStart?: DirectEventHandler<null>;
+    /** Callback when the image is loaded */
+    onLoad?: DirectEventHandler<null>;
+    /** Callback when loading ends (success or failure) */
+    onLoadEnd?: DirectEventHandler<null>;
+    /** Callback when an error occurs */
+    onError?: DirectEventHandler<Readonly<{
+        error: string;
+    }>>;
+}
+export type MediaViewComponent = HostComponent<NativeProps>;
+declare const _default: MediaViewComponent;
+export default _default;
+//# sourceMappingURL=MediaViewNativeComponent.d.ts.map

package/lib/typescript/src/MediaViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/MediaViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpE;;GAEG;AACH,UAAU,WAAY,SAAQ,SAAS;IACrC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACvC,wCAAwC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAClC,sDAAsD;IACtD,SAAS,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACrC,oCAAoC;IACpC,OAAO,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CAC3D;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;wBAIvD,kBAAkB;AAFvB,wBAEwB"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import { type ImageRequireSource } from 'react-native';
+import MediaViewNativeComponent, { type MediaViewComponent, type MediaSourceProps, type ResizeMode } from './MediaViewNativeComponent';
+export type { MediaSourceProps, ResizeMode, MediaViewComponent };
+/** @deprecated Use ResizeMode instead */
+export type ContentMode = ResizeMode;
+type NativeProps = ComponentProps<typeof MediaViewNativeComponent>;
+export interface MediaViewProps extends Omit<NativeProps, 'source'> {
+    /** Source of the media - use require('./path/to/file') or { uri: 'https://...' } */
+    source: ImageRequireSource | {
+        uri: string;
+    };
+    /** Resize mode for display (aligned with React Native Image) */
+    resizeMode?: ResizeMode;
+}
+/**
+ * MediaView - A React Native component for displaying images and videos
+ * Supports AVIF, PNG, JPEG, GIF, WebP images, and video files (mp4, webm, mov, etc.)
+ * Video URIs are automatically detected by file extension and rendered with autoplay, loop, muted, playsinline.
+ */
+export declare function MediaView(props: MediaViewProps): import("react/jsx-runtime").JSX.Element;
+export default MediaView;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,KAAK,kBAAkB,EAAS,MAAM,cAAc,CAAC;AAC9D,OAAO,wBAAwB,EAAE,EAC/B,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;AAEjE,yCAAyC;AACzC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEnE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACjE,oFAAoF;IACpF,MAAM,EAAE,kBAAkB,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,gEAAgE;IAChE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAmB9C;AAED,eAAe,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "react-native-media-view",
+  "version": "0.2.0",
+  "description": "A React Native component for displaying video and images. Supports iOS only with the new architecture (Fabric).",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-media-view-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luoxuhai/react-native-media-view.git"
+  },
+  "author": "Darkce <darkce97@gmail.com> (https://github.com/luoxuhai)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/luoxuhai/react-native-media-view/issues"
+  },
+  "homepage": "https://github.com/luoxuhai/react-native-media-view#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "MediaViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.mediaview"
+    },
+    "ios": {
+      "components": {
+        "MediaView": {
+          "className": "MediaView"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.0"
+  }
+}

package/react-native-media-view.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-media-view"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/luoxuhai/react-native-media-view.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/src/MediaViewNativeComponent.ts

@@ -0,0 +1,41 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+import type { HostComponent } from 'react-native';
+
+/**
+ * Source props for media (resolved from require())
+ */
+export interface MediaSourceProps {
+  /** URI of the image or video */
+  uri?: string;
+}
+
+/**
+ * Resize mode for image display (aligned with React Native Image)
+ */
+export type ResizeMode = 'cover' | 'contain' | 'stretch' | 'center';
+
+/**
+ * Native props for MediaView component
+ */
+interface NativeProps extends ViewProps {
+  /** Source of the media */
+  source?: MediaSourceProps;
+  /** Resize mode for image display (aligned with React Native Image) */
+  resizeMode?: string;
+  /** Callback when loading starts */
+  onLoadStart?: DirectEventHandler<null>;
+  /** Callback when the image is loaded */
+  onLoad?: DirectEventHandler<null>;
+  /** Callback when loading ends (success or failure) */
+  onLoadEnd?: DirectEventHandler<null>;
+  /** Callback when an error occurs */
+  onError?: DirectEventHandler<Readonly<{ error: string }>>;
+}
+
+export type MediaViewComponent = HostComponent<NativeProps>;
+
+export default codegenNativeComponent<NativeProps>(
+  'MediaView'
+) as MediaViewComponent;

package/src/index.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps } from 'react';
+import { type ImageRequireSource, Image } from 'react-native';
+import MediaViewNativeComponent, {
+  type MediaViewComponent,
+  type MediaSourceProps,
+  type ResizeMode,
+} from './MediaViewNativeComponent';
+
+export type { MediaSourceProps, ResizeMode, MediaViewComponent };
+
+/** @deprecated Use ResizeMode instead */
+export type ContentMode = ResizeMode;
+
+type NativeProps = ComponentProps<typeof MediaViewNativeComponent>;
+
+export interface MediaViewProps extends Omit<NativeProps, 'source'> {
+  /** Source of the media - use require('./path/to/file') or { uri: 'https://...' } */
+  source: ImageRequireSource | { uri: string };
+  /** Resize mode for display (aligned with React Native Image) */
+  resizeMode?: ResizeMode;
+}
+
+/**
+ * MediaView - A React Native component for displaying images and videos
+ * Supports AVIF, PNG, JPEG, GIF, WebP images, and video files (mp4, webm, mov, etc.)
+ * Video URIs are automatically detected by file extension and rendered with autoplay, loop, muted, playsinline.
+ */
+export function MediaView(props: MediaViewProps) {
+  const { source, resizeMode = 'contain', ...restProps } = props;
+
+  let resolvedSource: MediaSourceProps;
+
+  if (typeof source === 'object' && 'uri' in source) {
+    resolvedSource = { uri: source.uri };
+  } else {
+    const resolved = Image.resolveAssetSource(source as ImageRequireSource);
+    resolvedSource = { uri: resolved?.uri || '' };
+  }
+
+  return (
+    <MediaViewNativeComponent
+      {...restProps}
+      source={resolvedSource}
+      resizeMode={resizeMode}
+    />
+  );
+}
+
+export default MediaView;

package/src/react-native.d.ts

@@ -0,0 +1,31 @@
+// Type declarations for React Native internal modules
+// These are required for React Native Fabric component codegen
+
+declare module 'react-native/Libraries/Types/CodegenTypes' {
+  export type Double = number;
+  export type Float = number;
+  export type Int32 = number;
+  export type UnsafeObject = object;
+  export type WithDefault<T, _V> = T | _V | undefined;
+  export type DirectEventHandler<T> = (event: { nativeEvent: T }) => void;
+  export type BubblingEventHandler<T> = (event: { nativeEvent: T }) => void;
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
+  import type { HostComponent } from 'react-native';
+
+  export default function codegenNativeComponent<P>(
+    componentName: string,
+    options?: {
+      interfaceOnly?: boolean;
+      paperComponentName?: string;
+      excludedPlatforms?: string[];
+    }
+  ): HostComponent<P>;
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeCommands' {
+  export default function codegenNativeCommands<T>(options: {
+    supportedCommands: ReadonlyArray<keyof T>;
+  }): T;
+}