implementation scaling mode dynamic android and ios

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

@@ -5,6 +5,7 @@ import android.os.Looper
 import android.util.Log
 import android.view.ViewGroup.LayoutParams
 import com.bitmovin.player.PlayerView
+import com.bitmovin.player.api.ui.ScalingMode
 import com.bitmovin.player.reactnative.converter.JsonConverter
 import com.bitmovin.player.reactnative.extensions.getBooleanOrNull
 import com.bitmovin.player.reactnative.extensions.getModule
@@ -31,6 +32,7 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
         ATTACH_FULLSCREEN_BRIDGE("attachFullscreenBridge"),
         SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID("setCustomMessageHandlerBridgeId"),
         SET_FULLSCREEN("setFullscreen"),
+        SET_SCALING_MODE("setScalingMode"),
     }
 
     /**
@@ -166,6 +168,11 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
                     setFullscreen(view, isFullscreen)
                 }
             }
+            Commands.SET_SCALING_MODE -> {
+                args?.getString(1)?.let { scalingMode ->
+                    setScalingMode(view, scalingMode)
+                }
+            }
         }
     }
 
@@ -196,6 +203,12 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
         }
     }
 
+    private fun setScalingMode(view: RNPlayerView, scalingMode: String) {
+        Handler(Looper.getMainLooper()).post {
+            view.playerView?.scalingMode = ScalingMode.valueOf(scalingMode)
+        }
+    }
+
     private fun setCustomMessageHandlerBridgeId(view: RNPlayerView, customMessageHandlerBridgeId: NativeId) {
         this.customMessageHandlerBridgeId = customMessageHandlerBridgeId
         attachCustomMessageHandlerBridge(view)

ios/RNPlayerViewManager.m

@@ -67,5 +67,6 @@ @interface RCT_EXTERN_REMAP_MODULE(NativePlayerView, RNPlayerViewManager, RCTVie
 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)
+RCT_EXTERN_METHOD(setScalingMode:(nonnull NSNumber *)viewId scalingMode:(NSString *)scalingMode)
 
 @end

ios/RNPlayerViewManager.swift

@@ -100,6 +100,27 @@ class RNPlayerViewManager: RCTViewManager {
          }
      }
 
+     @objc func setScalingMode(_ viewId: NSNumber, scalingMode: String) {
+         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
+             }
+             if scalingMode == "Zoom" {
+                 playerView.scalingMode = ScalingMode.zoom
+             } else if scalingMode == "Stretch" {
+                 playerView.scalingMode = ScalingMode.stretch
+             } else {
+                 playerView.scalingMode = ScalingMode.fit
+             }
+         }
+     }
+
     /// Fetches the initialized `PlayerModule` instance on RN's bridge object.
     private func getPlayerModule() -> PlayerModule? {
         bridge.module(for: PlayerModule.self) as? PlayerModule

src/components/PlayerView/index.tsx

@@ -14,6 +14,7 @@ import { useProxy } from '../../hooks/useProxy';
 import { FullscreenHandler, CustomMessageHandler } from '../../ui';
 import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
+import { ScalingMode } from '../../styleConfig';
 import { PictureInPictureConfig } from './pictureInPictureConfig';
 
 /**
@@ -62,6 +63,10 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
    * To use this property, a `FullscreenHandler` must be set.
    */
   isFullscreenRequested?: Boolean;
+  /**
+   * The `Scaling Mode` that is used by the `PlayerView` to control the scaling mode.
+   */
+  scalingMode?: ScalingMode;
 }
 
 /**
@@ -100,6 +105,7 @@ export function PlayerView({
   fullscreenHandler,
   customMessageHandler,
   isFullscreenRequested = false,
+  scalingMode = ScalingMode.Fit,
   pictureInPictureConfig,
   ...props
 }: PlayerViewProps) {
@@ -179,6 +185,13 @@ export function PlayerView({
       dispatch('setFullscreen', node, isFullscreenRequested);
     }
   }, [isFullscreenRequested, nativeView]);
+
+  useEffect(() => {
+    const node = findNodeHandle(nativeView.current);
+    if (node) {
+      dispatch('setScalingMode', node, scalingMode);
+    }
+  }, [scalingMode, nativeView]);
   return (
     <NativePlayerView
       ref={nativeView}