feat: add layoutScaleFactor

Author: HayesGordon

android/src/main/java/com/margelo/nitro/rive/HybridRiveView.kt

@@ -16,6 +16,7 @@ object DefaultConfiguration {
   const val AUTOPLAY = true
   val FIT = RiveFit.CONTAIN
   val ALIGNMENT = RiveAlignment.CENTER
+  val LAYOUTSCALEFACTOR = null
 }
 
 @Keep
@@ -49,6 +50,7 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
     }
   override var alignment: Alignment? = null
   override var fit: Fit? = null
+  override var layoutScaleFactor: Double? = null
   //endregion
 
   //region View Methods
@@ -108,6 +110,7 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
       riveFile = riveFile,
       alignment = convertAlignment(alignment) ?: DefaultConfiguration.ALIGNMENT,
       fit = convertFit(fit) ?: DefaultConfiguration.FIT,
+      layoutScaleFactor = layoutScaleFactor?.toFloat() ?: DefaultConfiguration.LAYOUTSCALEFACTOR,
     )
     view.configure(config, needsReload)
     needsReload = false

android/src/main/java/com/rive/RiveReactNativeView.kt

@@ -10,7 +10,6 @@ import app.rive.runtime.kotlin.core.File
 import app.rive.runtime.kotlin.core.Fit
 import app.rive.runtime.kotlin.core.RiveEvent
 import app.rive.runtime.kotlin.core.RiveOpenURLEvent
-import app.rive.runtime.kotlin.core.RiveTextValueRun
 import app.rive.runtime.kotlin.core.SMIBoolean
 import app.rive.runtime.kotlin.core.SMIInput
 import app.rive.runtime.kotlin.core.SMINumber
@@ -27,7 +26,8 @@ data class ViewConfiguration(
   val autoPlay: Boolean,
   val riveFile: File,
   val alignment: Alignment,
-  val fit: Fit
+  val fit: Fit,
+  val layoutScaleFactor: Float?
 )
 
 @SuppressLint("ViewConstructor")
@@ -62,6 +62,8 @@ class RiveReactNativeView(context: ThemedReactContext) : FrameLayout(context) {
     } else {
       riveAnimationView?.alignment = config.alignment
       riveAnimationView?.fit = config.fit
+      // TODO: this seems to require a reload for the view to take the new value (bug on Android)
+      riveAnimationView?.layoutScaleFactor = config.layoutScaleFactor
     }
     viewReadyDeferred.complete(true)
   }
@@ -243,7 +245,7 @@ class RiveReactNativeView(context: ThemedReactContext) : FrameLayout(context) {
     }
   }
 
-
+  // TODO: this is throwing when autoplay is false
   // TODO: This is a temporary solution to get the state machine name as Android supports
   // playing multiple state machines, but in React Native we only allow playing one.
   /**

example/src/pages/RiveDataBindingExample.tsx

@@ -136,7 +136,8 @@ export default function DataBindingExample() {
             style={styles.rive}
             autoBind={false}
             autoPlay={true}
-            fit={Fit.Contain}
+            fit={Fit.Layout}
+            layoutScaleFactor={1}
             file={riveFile!}
             hybridRef={setHybridRef}
           />
@@ -150,30 +151,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    padding: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginTop: 20,
-    marginBottom: 10,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 20,
   },
   riveContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#f5f5f5',
-    borderRadius: 10,
-    overflow: 'hidden',
   },
   rive: {
+    flex: 1,
     width: '100%',
     height: '100%',
   },

ios/HybridRiveView.swift

@@ -8,6 +8,7 @@ private struct DefaultConfiguration {
   static let autoPlay = true
   static let alignment = RiveAlignment.center
   static let fit = RiveFit.contain
+  static let layoutScaleFactor = RiveRuntime.RiveViewModel.layoutScaleFactorAutomatic
 }
 
 class HybridRiveView : HybridRiveViewSpec {
@@ -21,6 +22,7 @@ class HybridRiveView : HybridRiveViewSpec {
   }
   var alignment: Alignment?
   var fit: Fit?
+  var layoutScaleFactor: Double?
 
   func awaitViewReady() throws -> Promise<Bool> {
     return Promise.async { [self] in
@@ -90,7 +92,8 @@ class HybridRiveView : HybridRiveViewSpec {
       autoPlay: autoPlay ?? DefaultConfiguration.autoPlay,
       riveFile: file,
       alignment: convertAlignment(alignment) ?? DefaultConfiguration.alignment,
-      fit: convertFit(fit) ?? DefaultConfiguration.fit
+      fit: convertFit(fit) ?? DefaultConfiguration.fit,
+      layoutScaleFactor: layoutScaleFactor ?? DefaultConfiguration.layoutScaleFactor
     )
 
     try? getRiveView().configure(config, reload: needsReload)

ios/RiveReactNativeView.swift

@@ -10,6 +10,7 @@ struct ViewConfiguration {
   let riveFile: RiveFile
   let alignment: RiveRuntime.RiveAlignment
   let fit: RiveRuntime.RiveFit
+  let layoutScaleFactor: Double
 }
 
 class RiveReactNativeView: UIView, RiveStateMachineDelegate {
@@ -46,6 +47,7 @@ class RiveReactNativeView: UIView, RiveStateMachineDelegate {
     baseViewModel?.alignment = config.alignment
     baseViewModel?.fit = config.fit
     baseViewModel?.autoPlay = config.autoPlay
+    baseViewModel?.layoutScaleFactor = config.layoutScaleFactor
 
     if !isViewReady {
       isViewReady = true

src/specs/RiveView.nitro.ts

@@ -28,6 +28,8 @@ export interface RiveViewProps extends HybridViewProps {
   alignment?: Alignment;
   /** How the Rive graphic should fit within its container */
   fit?: Fit;
+  /** The scale factor to apply to the Rive graphic when using Fit.Layout */
+  layoutScaleFactor?: number;
 }
 
 /**