diff --git a/android/build.gradle b/android/build.gradle index f96b1a4..0d37320 100644 --- a/android/build.gradle +++ b/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' } diff --git a/android/src/main/java/com/rivereactnative/RNFit.kt b/android/src/main/java/com/rivereactnative/RNFit.kt index 4d65044..ae9f4bc 100644 --- a/android/src/main/java/com/rivereactnative/RNFit.kt +++ b/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 } } } diff --git a/android/src/main/java/com/rivereactnative/RiveReactNativeView.kt b/android/src/main/java/com/rivereactnative/RiveReactNativeView.kt index 6f56dd9..065dbeb 100644 --- a/android/src/main/java/com/rivereactnative/RiveReactNativeView.kt +++ b/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 diff --git a/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt b/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt index 7df8989..27ab5fc 100644 --- a/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt +++ b/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt @@ -163,6 +163,24 @@ class RiveReactNativeViewManager : SimpleViewManager() { 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)) diff --git a/example/android/app/src/main/res/raw/layout_test.riv b/example/android/app/src/main/res/raw/layout_test.riv new file mode 100644 index 0000000..edfe827 Binary files /dev/null and b/example/android/app/src/main/res/raw/layout_test.riv differ diff --git a/example/src/ResponsiveLayout.tsx b/example/src/ResponsiveLayout.tsx index 099dea6..388e353 100644 --- a/example/src/ResponsiveLayout.tsx +++ b/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'} /> Layout Scale Factor