refactor: streamline QuickStart example with useViewModelInstance and functional updater

Author: mfazekas

example/src/pages/QuickStart.tsx

@@ -6,7 +6,6 @@
   - Data Binding: https://rive.app/docs/runtimes/data-binding
 */
 
-import { useEffect, useMemo } from 'react';
 import { Button, View, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
@@ -15,8 +14,8 @@ import {
   useRiveFile,
   useRiveNumber,
   useRiveTrigger,
+  useViewModelInstance,
   Fit,
-  DataBindMode,
 } from '@rive-app/react-native';
 import type { Metadata } from '../helpers/metadata';
 
@@ -25,31 +24,21 @@ export default function QuickStart() {
     require('../../assets/rive/quick_start.riv')
   );
   const { riveViewRef, setHybridRef } = useRive();
-  const viewModelInstance = useMemo(
-    () => riveViewRef?.getViewModelInstance(),
-    [riveViewRef]
-  );
+  const viewModelInstance = useViewModelInstance(riveFile, {
+    onInit: (vmi) => (vmi.numberProperty('health')!.value = 9),
+  });
 
-  const { value: health, setValue: setHealth } = useRiveNumber(
-    'health',
-    viewModelInstance
-  );
+  const { setValue: setHealth } = useRiveNumber('health', viewModelInstance);
 
   const { trigger: gameOverTrigger } = useRiveTrigger(
     'gameOver',
     viewModelInstance,
     { onTrigger: () => console.log('Game Over Triggered') }
   );
 
-  useEffect(() => {
-    setHealth(9);
-  }, [setHealth]);
-
   const handleTakeDamage = () => {
-    if (health !== undefined) {
-      setHealth(health - 7);
-      riveViewRef!.play();
-    }
+    setHealth((h) => (h ?? 0) - 7);
+    riveViewRef!.play();
   };
 
   const handleMaxHealth = () => {
@@ -66,14 +55,14 @@ export default function QuickStart() {
   return (
     <SafeAreaView style={styles.safeAreaViewContainer}>
       <View style={styles.container}>
-        {riveFile && (
+        {riveFile && viewModelInstance && (
           <RiveView
             hybridRef={setHybridRef}
             file={riveFile}
             fit={Fit.Layout}
             style={styles.rive}
             autoPlay={true}
-            dataBind={DataBindMode.Auto}
+            dataBind={viewModelInstance}
           />
         )}
       </View>