Fix Fit.LAYOUT artboard oversized on Android

Set layoutScaleFactorAutomatic to device density at init time.
RN's deferred layout means onMeasure (which normally sets this) may not
fire before the render thread uses it, leaving the default of 1.0 and
sizing the artboard in pixels instead of dp.

Fixes #206

Author: mfazekas

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

@@ -81,6 +81,11 @@ class RiveReactNativeView(context: ThemedReactContext) : FrameLayout(context) {
 
   init {
     riveAnimationView = ReactNativeRiveAnimationView(context)
+    // RN's deferred layout means onMeasure may not fire before the render
+    // thread runs resizeArtboard(). Without this, layoutScaleFactorAutomatic
+    // defaults to 1.0 and Fit.LAYOUT sizes the artboard in pixels instead of dp.
+    // See: https://github.com/rive-app/rive-android/issues/446
+    riveAnimationView.layoutScaleFactorAutomatic = resources.displayMetrics.density
     addView(riveAnimationView)
   }
 

example/src/reproducers/Issue206.tsx

@@ -0,0 +1,165 @@
+/**
+ * Reproducer for https://github.com/rive-app/rive-nitro-react-native/issues/206
+ *
+ * [Android] Fit.Layout RiveView sometimes renders too big when another RiveView
+ * is already running in the background. Looks like density scaling is applied
+ * incorrectly — the layout graphic overflows well beyond the expected area.
+ *
+ * Repro steps:
+ * 1. Run on Android
+ * 2. Tap "Show Layout Views" button — this mounts two Fit.Layout RiveViews
+ *    while the background Fit.Cover RiveView is already rendering
+ * 3. If the layout views look oversized/stretched, the bug is present
+ * 4. Try restarting the app (not just reload) — repro rate is ~50%
+ *
+ * Expected: both layout views should fit neatly in their containers
+ * Actual (Android, intermittent): layout views overflow their bounds
+ */
+
+import { useState } from 'react';
+import { View, Text, StyleSheet, Pressable, ScrollView } from 'react-native';
+import { RiveView, Fit, useRiveFile } from '@rive-app/react-native';
+import type { Metadata } from '../shared/metadata';
+
+function LayoutBox({ label }: { label: string }) {
+  const { riveFile } = useRiveFile(
+    require('../../assets/rive/layouts_demo.riv')
+  );
+
+  return (
+    <View style={styles.layoutBox}>
+      <Text style={styles.boxLabel}>{label}</Text>
+      <View style={styles.riveContainer}>
+        {riveFile && (
+          <RiveView
+            file={riveFile}
+            fit={Fit.Layout}
+            autoPlay
+            style={styles.riveLayout}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+export default function Issue206Page() {
+  const [showLayoutViews, setShowLayoutViews] = useState(false);
+
+  const { riveFile: bgFile } = useRiveFile(
+    require('../../assets/rive/bouncing_ball.riv')
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* Background RiveView — always running (Fit.Cover) */}
+      {bgFile && (
+        <RiveView
+          file={bgFile}
+          fit={Fit.Cover}
+          autoPlay
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+
+      <ScrollView
+        style={styles.overlay}
+        contentContainerStyle={styles.overlayContent}
+      >
+        <Text style={styles.title}>Issue #206</Text>
+        <Text style={styles.subtitle}>
+          Fit.Layout too big on Android when background RiveView is active.
+          Restart app (not reload) to re-test — repro rate ~50%.
+        </Text>
+
+        <Pressable
+          style={styles.button}
+          onPress={() => setShowLayoutViews((v) => !v)}
+        >
+          <Text style={styles.buttonText}>
+            {showLayoutViews ? 'Hide' : 'Show'} Layout Views
+          </Text>
+        </Pressable>
+
+        {showLayoutViews && (
+          <View style={styles.fields}>
+            <LayoutBox label="Layout View 1" />
+            <LayoutBox label="Layout View 2" />
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+Issue206Page.metadata = {
+  name: 'Issue #206',
+  description:
+    '[Android] Fit.Layout too big when background RiveView is active',
+} satisfies Metadata;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0c1027',
+  },
+  overlay: {
+    flex: 1,
+  },
+  overlayContent: {
+    padding: 24,
+    paddingTop: 60,
+  },
+  title: {
+    color: '#fff',
+    fontSize: 28,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  subtitle: {
+    color: '#94A3B8',
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  button: {
+    backgroundColor: '#443ABC',
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    alignSelf: 'center',
+    marginBottom: 24,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  fields: {
+    gap: 16,
+  },
+  layoutBox: {
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+    overflow: 'hidden',
+  },
+  boxLabel: {
+    color: '#fff',
+    fontSize: 12,
+    padding: 8,
+    position: 'absolute',
+    zIndex: 1,
+    top: 0,
+    left: 0,
+  },
+  riveContainer: {
+    height: 120,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  riveLayout: {
+    width: '100%',
+    height: '100%',
+  },
+});