feat: add interactive scale factor controls to ResponsiveLayouts (#88)

Port scale factor controls from rive-react-native example for feature
parity.

Author: mfazekas

example/src/pages/ResponsiveLayouts.tsx

@@ -1,5 +1,18 @@
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import { Fit, RiveView, useRiveFile } from '@rive-app/react-native';
+import { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Button,
+  ActivityIndicator,
+  useWindowDimensions,
+} from 'react-native';
+import {
+  Fit,
+  RiveView,
+  useRiveFile,
+  type RiveViewRef,
+} from '@rive-app/react-native';
 import { type Metadata } from '../helpers/metadata';
 
 /**
@@ -11,6 +24,22 @@ export default function ResponsiveLayoutsExample() {
   const { riveFile, isLoading, error } = useRiveFile(
     require('../../assets/rive/layouts_demo.riv')
   );
+  const [scaleFactor, setScaleFactor] = useState(4.0);
+  const riveRef = useRef<RiveViewRef>(null);
+  const { width, height } = useWindowDimensions();
+
+  useEffect(() => {
+    riveRef.current?.playIfNeeded();
+  }, [width, height]);
+
+  const increaseScale = () => {
+    setScaleFactor((prev) => prev + 0.5);
+    riveRef.current?.playIfNeeded();
+  };
+  const decreaseScale = () => {
+    setScaleFactor((prev) => Math.max(0.5, prev - 0.5));
+    riveRef.current?.playIfNeeded();
+  };
 
   return (
     <View style={styles.container}>
@@ -20,36 +49,64 @@ export default function ResponsiveLayoutsExample() {
         <Text style={styles.errorText}>{error}</Text>
       ) : riveFile ? (
         <RiveView
+          hybridRef={{ f: (ref) => (riveRef.current = ref) }}
           file={riveFile}
           fit={Fit.Layout}
-          layoutScaleFactor={1} // adjust the layout scale factor to control the layout scale
+          layoutScaleFactor={scaleFactor}
           style={styles.rive}
+          autoPlay={true}
         />
       ) : null}
+      <View style={styles.controls}>
+        <Text style={styles.label}>Layout Scale Factor</Text>
+        <View style={styles.scaleControls}>
+          <Button title="-" onPress={decreaseScale} />
+          <View style={styles.scaleText}>
+            <Text>{scaleFactor.toFixed(1)}x</Text>
+          </View>
+          <Button title="+" onPress={increaseScale} />
+        </View>
+      </View>
     </View>
   );
 }
 
+ResponsiveLayoutsExample.metadata = {
+  name: 'Responsive Layouts',
+  description: 'Interactive layout scale factor controls',
+} satisfies Metadata;
+
 const styles = StyleSheet.create({
-  // Adjust the container size and the layout will adjust based on the .riv file layout rules
   container: {
-    width: '100%',
-    height: '100%',
+    flex: 1,
   },
   rive: {
-    justifyContent: 'center',
-    alignItems: 'center',
     width: '100%',
-    height: '100%',
+    flex: 1,
+  },
+  controls: {
+    padding: 16,
+    alignItems: 'center',
+  },
+  scaleControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 16,
+    gap: 16,
+  },
+  scaleText: {
+    minWidth: 50,
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '500',
+    marginTop: 16,
   },
   errorText: {
     color: 'red',
     textAlign: 'center',
     padding: 20,
+    flex: 1,
   },
 });
-
-ResponsiveLayoutsExample.metadata = {
-  name: 'Responsive Layouts',
-  description: 'Sample .riv file with responsive layouts',
-} satisfies Metadata;

expo-example/app.json

@@ -3,7 +3,7 @@
     "name": "expo-example",
     "slug": "expo-example",
     "version": "1.0.0",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "expoexample",
     "userInterfaceStyle": "automatic",
@@ -40,6 +40,12 @@
             "backgroundColor": "#000000"
           }
         }
+      ],
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
       ]
     ],
     "experiments": {

expo-example/package.json

@@ -24,6 +24,7 @@
     "expo-image": "~3.0.10",
     "expo-linking": "~8.0.8",
     "expo-router": "~6.0.13",
+    "expo-screen-orientation": "~9.0.8",
     "expo-splash-screen": "~31.0.10",
     "expo-status-bar": "~3.0.8",
     "expo-symbols": "~1.0.7",

yarn.lock

@@ -8234,6 +8234,7 @@ __metadata:
     expo-image: ~3.0.10
     expo-linking: ~8.0.8
     expo-router: ~6.0.13
+    expo-screen-orientation: ~9.0.8
     expo-splash-screen: ~31.0.10
     expo-status-bar: ~3.0.8
     expo-symbols: ~1.0.7
@@ -8412,6 +8413,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-screen-orientation@npm:~9.0.8":
+  version: 9.0.8
+  resolution: "expo-screen-orientation@npm:9.0.8"
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 9971094875bd8756bfa16a88f6a85ef7661e284ffa85a8a415fcb359f3571d2c69ea341edbf6d844dbb007e035bed13c3be0a0c20d569f10048ff5e46683ebc6
+  languageName: node
+  linkType: hard
+
 "expo-server@npm:^1.0.3, expo-server@npm:^1.0.4":
   version: 1.0.4
   resolution: "expo-server@npm:1.0.4"