bilalisler/react-native-youtube-iframe

A simple wrapper around the youtube iframe js API for react native

React Native Youtube iframe

A wrapper of the Youtube IFrame player API build for react native.

• ✅ Works seamlessly on both ios and android platforms
• ✅ Does not rely on the native youtube service on android (prevents unexpected crashes, works on phones without the youtube app)
• ✅ Uses the webview player which is known to be more stable compared to the native youtube app
• ✅ Access to a vast API provided through the iframe youtube API
• ✅ Supports multiple youtube player instances in a single page
• ✅ Fetch basic video metadata without API keys (uses oEmbed)
• ✅ Works on modals and overlay components
• ✅ Expo support

Prerequisite

This package uses react-hooks and therefore will need react-native 0.59 or above

(recommended - react native version - 0.60 or above)

Installation

1. First install react-native-webview.

• Bare React Native app - Instructions

  • React Native version 0.60 and above, install the latest version of react-native-webview
  • React Native version below 0.60, react-native-webview version 6.11.1 is the last version that supports it.

• Expo Managed App - Instructions

2. Run - npm install react-native-youtube-iframe

Usage

import React, {useRef, useState} from 'react';
import YoutubePlayer from 'react-native-youtube-iframe';

const playerRef = useRef(null);
const [playing, setPlaying] = useState(true);

<YoutubePlayer
  ref={playerRef}
  height={300}
  width={400}
  videoId={"AVAc1gYLZK0"}
  play={playing}
  onChangeState={event => console.log(event)}   
  onReady={() => console.log("ready")}
  onError={e => console.log(e)}
  onPlaybackQualityChange={q => console.log(q)}
  volume={50}
  playbackRate={1}
  playerParams={{
    cc_lang_pref: "us",
    showClosedCaptions: true
  }}
/>

API reference

Click here for full reference

list of available APIs -

props

• videoId
• playList
• playListStartIndex
• play
• onChangeState
• onReady
• onError
• onPlaybackQualityChange
• mute
• volume
• playbackRate
• onPlaybackRateChange
• initialPlayerParams
• webViewStyle
• webViewProps

Ref functions

• getDuration
• getCurrentTime
• isMuted
• getVolume
• getPlaybackRate
• getAvailablePlaybackRates
• seekTo

methods

• getYoutubeMeta

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT