fix: handle useViewModelInstance error in examples, fix harness test assertion

Author: mfazekas

example/__tests__/hooks.harness.tsx

@@ -26,10 +26,11 @@ type UseRiveNumberContext = {
   value: number | undefined;
   error: Error | null;
   setValue: ((v: number) => void) | null;
+  renderValues: (number | undefined)[];
 };
 
 function createUseRiveNumberContext(): UseRiveNumberContext {
-  return { value: undefined, error: null, setValue: null };
+  return { value: undefined, error: null, setValue: null, renderValues: [] };
 }
 
 type UseViewModelInstanceContext = {
@@ -50,6 +51,8 @@ function UseRiveNumberTestComponent({
 }) {
   const { value, setValue, error } = useRiveNumber('health', instance);
 
+  context.renderValues.push(value);
+
   useEffect(() => {
     context.value = value;
     context.error = error;
@@ -105,13 +108,13 @@ describe('useRiveNumber Hook', () => {
 
     const context = createUseRiveNumberContext();
 
-    // Value must start undefined — not synchronously read from property.value
-    expect(context.value).toBeUndefined();
-
     await render(
       <UseRiveNumberTestComponent instance={instance} context={context} />
     );
 
+    // First render must produce undefined — not a synchronous read from property.value
+    expect(context.renderValues[0]).toBeUndefined();
+
     // After listener fires, value should be a number
     await waitFor(
       () => {

example/src/demos/DataBindingArtboardsExample.tsx

@@ -78,7 +78,11 @@ function ArtboardSwapper({
   mainFile: RiveFile;
   assetsFile: RiveFile;
 }) {
-  const { instance } = useViewModelInstance(mainFile);
+  const { instance, error } = useViewModelInstance(mainFile);
+
+  if (error) {
+    console.error(error.message);
+  }
   const [currentArtboard, setCurrentArtboard] = useState<string>('Dragon');
   const initializedRef = useRef(false);
 

example/src/exercisers/MenuListExample.tsx

@@ -41,10 +41,6 @@ export default function MenuListExample() {
 function MenuList({ file }: { file: RiveFile }) {
   const { instance } = useViewModelInstance(file, { required: true });
 
-  if (!instance) {
-    return <ActivityIndicator size="large" color="#007AFF" />;
-  }
-
   return <MenuListContent file={file} instance={instance} />;
 }
 

example/src/exercisers/NestedViewModelExample.tsx

@@ -38,7 +38,12 @@ export default function NestedViewModelExample() {
 }
 
 function WithViewModelSetup({ file }: { file: RiveFile }) {
-  const { instance } = useViewModelInstance(file);
+  const { instance, error } = useViewModelInstance(file);
+
+  if (error) {
+    console.error(error.message);
+    return null;
+  }
 
   if (!instance) {
     return <ActivityIndicator size="large" color="#0000ff" />;

example/src/exercisers/RiveDataBindingExample.tsx

@@ -35,7 +35,12 @@ export default function WithRiveFile() {
 }
 
 function WithViewModelSetup({ file }: { file: RiveFile }) {
-  const { instance } = useViewModelInstance(file);
+  const { instance, error } = useViewModelInstance(file);
+
+  if (error) {
+    console.error(error.message);
+    return null;
+  }
 
   if (!instance) {
     return <ActivityIndicator size="large" color="#0000ff" />;