React Native Youtube Bridge

English | 한국어

Overview

Using a YouTube player in React Native usually means wiring the YouTube IFrame API, WebView behavior, events, and platform differences yourself.

react-native-youtube-bridge provides a typed, hook-based YouTube player for React Native apps across iOS, Android, and Web.

Key Features

• 🎥 YouTube IFrame Player API - Uses YouTube's iframe player instead of native YouTube modules
• 🪝 Hook-Based API - Create a player with useYouTubePlayer and render it with YoutubeView
• 🔔 Typed Events - Subscribe to ready, state, progress, mute, and error updates with useYouTubeEvent
• 🌐 Cross-Platform - Supports iOS, Android, and React Native Web
• 🧩 Flexible Rendering Modes - Use inline HTML by default or an external WebView player page when needed
• 🧠 TypeScript Support - Typed player methods, events, source inputs, and view props
• 🚀 Expo Friendly - Works well in Expo and modern React Native projects

Quick Start

📚 Documentation

Full documentation is available at: https://react-native-youtube-bridge-docs.pages.dev

• Getting Started
• API Reference
• 1.x Documentation
• Migration from 1.x

Examples & Demo

• 📁 Example Project - Example React Native app
• 🌐 Web Demo - Hosted demo
• 🤖 Expo Snack - Try it instantly on Expo Snack

🤖 AI

• llms.txt: A structured index file containing documentation pages and descriptions.
• llms-full.txt: A full-content file that concatenates the complete documentation into a single file.

Installation

npm install react-native-youtube-bridge

Basic Usage

import { YoutubeView, useYouTubePlayer } from 'react-native-youtube-bridge';

function App() {
  const player = useYouTubePlayer('AbZH7XWDW_k');

  return <YoutubeView player={player} />;
}

For events, player controls, rendering modes, WebView customization, and migration details, see the full documentation.

Contributing

For details on how to contribute to the project and set up the development environment, please refer to the Contributing Guide.

License

MIT