feat: add responsive layouts for android

android/build.gradle

@@ -138,7 +138,7 @@ dependencies {
   implementation 'androidx.core:core-ktx:1.12.0'
   implementation 'androidx.appcompat:appcompat:1.6.1'
   implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.1'
-  implementation 'app.rive:rive-android:9.9.5'
+  implementation 'app.rive:rive-android:9.10.1'
   implementation "androidx.startup:startup-runtime:1.1.1"
   implementation 'com.android.volley:volley:1.2.0'
 }

android/src/main/java/com/rivereactnative/RNFit.kt

@@ -9,7 +9,8 @@ enum class RNFit(private val mValue: String) {
   FitWidth("fitWidth"),
   FitHeight("fitHeight"),
   None("none"),
-  ScaleDown("scaleDown");
+  ScaleDown("scaleDown"),
+  Layout("layout");
 
   override fun toString(): String {
     return mValue
@@ -30,6 +31,7 @@ enum class RNFit(private val mValue: String) {
         FitHeight -> Fit.FIT_HEIGHT
         None -> Fit.NONE
         ScaleDown -> Fit.SCALE_DOWN
+        Layout -> Fit.LAYOUT
       }
     }
   }

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

@@ -71,6 +71,7 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   private var stateMachineName: String? = null
   private var artboardName: String? = null
   private var fit: Fit = Fit.CONTAIN
+  private var layoutScaleFactor: Float? = null
   private var alignment: Alignment = Alignment.CENTER
   private var autoplay: Boolean = false;
   private var shouldBeReloaded = true
@@ -339,6 +340,11 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
     riveAnimationView.fit = riveFit
   }
 
+  fun setLayoutScaleFactor(layoutScaleFactor: Float?) {
+    this.layoutScaleFactor = layoutScaleFactor
+    riveAnimationView.layoutScaleFactor = layoutScaleFactor
+  }
+
   fun setAlignment(rnAlignment: RNAlignment) {
     val riveAlignment = RNAlignment.mapToRiveAlignment(rnAlignment)
     this.alignment = riveAlignment

android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt

@@ -163,6 +163,24 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
     view.setFit(RNFit.mapToRNFit(fit))
   }
 
+  @ReactProp(name = "layoutScaleFactor")
+  fun setLayoutScaleFactor(view: RiveReactNativeView, layoutScaleFactor: Double) {
+    when {
+        layoutScaleFactor.isNaN() -> {
+            // Treat as `null` or uninitialized
+            view.setLayoutScaleFactor(null)
+        }
+        layoutScaleFactor == -1.0 -> {
+            // iOS handles -1.0 as the value where Rive should handle the density
+            // We force the same for Android on React Native
+            view.setLayoutScaleFactor(null)
+        }
+        else -> {
+            view.setLayoutScaleFactor(layoutScaleFactor.toFloat())
+        }
+    }
+  }
+
   @ReactProp(name = "alignment")
   fun setAlignment(view: RiveReactNativeView, alignment: String) {
     view.setAlignment(RNAlignment.mapToRNAlignment(alignment))

example/src/ResponsiveLayout.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { SafeAreaView, StyleSheet, View, Button, Text } from 'react-native';
 import Rive, { Fit } from 'rive-react-native';
 
-// const resourceName = 'layouts_demo';
 const resourceName = 'layout_test';
 
 export default function ResponsiveLayout() {
@@ -18,8 +17,10 @@ export default function ResponsiveLayout() {
         autoplay={true}
         style={styles.animation}
         fit={Fit.Layout}
-        layoutScaleFactor={scaleFactor} // If you do not set this, Rive will automatically scale the layout to match the device pixel ratio
+        layoutScaleFactor={scaleFactor} // If you do not set this (or set equal to "-1.0"), Rive will automatically scale the layout to match the device pixel ratio
         resourceName={resourceName}
+        artboardName={'Artboard'}
+        stateMachineName={'State Machine 1'}
       />
       <View style={styles.controls}>
         <Text style={styles.label}>Layout Scale Factor</Text>