https://github.com/react-native-bridges/react-native-youtube-bridge

🎥 Easy-to-use YouTube player for React Native with cross-platform support
https://github.com/react-native-bridges/react-native-youtube-bridge

android expo ios react-native react-native-youtube react-native-youtube-iframe web youtube-iframe youtube-player youtube-video

Last synced: about 1 month ago
JSON representation

🎥 Easy-to-use YouTube player for React Native with cross-platform support

• Host: GitHub
• URL: https://github.com/react-native-bridges/react-native-youtube-bridge
• Owner: react-native-bridges
• License: mit
• Created: 2025-06-11T09:15:22.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2026-05-03T11:02:17.000Z (about 2 months ago)
• Last Synced: 2026-05-03T11:24:06.222Z (about 2 months ago)
• Topics: android, expo, ios, react-native, react-native-youtube, react-native-youtube-iframe, web, youtube-iframe, youtube-player, youtube-video
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-youtube-bridge
• Size: 35 MB
• Stars: 43
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README-ko_kr.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React Native Youtube Bridge

> [English](./README.md) | 한국어



  



## 개요

React Native에서 YouTube 플레이어를 사용하려면 YouTube IFrame API, WebView 동작, 이벤트, 플랫폼 차이를 직접 연결해야 하는 경우가 많습니다.

`react-native-youtube-bridge`는 iOS, Android, Web에서 사용할 수 있는 타입 안전한 Hook 기반 YouTube 플레이어 라이브러리입니다.



  



### 주요 특징

- 🎥 **YouTube IFrame Player API** - 네이티브 YouTube 모듈 대신 YouTube iframe player를 사용

- 🪝 **Hook 기반 API** - `useYouTubePlayer`로 플레이어를 만들고 `YoutubeView`로 렌더링

- 🔔 **타입 안전 이벤트** - `useYouTubeEvent`로 ready, state, progress, mute, error 이벤트 구독

- 🌐 **크로스 플랫폼** - iOS, Android, React Native Web 지원

- 🧩 **유연한 렌더링 모드** - 기본 inline HTML 또는 외부 WebView 플레이어 페이지 사용 가능

- 🧠 **TypeScript 지원** - 플레이어 메서드, 이벤트, source 입력, view props 타입 제공

- 🚀 **Expo 친화적** - Expo와 최신 React Native 프로젝트에서 사용하기 좋음

## 빠른 시작

### 📚 문서

전체 문서는 에서 확인할 수 있습니다.

- [시작하기](https://react-native-youtube-bridge-docs.pages.dev/ko/guide/getting-started/overview.html)

- [API 레퍼런스](https://react-native-youtube-bridge-docs.pages.dev/ko/guide/usage/api-reference.html)

- [1.x 문서](https://react-native-youtube-bridge-docs.pages.dev/1.x/ko/)

- [1.x에서 마이그레이션](https://react-native-youtube-bridge-docs.pages.dev/ko/guide/migration-from-1.x.html)

### 예제 및 데모

- [📁 예제 프로젝트](/example/) - 예제 React Native 앱

- [🌐 웹 데모](https://react-native-youtube-bridge-example.pages.dev/) - 호스팅된 데모

- [🤖 Expo Snack](https://snack.expo.dev/@harang/react-native-youtube-bridge) - Expo Snack에서 바로 체험

### 🤖 AI

- [llms.txt](https://react-native-youtube-bridge-docs.pages.dev/ko/llms.txt): 문서 페이지와 설명을 담은 구조화된 색인 파일입니다.

- [llms-full.txt](https://react-native-youtube-bridge-docs.pages.dev/ko/llms-full.txt): 전체 문서를 하나의 파일로 합친 전체 내용 파일입니다.

### 설치

```bash

npm install react-native-youtube-bridge

```

### 기본 사용법

```tsx

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

function App() {

  const player = useYouTubePlayer('AbZH7XWDW_k');

  return ;

}

```

이벤트, 플레이어 제어, 렌더링 모드, WebView 커스터마이징, 마이그레이션은 [전체 문서](https://react-native-youtube-bridge-docs.pages.dev/ko/)를 참고하세요.

## 기여하기

프로젝트 기여 방법과 개발 환경 설정은 [기여 가이드](CONTRIBUTING.md)를 참고해 주세요.

## 라이선스

[MIT](./LICENSE)