rn-media-optimizer

A dependency-agnostic media optimization core for React Native.

rn-media-optimizer provides a clean, future-proof API for image and video optimization, while allowing the host app to choose and inject the actual native implementations.

This architecture is designed for 2025+ React Native, avoiding deprecated native libraries and supporting both Expo and Bare React Native projects.

✨ Why This Library Exists

Most media libraries tightly couple you to:

• FFmpeg binaries
• Heavy native dependencies
• Non-Expo-compatible setups

This library takes a different approach:

It defines what needs to happen, not how it happens.

You inject the implementations — the library orchestrates the logic.

✨ Features

Image Optimization

• Image compression
• Optional resizing
• Configurable quality
• Cached output paths

Video Optimization

• Video compression
• Thumbnail generation
• Quality presets
• Optional progress callbacks

Architecture

• Dependency injection (adapter-based)
• No bundled native dependencies
• Expo & Bare RN compatible
• Easy to test and mock
• Long-term maintainable

📦 Installation

npm install rn-media-optimizer
# or
yarn add rn-media-optimizer

🔌 Required Setup (Important)

This library does not ship native media dependencies.

Your app must provide:

1. Image processing
2. Video processing
3. File system access

Recommended 2025 Stack

| Purpose | Library | |------|-------| | Image & video compression | react-native-compressor | | File system (Bare RN) | react-native-fs | | File system (Expo) | expo-file-system |

🚀 How It Works

1. Install your preferred media & filesystem libraries
2. Configure rn-media-optimizer once at app startup
3. Call optimizeImage and optimizeVideo anywhere

🔧 Configuration (Required)

You must configure the library once before using it.

✅ Bare React Native Example

Install dependencies

npm install react-native-compressor react-native-fs
cd ios && pod install

Configure the optimizer

import RNFS from 'react-native-fs';
import { Image, Video } from 'react-native-compressor';
import { configureMediaOptimizer } from 'rn-media-optimizer';

configureMediaOptimizer({
  fs: {
    cachesDir: RNFS.CachesDirectoryPath,
    copyFile: RNFS.copyFile,
  },

  image: {
    compress: (uri, options) =>
      Image.compress(uri, {
        compressionMethod: 'manual',
        maxWidth: options?.maxWidth,
        maxHeight: options?.maxHeight,
        quality: options?.quality,
      }),
  },

  video: {
    compress: (uri, options, onProgress) =>
      Video.compress(
        uri,
        { compressionMethod: 'auto' },
        onProgress
      ),

    getThumbnail: (uri, atTimeSeconds) =>
      Video.getThumbnail(uri, { time: atTimeSeconds }),
  },
});

⚠️ Call this once (e.g. in App.tsx or app bootstrap).

✅ Expo Example

Install dependencies

expo install expo-file-system
npm install react-native-compressor

Configure the optimizer

import * as FileSystem from 'expo-file-system';
import { Image, Video } from 'react-native-compressor';
import { configureMediaOptimizer } from 'rn-media-optimizer';

configureMediaOptimizer({
  fs: {
    cachesDir: FileSystem.cacheDirectory!,
    copyFile: FileSystem.copyAsync,
  },

  image: {
    compress: (uri, options) =>
      Image.compress(uri, {
        maxWidth: options?.maxWidth,
        maxHeight: options?.maxHeight,
        quality: options?.quality,
      }),
  },

  video: {
    compress: (uri, _, onProgress) =>
      Video.compress(uri, {}, onProgress),

    getThumbnail: (uri, atTimeSeconds) =>
      Video.getThumbnail(uri, { time: atTimeSeconds }),
  },
});

🖼 Image Optimization

Example

import { optimizeImage } from 'rn-media-optimizer';

const optimizedPath = await optimizeImage({
  uri: imageUri,
  width: 1080,
  height: 1080,
  quality: 0.8,
});

🎥 Video Optimization

Example

import { optimizeVideo } from 'rn-media-optimizer';

const result = await optimizeVideo({
  uri: videoUri,
  quality: 'medium',
  thumbnailAt: 1.5,
});

📄 License

MIT License

👤 Author

Ayobami Babalola Software Engineer