【React Native】「react-native-youtube-iframe」ライブラリでYoutubeの動画を再生する

今回は、Youtube の動画を React Native アプリ上で再生する方法についてです。
どうやるのかと調べたところ、「react-native-youtube-iframe」ライブラリを見つけたので、こちらの導入手順についてまとめます。

公式のドキュメントページはこちら。

React Native Youtube-iframe | React Native Youtube iframe
https://lonelycpp.github.io/react-native-youtube-iframe/

実装方法ですが、まず下記のコマンドでライブラリをインストールします。

npm install react-native-youtube-iframe --save

なお、使用している React のバージョンが 17 未満の場合、インストールに失敗する可能性があり、もし失敗した場合は下記のコマンドを実行してください。

npm install react-native-youtube-iframe --legacy-peer-deps --save

上記コマンドの実行が完了したら、実装していきます。
サンプルコードは下記のとおりです。

import React from 'react';
import { Dimensions } from 'react-native';
import YoutubePlayer from "react-native-youtube-iframe";

const youtubeHeight = Dimensions.get('window').width / 16 * 9;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playing: false,
    }
    this.onStateChange = (state) => {
      if (state === "ended") {
        this.setState({ playing: false });
      }
    }
  }
  render() {
    return (
      <YoutubePlayer
        height={youtubeHeight}
        play={this.state.playing}
        videoId="[Youtubeの動画ID]"
        onChangeState={this.onStateChange}
      />
    );
  }
}
export default App;

なお、Youtube の動画IDとは、Youtube の URL https://youtube.com/watch?v=XXXXXX の末尾の、v= 以降の文字列の事です。
また、<YoutubePlayer> コンポーネントでは、動画の高さを指定する height が必須項目なので必ず指定するようにしてください。
width は指定しなければ、端末の横幅一杯になるとのことでしたので、私は上記サンプルコードの5行目にあるように、端末の横幅を取得して、それを Youtube の標準の動画の縦横比 16:9 を使って動画の高さを求めました。

今回は必要最低限の props しか使用しませんでしたが、動画の読み込み完了を検知できる onReady が用意されていたり、1つの動画だけでなく、プレイリストを再生できたりするようでしたので、こちらは任意で設定を追加してください。

ライブラリがあったおかげでかなりサクッと実装できました！
個人的には、「react-native-video-player」等の動画再生のライブラリよりも使いやすいと思ったので、出来るなら動画関係の処理は Youtube で扱いたいものですね…。
まあ、難しいと思いますが…。

なお、類似ライブラリで「react-native-youtube」というライブラリもあったのですが、こちらは Android では端末に Youtube アプリがインストールされている必要があるとのことでした。
もしかしたら、端末に Youtube をインストールしていない人もいるかもしれない…ということで、使用を見合わせました。
問題ないよ！という場合は、こちらを候補にしてもいいと思います。

以上、React Native アプリ上で Youtube の動画を再生できるライブラリ「react-native-youtube-iframe」の実装方法についてでした。
ご参考になれば幸いです。