fix: make useRiveProperty setValue a no-op before instance is ready

[mfazekas]

Fixes #141 (hooks level)

useRiveProperty's setValue was throwing an error when called before the ViewModelInstance loaded. This is a common React pattern — useEffect fires on mount before async data is available.

Changed to silent no-op, as setValue does changes once the instance is available, no internal queue needed — React's dependency array handles it:

const { setValue } = useRiveString('text', instance);

// setValue is in deps — React re-fires this effect when instance loads
// and setValue's identity changes (new property → new useCallback ref)
useEffect(() => {
  setValue('Hello');
}, [setValue]);

Reproducer

import { useEffect, useMemo, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import {
  RiveView,
  Fit,
  useRiveFile,
  useRive,
  useRiveString,
} from '@rive-app/react-native';

export default function Issue141Reproducer() {
  const { riveViewRef, setHybridRef } = useRive();
  const { riveFile, isLoading } = useRiveFile(
    require('./font_fallback.riv')
  );
  const instance = useMemo(
    () => riveFile?.defaultArtboardViewModel()?.createDefaultInstance(),
    [riveFile]
  );

  const {
    value: currentText,
    setValue: setText,
    error: textError,
  } = useRiveString('text', instance);

  const [errorLog, setErrorLog] = useState<string[]>([]);

  useEffect(() => {
    if (textError) {
      setErrorLog((prev) => [
        ...prev,
        `[${new Date().toLocaleTimeString()}] ${textError.message}`,
      ]);
    }
  }, [textError]);

  // This fires on mount before the file is loaded — triggers the error
  useEffect(() => {
    setText('Hello from useEffect');
    riveViewRef?.playIfNeeded();
  }, [setText, riveViewRef]);

  return (
    <View style={styles.container}>
      <View style={styles.info}>
        <Text style={styles.title}>Issue #141 — Hooks Level</Text>
        <Text style={styles.description}>
          setText() is called in a useEffect on mount. Since useRiveFile is
          async, instance is undefined on first render → useRiveString's
          setValue fires an error.
        </Text>
        <Text>Loading: {isLoading ? 'yes' : 'no'}</Text>
        <Text>Instance: {instance ? 'ready' : 'undefined'}</Text>
        <Text>Current text: {currentText ?? '(none)'}</Text>
        <Text style={textError && styles.errorText}>
          Error: {textError ? textError.message : '(none)'}
        </Text>
      </View>

      <View style={styles.riveContainer}>
        {riveFile && instance ? (
          <RiveView
            style={styles.rive}
            autoPlay
            dataBind={instance}
            fit={Fit.Contain}
            file={riveFile}
            hybridRef={setHybridRef}
          />
        ) : (
          <Text>{isLoading ? 'Loading...' : 'No file'}</Text>
        )}
      </View>

      <View style={styles.logContainer}>
        <Text style={styles.logTitle}>Error Log</Text>
        {errorLog.length === 0 ? (
          <Text style={styles.logPlaceholder}>No errors recorded</Text>
        ) : (
          errorLog.map((entry, i) => (
            <Text key={i} style={styles.logEntry}>{entry}</Text>
          ))
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  info: { padding: 16, gap: 6 },
  title: { fontSize: 18, fontWeight: '700' },
  description: { fontSize: 13, color: '#666', lineHeight: 20 },
  errorText: { color: '#FF3B30' },
  riveContainer: {
    height: 200, backgroundColor: '#f0f0f0',
    justifyContent: 'center', alignItems: 'center',
  },
  rive: { width: '100%', height: '100%' },
  logContainer: {
    flex: 1, margin: 16, backgroundColor: '#1a1a2e',
    borderRadius: 10, padding: 12,
  },
  logTitle: {
    color: '#888', fontSize: 12, fontWeight: '600',
    textTransform: 'uppercase', marginBottom: 8,
  },
  logPlaceholder: { color: '#666', fontSize: 12, fontFamily: 'monospace' },
  logEntry: { color: '#FF6B6B', fontSize: 11, fontFamily: 'monospace' },
});

[HayesGordon]

What about the scenario where the property is in fact invalid?

[mfazekas]

What about the scenario where the property is in fact invalid?

There is an useEffect on line 63 covering that.

rive-nitro-react-native/src/hooks/useRiveProperty.ts

Lines 63 to 69 in 4a5af1b

	useEffect(() => {
	if (viewModelInstance && !property) {
	setError(
	new Error(`Property "${path}" not found in the ViewModel instance`)
	);
	}
	}, [viewModelInstance, property, path]);

And I've added a test case covering this:

rive-nitro-react-native/src/hooks/__tests__/useRiveProperty.test.ts

Lines 86 to 98 in 4a5af1b

	it('should return error when property is not found on a valid instance', () => {
	const mockInstance = createMockViewModelInstance({});
	const { result } = renderHook(() =>
	useRiveProperty<any, string>(mockInstance, 'nonexistent/path', {
	getProperty: (vmi, path) => (vmi as any).enumProperty(path),
	})
	);
	const [, , error] = result.current;
	expect(error).toBeInstanceOf(Error);
	expect(error?.message).toContain('nonexistent/path');
	});

[HayesGordon]

LGTM!