【React Native】「react-native-video」ライブラリで動画をフルスクリーンで表示する

動画ファイルの再生機能を React Native アプリに実装した際、再生する動画をフルスクリーンで表示したかったのでその実装方法についてまとめ。
ライブラリのオプションで fullscreen とありましたが、こちらは私のプロジェクトでは正しく動作しないようだったので、別の方法で実現する方法です。

ライブラリの GitHub　ページはこちら。

GitHub – react-native-video/react-native-video: A <video /> component for react-native
https://github.com/react-native-video/react-native-video

なお、まだ iOS でしか検証していません。
おそらく問題ないとは思いますが、Android は未検証なので、もしレイアウトが崩れた場合は適宜調整してください。

サンプルコードは下記の通りです。

import { StyleSheet, Dimensions } from 'react-native';
import { getInset } from 'react-native-safe-area-view';
import VideoPlayer from 'react-native-video-player';

const topPadding = getInset('top', false);
const bottomPadding = getInset('bottom', false);
const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
  video: {
    width: '100%',
    height: windowHeight - topPadding - bottomPadding,
  },
});

<VideoPlayer
  video={videoSource}
  resizeMode='contain'
  thumbnail={{ uri: this.state.thumbnail }}
  style={styles.video} />

設定は至って単純で <VideoPlayer /> に style で幅と高さを指定しているだけです。
なおこの時、横幅は端末の横幅 100% で問題ありませんが、高さも 100% にしてしまうと、iPhoneX　以降の上下のノッチ部分に干渉してしまうので、その分の高さを引くようにしています。
なお、端末画面の高さは、サンプルコード 7行目でも記載している通り、Dimensions.get('window').height で取得できます。
またノッチの高さについては上記のサンプルコードの 5、6行目のように react-native-safe-area-view の getInset を使えば取得できます。
実装する内容は以上です！

まだ微調整は少し必要ですが、機能的にはこれで問題ないと思います！
今後、Android　の見た目も見つつ、細部を調整していく予定です。

以上、React Native　の react-native-video ライブラリで、動画をフルスクリーン表示する方法についてでした。
ご参考になれば幸いです。