🎥 react-native-video-cache-turbo

🚀 Turbo-powered Video Caching for React Native Seamless online video playback with offline caching using React Native’s modern Turbo Modules.

✨ Features

• ⚡ Turbo Modules Support → Modern RN architecture for performance
• 📱 Cross-Platform → Works on iOS & Android
• 🔒 Automatic Caching → Transparent offline playback
• 🎯 Simple API → Just convert(url) and you’re ready
• ⚙️ Zero Configuration → Works out of the box
• 🔄 Async + Sync Support → Use whichever suits your flow

📦 Installation

npm install react-native-video-cache-turbo
# or
yarn add react-native-video-cache-turbo

iOS Setup

cd ios && pod install && cd ..

✅ Android setup is automatic — nothing extra required.

🚀 Quick Start

import { convert, convertAsync } from 'react-native-video-cache-turbo';
import Video from 'react-native-video';

const videoUrl = 'https://example.com/video.mp4';

export default function VideoPlayer() {
  return (
    <Video source={{ uri: convert(videoUrl) }} controls style={{ flex: 1 }} />
  );
}

Async Usage:

const cachedUrl = await convertAsync(videoUrl);
console.log('Cached URL:', cachedUrl);

📖 API Reference

🔹 convert(url: string): string

Synchronously converts a video URL to a cached/proxy URL.

const cachedUrl = convert('https://example.com/video.mp4');
// → 'http://localhost:port/proxy/video.mp4'

🔹 convertAsync(url: string): Promise<string>

Asynchronously converts a video URL.

const cachedUrl = await convertAsync('https://example.com/video.mp4');

🎯 Usage with react-native-video

import { convert } from 'react-native-video-cache-turbo';
import Video from 'react-native-video';

export default function App() {
  const videoUrl =
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

  return (
    <Video
      source={{ uri: convert(videoUrl) }}
      controls
      resizeMode="contain"
      style={{ width: '100%', height: 300 }}
    />
  );
}

🔧 Advanced Usage

Custom Player Integration

import { convertAsync } from 'react-native-video-cache-turbo';

class CustomVideoPlayer {
  async loadVideo(url: string) {
    try {
      const cachedUrl = await convertAsync(url);
      this.player.src = cachedUrl;
    } catch {
      this.player.src = url; // fallback
    }
    this.player.play();
  }
}

Error Handling

try {
  const cachedUrl = convert(videoUrl);
} catch (e) {
  console.warn('Caching failed. Falling back to original URL.');
}

🏗️ Architecture

This library is built on React Native Turbo Modules 💨

• 🚀 Performance → Direct native calls, no bridge overhead
• 🔒 Type Safety → Full TypeScript support
• 🔗 Automatic Linking → No manual native setup

Under the Hood

• iOS → KTVHTTPCache
• Android → AndroidVideoCache

📊 Why Use This?

✔ Faster first playback ✔ Reduced bandwidth consumption ✔ Offline playback after first load ✔ Smooth seek support

🐛 Troubleshooting

• ❌ Video not playing? → Ensure internet is available on first play
• ❌ iOS build error? → Run pod install
• ❌ Caching not working? → Validate your video URL

Debugging Example:

const cachedUrl = convert('https://example.com/video.mp4');
console.log({ cachedUrl });

🤝 Contributing

We welcome PRs!

1. Fork this repo
2. git checkout -b feature/my-feature
3. Make changes & test on iOS/Android
4. Submit PR 🎉

📖 See Contributing Guidelines & Code of Conduct

📄 License

MIT © Yogesh Solanki

🙏 Acknowledgments

• Original react-native-video-cache authors
• KTVHTTPCache (iOS)
• AndroidVideoCache (Android)
• RN Community 💙

📞 Support

• 💬 Open an Issue
• 📚 Check examples
• 🔍 Search closed issues before posting

✨ Made with ❤️ for the React Native community ✨