bitmovin-player-react-native 0.7.2 → 0.8.0

package/README.md

@@ -11,11 +11,6 @@ Official React Native bindings for Bitmovin's mobile Player SDKs.
 [![npm dt](https://img.shields.io/npm/dt/bitmovin-player-react-native.svg)](https://www.npmjs.com/package/bitmovin-player-react-native)
 
 > As the library is under active development, this means certain features from our native SDKs are not yet exposed through these React Native bindings.
-> See [Feature Support](#feature-support) for an overview of the supported features.
->
-> Not seeing the features you’re looking for?
-> We are accepting community pull requests to this open-source project so please feel free to contribute.
-> or let us know in [our community](https://community.bitmovin.com/c/requests/14) what features we should work on next.
 
 - [Bitmovin Player React Native](#bitmovin-player-react-native)
   - [Platform Support](#platform-support)
@@ -33,24 +28,14 @@ This library requires at least React Native 0.64+ and React 17+ to work properly
 - iOS 14.0+
 - tvOS 14.0+
 - Android API Level 21+
-- Android TV API Level 21+
+- Android TV API Level 24+
 - Fire TV FireOS 5.0+
 
 Please note that browsers and other browser-like environments such as webOS and Tizen are not supported. For more details regarding Bitmovin Player SDK platform and device support, please refer to the [Supported Platforms & Devices](https://developer.bitmovin.com/playback/docs/supported-platforms-devices-player) page of our documentation.
 
 ## Feature Support
 
-Features of the native mobile Player SDKs are progressively being implemented in this React Native library. The table below summarizes the current state of the main Player SDK features.
-
-| Feature                          | State                                     |
-| -------------------------------- | ----------------------------------------- |
-| Playback of DRM-protected assets | :white_check_mark: Available since v0.2.0 |
-| Subtitles & Captions             | :white_check_mark: Available since v0.2.0 |
-| Advertising                      | :white_check_mark: Available since v0.4.0 |
-| Analytics                        | :white_check_mark: Available since v0.5.0 |
-| Playlist API                     | :x: Not available                         |
-| Casting                          | :x: Not available                         |
-| Offline Playback                 | :x: Not available                         |
+Please refer to the [Features](https://developer.bitmovin.com/playback/docs/react-native-introduction#features) section of our documentation for an up-to-date list of supported Player features.
 
 ## Documentation
 

package/RNBitmovinPlayer.podspec

@@ -19,9 +19,9 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
   s.dependency "React-Core"
-  s.dependency "BitmovinPlayer", "3.41.0"
+  s.dependency "BitmovinPlayer", "3.41.2"
   s.dependency "BitmovinAnalyticsCollector/Core", "2.9.4"
   s.dependency "BitmovinAnalyticsCollector/BitmovinPlayer", "2.9.4"
-  s.ios.dependency "GoogleAds-IMA-iOS-SDK", "3.17.0"
-  s.tvos.dependency "GoogleAds-IMA-tvOS-SDK", "4.6.1"
+  s.ios.dependency "GoogleAds-IMA-iOS-SDK", "3.18.4"
+  s.tvos.dependency "GoogleAds-IMA-tvOS-SDK", "4.8.2"
 end

package/android/build.gradle

@@ -51,10 +51,10 @@ android {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlinVersion"
-    implementation 'com.google.ads.interactivemedia.v3:interactivemedia:3.26.0'
+    implementation 'com.google.ads.interactivemedia.v3:interactivemedia:3.29.0'
     implementation 'com.google.android.gms:play-services-ads-identifier:18.0.1'
     implementation 'com.bitmovin.analytics:collector-bitmovin-player:2.12.1'
-    implementation 'com.bitmovin.player:player:3.39.0'
+    implementation 'com.bitmovin.player:player:3.40.0'
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+' // From node_modules
 }

package/android/gradlew

@@ -85,9 +85,6 @@ done
 APP_BASE_NAME=${0##*/}
 APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
 
@@ -133,10 +130,13 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
@@ -197,6 +197,10 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
 # Collect all arguments for the java command;
 #   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
 #     shell script including quotes and variable substitutions, so put them in

package/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt

@@ -24,10 +24,11 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
     /**
      * Native component functions.
      */
-    enum class Commands {
-        ATTACH_PLAYER,
-        ATTACH_FULLSCREEN_BRIDGE,
-        SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID,
+    enum class Commands(val command: String) {
+        ATTACH_PLAYER("attachPlayer"),
+        ATTACH_FULLSCREEN_BRIDGE("attachFullscreenBridge"),
+        SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID("setCustomMessageHandlerBridgeId"),
+        SET_FULLSCREEN("setFullscreen");
     }
 
     /**
@@ -132,11 +133,9 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
      * to call 'functions' on them.
      * @return map between names (used in js) and command ids (used in native code).
      */
-    override fun getCommandsMap(): MutableMap<String, Int> = mutableMapOf(
-        "attachPlayer" to Commands.ATTACH_PLAYER.ordinal,
-        "attachFullscreenBridge" to Commands.ATTACH_FULLSCREEN_BRIDGE.ordinal,
-        "setCustomMessageHandlerBridgeId" to Commands.SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID.ordinal,
-    )
+    override fun getCommandsMap(): Map<String, Int> = Commands.values().associate {
+        it.command to it.ordinal
+    }
 
     /**
      * Callback triggered in response to command dispatches from the js side.
@@ -145,19 +144,23 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
      * @param args Arguments list sent from the js side.
      */
     override fun receiveCommand(view: RNPlayerView, commandId: String?, args: ReadableArray?) {
-        super.receiveCommand(view, commandId, args)
-        commandId?.toInt()?.let {
-            when (it) {
-                Commands.ATTACH_PLAYER.ordinal -> attachPlayer(view, args?.getString(1), args?.getMap(2))
-                Commands.ATTACH_FULLSCREEN_BRIDGE.ordinal -> args?.getString(1)?.let { fullscreenBridgeId ->
-                    attachFullscreenBridge(view, fullscreenBridgeId)
+        val command = commandId?.toInt()?.toCommand() ?: throw IllegalArgumentException(
+            "The received command is not supported by the Bitmovin Player View"
+        )
+        when (command) {
+            Commands.ATTACH_PLAYER -> attachPlayer(view, args?.getString(1), args?.getMap(2))
+            Commands.ATTACH_FULLSCREEN_BRIDGE -> args?.getString(1)?.let { fullscreenBridgeId ->
+                attachFullscreenBridge(view, fullscreenBridgeId)
+            }
+            Commands.SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID -> {
+                args?.getString(1)?.let { customMessageHandlerBridgeId ->
+                    setCustomMessageHandlerBridgeId(view, customMessageHandlerBridgeId)
                 }
-                Commands.SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID.ordinal -> {
-                    args?.getString(1)?.let { customMessageHandlerBridgeId ->
-                        setCustomMessageHandlerBridgeId(view, customMessageHandlerBridgeId)
-                    }
+            }
+            Commands.SET_FULLSCREEN -> {
+                args?.getBoolean(1)?.let { isFullscreen ->
+                    setFullscreen(view, isFullscreen)
                 }
-                else -> {}
             }
         }
     }
@@ -170,6 +173,20 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
         }
     }
 
+    private fun setFullscreen(view: RNPlayerView, isFullscreen: Boolean) {
+        if (view.playerView?.isFullscreen == isFullscreen) return
+
+        Handler(Looper.getMainLooper()).post {
+            with(view.playerView ?: return@post) {
+                if (isFullscreen) {
+                    enterFullscreen()
+                } else {
+                    exitFullscreen()
+                }
+            }
+        }
+    }
+
     private fun setCustomMessageHandlerBridgeId(view: RNPlayerView, customMessageHandlerBridgeId: NativeId) {
         this.customMessageHandlerBridgeId = customMessageHandlerBridgeId
         attachCustomMessageHandlerBridge(view)
@@ -223,3 +240,5 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
      */
     private fun getPlayerModule(): PlayerModule? = context.getModule()
 }
+
+private fun Int.toCommand(): RNPlayerViewManager.Commands? = RNPlayerViewManager.Commands.values().getOrNull(this)

package/android/src/main/java/com/bitmovin/player/reactnative/ui/FullscreenHandlerModule.kt

@@ -66,6 +66,11 @@ class FullscreenHandlerModule(private val context: ReactApplicationContext) : Re
         this.fullscreenHandler[nativeId] = fullscreenHandler
     }
 
+    @ReactMethod
+    fun setIsFullscreenActive(nativeId: NativeId, isFullscreenActive: Boolean) {
+        fullscreenHandler[nativeId]?.isFullscreen = isFullscreenActive
+    }
+
     @ReactMethod
     fun destroy(nativeId: NativeId) {
         fullscreenHandler.remove(nativeId)

package/ios/FullscreenHandlerModule.m

@@ -6,4 +6,5 @@ RCT_EXTERN_METHOD(destroy:(NSString *)nativeId)
 
 RCT_EXTERN__BLOCKING_SYNCHRONOUS_METHOD(onFullscreenChanged:(NSString *)nativeId isFullscreenEnabled:(BOOL)isFullscreenEnabled)
 RCT_EXTERN_METHOD(registerHandler:(NSString *)nativeId)
+RCT_EXTERN_METHOD(setIsFullscreenActive:(NSString *)nativeId isFullscreen:(BOOL)isFullscreen)
 @end

package/ios/FullscreenHandlerModule.swift

@@ -57,6 +57,11 @@ class FullscreenHandlerModule: NSObject, RCTBridgeModule {
         fullscreenHandlers[nativeId] = FullscreenHandlerBridge(nativeId, bridge: bridge)
     }
 
+    @objc(setIsFullscreenActive:isFullscreen:)
+    func setIsFullscreenActive(_ nativeId: NativeId, isFullscreen: Bool) {
+        fullscreenHandlers[nativeId]?.isFullscreen = isFullscreen
+    }
+
     func onFullscreenRequested(nativeId: NativeId) {
         fullscreenChangeDispatchGroup.enter()
         bridge.enqueueJSCall("FullscreenBridge-\(nativeId)", method: "enterFullscreen", args: []) {}

package/ios/RNPlayerViewManager.m

@@ -56,5 +56,6 @@ RCT_EXPORT_VIEW_PROPERTY(onFullscreenExit, RCTBubblingEventBlock)
 RCT_EXTERN_METHOD(attachPlayer:(nonnull NSNumber *)viewId playerId:(NSString *)playerId playerConfig:(nullable NSDictionary *)playerConfig)
 RCT_EXTERN_METHOD(attachFullscreenBridge:(nonnull NSNumber *)viewId fullscreenBridgeId:(NSString *)fullscreenBridgeId)
 RCT_EXTERN_METHOD(setCustomMessageHandlerBridgeId:(nonnull NSNumber *)viewId customMessageHandlerBridgeId:(NSString *)fullscreenBridgeId)
+RCT_EXTERN_METHOD(setFullscreen:(nonnull NSNumber *)viewId isFullscreen:(BOOL)isFullscreen)
 
 @end

package/ios/RNPlayerViewManager.swift

@@ -71,6 +71,28 @@ class RNPlayerViewManager: RCTViewManager {
         self.customMessageHandlerBridgeId = customMessageHandlerBridgeId
     }
 
+     @objc func setFullscreen(_ viewId: NSNumber, isFullscreen: Bool) {
+         bridge.uiManager.addUIBlock { [weak self] _, views in
+             guard
+                 let self,
+                 let view = views?[viewId] as? RNPlayerView
+             else {
+                 return
+             }
+             guard let playerView = view.playerView else {
+                 return
+             }
+             guard playerView.isFullscreen != isFullscreen else {
+                 return
+             }
+             if isFullscreen {
+                 playerView.enterFullscreen()
+             } else {
+                 playerView.exitFullscreen()
+             }
+         }
+     }
+
     /// Fetches the initialized `PlayerModule` instance on RN's bridge object.
     private func getPlayerModule() -> PlayerModule? {
         bridge.module(for: PlayerModule.self) as? PlayerModule

package/lib/index.d.ts

@@ -2174,14 +2174,29 @@ interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
      * and render audio/video inside the `PlayerView`.
      */
     player: Player;
+    /**
+     * The `FullscreenHandler` that is used by the `PlayerView` to control the fullscreen mode.
+     */
     fullscreenHandler?: FullscreenHandler;
+    /**
+     * The `CustomMessageHandler` that can be used to directly communicate with the embedded WebUi.
+     */
     customMessageHandler?: CustomMessageHandler;
+    /**
+     * Can be set to `true` to request fullscreen mode, or `false` to request exit of fullscreen mode.
+     * Should not be used to get the current fullscreen state. Use `onFullscreenEnter` and `onFullscreenExit`
+     * or the `FullscreenHandler.isFullscreenActive` property to get the current state.
+     * Using this property to change the fullscreen state, it is ensured that the embedded Player UI is also aware
+     * of potential fullscreen state changes.
+     * To use this property, a `FullscreenHandler` must be set.
+     */
+    isFullscreenRequested?: Boolean;
 }
 /**
  * Component that provides the Bitmovin Player UI and default UI handling to an attached `Player` instance.
  * This component needs a `Player` instance to work properly so make sure one is passed to it as a prop.
  */
-declare function PlayerView({ style, player, fullscreenHandler, customMessageHandler, ...props }: PlayerViewProps): JSX.Element;
+declare function PlayerView({ style, player, fullscreenHandler, customMessageHandler, isFullscreenRequested, ...props }: PlayerViewProps): JSX.Element;
 
 /**
  * React hook that creates and returns a reference to a `Player` instance

package/lib/index.js

@@ -186,6 +186,16 @@ var FullscreenHandlerBridge = class {
     );
     FullscreenHandlerModule.registerHandler(this.nativeId);
   }
+  setFullscreenHandler(fullscreenHandler) {
+    if (this.fullscreenHandler === fullscreenHandler) {
+      return;
+    }
+    this.fullscreenHandler = fullscreenHandler;
+    FullscreenHandlerModule.setIsFullscreenActive(
+      this.nativeId,
+      fullscreenHandler?.isFullscreenActive ?? false
+    );
+  }
   destroy() {
     if (!this.isDestroyed) {
       FullscreenHandlerModule.destroy(this.nativeId);
@@ -273,8 +283,19 @@ function PlayerView({
   player,
   fullscreenHandler,
   customMessageHandler,
+  isFullscreenRequested = false,
   ...props
 }) {
+  const fakeStateUpdater = (0, import_react2.useState)(1)[1];
+  const workaroundViewManagerCommandNotSent = (0, import_react2.useCallback)(() => {
+    setTimeout(
+      () => fakeStateUpdater((i) => {
+        console.log("Workaround #163");
+        return i + 1;
+      }),
+      100
+    );
+  }, [fakeStateUpdater]);
   const nativeView = (0, import_react2.useRef)(null);
   const proxy = useProxy(nativeView);
   const nativeViewStyle = import_react_native8.StyleSheet.flatten([styles.baseStyle, style]);
@@ -283,7 +304,7 @@ function PlayerView({
     fullscreenBridge.current = new FullscreenHandlerBridge();
   }
   if (fullscreenBridge.current) {
-    fullscreenBridge.current.fullscreenHandler = fullscreenHandler;
+    fullscreenBridge.current.setFullscreenHandler(fullscreenHandler);
   }
   const customMessageHandlerBridge = (0, import_react2.useRef)(void 0);
   if (customMessageHandler && !customMessageHandlerBridge.current) {
@@ -313,6 +334,7 @@ function PlayerView({
           fullscreenBridge.current.nativeId
         );
       }
+      workaroundViewManagerCommandNotSent();
     }
     return () => {
       fullscreenBridge.current?.destroy();
@@ -320,7 +342,13 @@ function PlayerView({
       customMessageHandlerBridge.current?.destroy();
       customMessageHandlerBridge.current = void 0;
     };
-  }, [player]);
+  }, [player, workaroundViewManagerCommandNotSent]);
+  (0, import_react2.useEffect)(() => {
+    const node = (0, import_react_native8.findNodeHandle)(nativeView.current);
+    if (node) {
+      dispatch("setFullscreen", node, isFullscreenRequested);
+    }
+  }, [isFullscreenRequested, nativeView]);
   return /* @__PURE__ */ import_react2.default.createElement(NativePlayerView, {
     ref: nativeView,
     style: nativeViewStyle,

package/lib/index.mjs

@@ -98,7 +98,7 @@ var AudioSession = {
 };
 
 // src/components/PlayerView/index.tsx
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState, useCallback as useCallback2 } from "react";
 import {
   Platform,
   UIManager,
@@ -147,6 +147,16 @@ var FullscreenHandlerBridge = class {
     );
     FullscreenHandlerModule.registerHandler(this.nativeId);
   }
+  setFullscreenHandler(fullscreenHandler) {
+    if (this.fullscreenHandler === fullscreenHandler) {
+      return;
+    }
+    this.fullscreenHandler = fullscreenHandler;
+    FullscreenHandlerModule.setIsFullscreenActive(
+      this.nativeId,
+      fullscreenHandler?.isFullscreenActive ?? false
+    );
+  }
   destroy() {
     if (!this.isDestroyed) {
       FullscreenHandlerModule.destroy(this.nativeId);
@@ -234,8 +244,19 @@ function PlayerView({
   player,
   fullscreenHandler,
   customMessageHandler,
+  isFullscreenRequested = false,
   ...props
 }) {
+  const fakeStateUpdater = useState(1)[1];
+  const workaroundViewManagerCommandNotSent = useCallback2(() => {
+    setTimeout(
+      () => fakeStateUpdater((i) => {
+        console.log("Workaround #163");
+        return i + 1;
+      }),
+      100
+    );
+  }, [fakeStateUpdater]);
   const nativeView = useRef(null);
   const proxy = useProxy(nativeView);
   const nativeViewStyle = StyleSheet.flatten([styles.baseStyle, style]);
@@ -244,7 +265,7 @@ function PlayerView({
     fullscreenBridge.current = new FullscreenHandlerBridge();
   }
   if (fullscreenBridge.current) {
-    fullscreenBridge.current.fullscreenHandler = fullscreenHandler;
+    fullscreenBridge.current.setFullscreenHandler(fullscreenHandler);
   }
   const customMessageHandlerBridge = useRef(void 0);
   if (customMessageHandler && !customMessageHandlerBridge.current) {
@@ -274,6 +295,7 @@ function PlayerView({
           fullscreenBridge.current.nativeId
         );
       }
+      workaroundViewManagerCommandNotSent();
     }
     return () => {
       fullscreenBridge.current?.destroy();
@@ -281,7 +303,13 @@ function PlayerView({
       customMessageHandlerBridge.current?.destroy();
       customMessageHandlerBridge.current = void 0;
     };
-  }, [player]);
+  }, [player, workaroundViewManagerCommandNotSent]);
+  useEffect(() => {
+    const node = findNodeHandle2(nativeView.current);
+    if (node) {
+      dispatch("setFullscreen", node, isFullscreenRequested);
+    }
+  }, [isFullscreenRequested, nativeView]);
   return /* @__PURE__ */ React.createElement(NativePlayerView, {
     ref: nativeView,
     style: nativeViewStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitmovin-player-react-native",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Official React Native bindings for Bitmovin's mobile Player SDKs.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -28,7 +28,9 @@
     "format": "prettier --write .",
     "build": "tsup ./src/index.ts --dts --target es2020 --format cjs,esm -d lib",
     "example": "yarn --cwd example",
-    "pods": "cd example/ios && bundle install && bundle exec pod install --silent",
+    "pods": "yarn pods-install || yarn pods-install --repo-update || yarn pods-update",
+    "pods-install": "cd example/ios && bundle install && bundle exec pod install --silent",
+    "pods-update": "cd example/ios && bundle install && bundle exec pod update --silent",
     "bootstrap": "yarn && yarn example && yarn pods",
     "prepare": "husky install"
   },

package/src/components/PlayerView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import {
   Platform,
   UIManager,
@@ -35,9 +35,25 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
    */
   player: Player;
 
+  /**
+   * The `FullscreenHandler` that is used by the `PlayerView` to control the fullscreen mode.
+   */
   fullscreenHandler?: FullscreenHandler;
 
+  /**
+   * The `CustomMessageHandler` that can be used to directly communicate with the embedded WebUi.
+   */
   customMessageHandler?: CustomMessageHandler;
+
+  /**
+   * Can be set to `true` to request fullscreen mode, or `false` to request exit of fullscreen mode.
+   * Should not be used to get the current fullscreen state. Use `onFullscreenEnter` and `onFullscreenExit`
+   * or the `FullscreenHandler.isFullscreenActive` property to get the current state.
+   * Using this property to change the fullscreen state, it is ensured that the embedded Player UI is also aware
+   * of potential fullscreen state changes.
+   * To use this property, a `FullscreenHandler` must be set.
+   */
+  isFullscreenRequested?: Boolean;
 }
 
 /**
@@ -73,9 +89,20 @@ export function PlayerView({
   player,
   fullscreenHandler,
   customMessageHandler,
+  isFullscreenRequested = false,
   ...props
 }: PlayerViewProps) {
-  // Native view reference.
+  const fakeStateUpdater = useState(1)[1];
+  const workaroundViewManagerCommandNotSent = useCallback(() => {
+    setTimeout(
+      () =>
+        fakeStateUpdater((i) => {
+          console.log('Workaround #163'); // Player will not load 1/10th if this log is removed :((((
+          return i + 1;
+        }),
+      100
+    );
+  }, [fakeStateUpdater]);
   const nativeView = useRef(null);
   // Native events proxy helper.
   const proxy = useProxy(nativeView);
@@ -89,7 +116,7 @@ export function PlayerView({
     fullscreenBridge.current = new FullscreenHandlerBridge();
   }
   if (fullscreenBridge.current) {
-    fullscreenBridge.current.fullscreenHandler = fullscreenHandler;
+    fullscreenBridge.current.setFullscreenHandler(fullscreenHandler);
   }
 
   const customMessageHandlerBridge: React.MutableRefObject<
@@ -127,14 +154,27 @@ export function PlayerView({
           fullscreenBridge.current.nativeId
         );
       }
+      // Workaround React Native Command not sent until UI refresh
+      // See: https://github.com/bitmovin/bitmovin-player-react-native/issues/163
+      // Seems to be a dup of https://github.com/microsoft/react-native-windows/issues/7543
+      // Remove the workaround when React Native is updated
+      workaroundViewManagerCommandNotSent();
     }
+
     return () => {
       fullscreenBridge.current?.destroy();
       fullscreenBridge.current = undefined;
       customMessageHandlerBridge.current?.destroy();
       customMessageHandlerBridge.current = undefined;
     };
-  }, [player]);
+  }, [player, workaroundViewManagerCommandNotSent]);
+
+  useEffect(() => {
+    const node = findNodeHandle(nativeView.current);
+    if (node) {
+      dispatch('setFullscreen', node, isFullscreenRequested);
+    }
+  }, [isFullscreenRequested, nativeView]);
   return (
     <NativePlayerView
       ref={nativeView}

package/src/ui/fullscreenhandlerbridge.ts

@@ -23,6 +23,20 @@ export class FullscreenHandlerBridge {
     FullscreenHandlerModule.registerHandler(this.nativeId);
   }
 
+  setFullscreenHandler(fullscreenHandler: FullscreenHandler | undefined) {
+    if (this.fullscreenHandler === fullscreenHandler) {
+      return;
+    }
+
+    this.fullscreenHandler = fullscreenHandler;
+
+    // synchronize current state from fullscreenHandler to native
+    FullscreenHandlerModule.setIsFullscreenActive(
+      this.nativeId,
+      fullscreenHandler?.isFullscreenActive ?? false
+    );
+  }
+
   /**
    * Destroys the native FullscreenHandler
    */