feat: add react-query + async APIs for exerciser

Add @tanstack/react-query for async ViewModel loading.
Switch to async APIs (defaultArtboardViewModelAsync,
createDefaultInstanceAsync). Fix prettier/lint warnings.
Keep manual boxing — auto-box requires RN 0.80+.

Author: mfazekas

example/package.json

@@ -18,6 +18,7 @@
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/native": "^7.1.9",
     "@react-navigation/stack": "^7.3.2",
+    "@tanstack/react-query": "^5.100.10",
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-native-gesture-handler": "2.29.1",

example/src/App.tsx

@@ -11,6 +11,7 @@ import {
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PagesList, type PageItem } from './PagesList';
 import { HomeMenu } from './shared/HomeMenu';
 
@@ -95,38 +96,42 @@ function HomeScreen({ navigation }: { navigation: any }) {
   );
 }
 
+const queryClient = new QueryClient();
+
 export default function App() {
   return (
-    <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          headerStyle: {
-            backgroundColor: '#323232',
-          },
-          headerTintColor: '#fff',
-          headerTitleStyle: {
-            fontWeight: 'bold',
-          },
-        }}
-      >
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            title: 'Rive Examples',
-            headerRight: HeaderMenuButton,
+    <QueryClientProvider client={queryClient}>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: '#323232',
+            },
+            headerTintColor: '#fff',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
           }}
-        />
-        {PagesList.map(({ id, component, name }) => (
+        >
           <Stack.Screen
-            key={id}
-            name={id}
-            component={component}
-            options={{ title: name }}
+            name="Home"
+            component={HomeScreen}
+            options={{
+              title: 'Rive Examples',
+              headerRight: HeaderMenuButton,
+            }}
           />
-        ))}
-      </Stack.Navigator>
-    </NavigationContainer>
+          {PagesList.map(({ id, component, name }) => (
+            <Stack.Screen
+              key={id}
+              name={id}
+              component={component}
+              options={{ title: name }}
+            />
+          ))}
+        </Stack.Navigator>
+      </NavigationContainer>
+    </QueryClientProvider>
   );
 }
 

example/src/exercisers/RiveToReactNativeExample.tsx

@@ -7,6 +7,7 @@ import {
   Switch,
 } from 'react-native';
 import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import Animated, {
   runOnUI,
   useSharedValue,
@@ -89,27 +90,31 @@ export default function RiveToReactNativeExample() {
 }
 
 function WithViewModelSetup({ file }: { file: RiveFile }) {
-  // eslint-disable-next-line @typescript-eslint/no-deprecated -- replaced with async API in next PR
-  const viewModel = useMemo(() => file.defaultArtboardViewModel(), [file]);
-  const instance = useMemo(
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    () => viewModel?.createDefaultInstance(),
-    [viewModel]
-  );
   const [useUIThread, setUseUIThread] = useState(true);
 
-  if (!instance || !viewModel) {
+  const { data: instance, error } = useQuery({
+    queryKey: ['bouncing-ball-instance', file],
+    queryFn: async () => {
+      const vm = await file.defaultArtboardViewModelAsync();
+      if (!vm) throw new Error('No view model found.');
+      const inst = await vm.createDefaultInstanceAsync();
+      if (!inst) throw new Error('Failed to create view model instance');
+      return inst;
+    },
+  });
+
+  if (error) {
     return (
       <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>
-          {!viewModel
-            ? 'No view model found.'
-            : 'Failed to create view model instance'}
-        </Text>
+        <Text style={styles.errorText}>{error.message}</Text>
       </View>
     );
   }
 
+  if (!instance) {
+    return <ActivityIndicator size="large" color="#0000ff" />;
+  }
+
   return (
     <BouncingBallTracker
       instance={instance}

yarn.lock

@@ -5563,6 +5563,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.100.10":
+  version: 5.100.10
+  resolution: "@tanstack/query-core@npm:5.100.10"
+  checksum: d19351b858bd758ad8a860e9333c9b78c1ec4a564b867f592046a60cf8421580d8aefcb3dfc3c67d59c5f8cf3dee9a3074ac07204e37ec54012fd912246d0dbd
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.100.10":
+  version: 5.100.10
+  resolution: "@tanstack/react-query@npm:5.100.10"
+  dependencies:
+    "@tanstack/query-core": 5.100.10
+  peerDependencies:
+    react: ^18 || ^19
+  checksum: 90ceb6cafa573a081bcaf03e727ab99e68c71464dc65cede626c3c10c848d136f33ffb6523a04c477448d46d320b202b5d93fbb6f1cb4bef27fd3af3ff43cbee
+  languageName: node
+  linkType: hard
+
 "@testing-library/react-hooks@npm:^8.0.1":
   version: 8.0.1
   resolution: "@testing-library/react-hooks@npm:8.0.1"
@@ -16354,6 +16372,7 @@ __metadata:
     "@react-native/typescript-config": 0.79.2
     "@react-navigation/native": ^7.1.9
     "@react-navigation/stack": ^7.3.2
+    "@tanstack/react-query": ^5.100.10
     "@types/deep-equal": ^1.0.4
     "@types/react": ^19.0.0
     babel-plugin-react-compiler: ^1.0.0