test(ios): failing harness test for blank RiveView after Fabric recreates the view

[mfazekas]

Adds a harness test for the blank-view bug reported in #365. Fabric deletes a component view when its subtree stops being mounted — display: 'none', or a react-native-screens screen frozen by enableFreeze(true) — and recreates it from the same, unchanged ShadowNode. On iOS the recreated view is never configured, because nitro's isDirty prop flags live on the shared Props object and the first view instance already consumed them: no file, blank view forever, and play() on the ref JS still holds is a no-op.

The test fails on iOS today and passes on Android, which doesn't recreate the view. The fix is the nitro 0.37.0 bump (mrousavy/nitro#1503 + #1506 + #1510 replace the isDirty scheme with an old/new props diff), landing in a follow-up commit here.

On the shape of the test: it toggles display: 'none' on the parent rather than pulling in react-freeze, since that produces the same delete/recreate with no extra dependency. The oracle needed some care — the harness has no screenshot API, and the stale ref still answers getViewModelInstance(), awaitViewReady() and play() quite happily on the broken build. What does discriminate is a trigger fired on the bound view model instance: it only reaches its listener while a live view advances the state machine. The same assertion runs before the hide/show as a control, so a failure means the view stopped working rather than the probe never having worked.

Verified by rebuilding and reinstalling the app for each arm: iOS without the fix fails, iOS with #365's patch applied passes, Android passes.

Manual reproducer page (drop into any new-arch app)

Both toggles produce the same Fabric delete/recreate: react-freeze is what enableFreeze(true) uses, and display: 'none' needs no dependency at all. Hit Hide + Show — on an unpatched build the box goes solid black and stays there, hybridRef fires never increments, and play() resolves without doing anything.

import { useRef, useState } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
// ships with react-native-screens
import { Freeze } from 'react-freeze';
import {
  RiveView,
  useRiveFile,
  Fit,
  type RiveViewRef,
} from '@rive-app/react-native';

type Mode = 'freeze' | 'display';

export default function FreezeRemountBlank() {
  const [mode, setMode] = useState<Mode>('freeze');
  const [hidden, setHidden] = useState(false);
  const [refFires, setRefFires] = useState(0);
  const [playResult, setPlayResult] = useState('—');
  const viewRef = useRef<RiveViewRef | null>(null);
  const { riveFile, error } = useRiveFile(require('./rewards.riv'));

  const rive = riveFile && (
    <RiveView
      file={riveFile}
      autoPlay={true}
      fit={Fit.Cover}
      style={styles.rive}
      hybridRef={{
        f: (ref) => {
          viewRef.current = ref;
          setRefFires((n) => n + 1);
        },
      }}
    />
  );

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        {(['freeze', 'display'] as Mode[]).map((m) => (
          <Pressable
            key={m}
            onPress={() => {
              setHidden(false);
              setMode(m);
            }}
            style={[styles.button, mode === m && styles.buttonActive]}
          >
            <Text style={styles.buttonText}>
              {m === 'freeze' ? 'react-freeze' : 'display:none'}
            </Text>
          </Pressable>
        ))}
      </View>

      <View style={styles.row}>
        <Pressable onPress={() => setHidden((h) => !h)} style={styles.button}>
          <Text style={styles.buttonText}>{hidden ? 'Show' : 'Hide'}</Text>
        </Pressable>
        <Pressable
          onPress={() => {
            setHidden(true);
            setTimeout(() => setHidden(false), 300);
          }}
          style={styles.button}
        >
          <Text style={styles.buttonText}>Hide + Show</Text>
        </Pressable>
        <Pressable
          onPress={() => {
            setPlayResult('pending');
            viewRef.current
              ?.play()
              .then(() => setPlayResult('resolved'))
              .catch((e: unknown) => setPlayResult(`rejected: ${String(e)}`));
          }}
          style={styles.button}
        >
          <Text style={styles.buttonText}>play()</Text>
        </Pressable>
      </View>

      <Text style={styles.status}>
        hidden: {String(hidden)} · hybridRef fires: {refFires} · play():{' '}
        {playResult}
      </Text>
      {error != null && (
        <Text style={styles.status}>Error: {String(error)}</Text>
      )}

      <View style={styles.stage}>
        {mode === 'freeze' ? (
          <Freeze freeze={hidden}>{rive}</Freeze>
        ) : (
          <View style={hidden ? styles.hiddenBox : styles.box}>{rive}</View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 12 },
  row: { flexDirection: 'row', gap: 8, marginBottom: 8 },
  button: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    backgroundColor: '#444',
  },
  buttonActive: { backgroundColor: '#0a7' },
  buttonText: { color: '#fff', fontWeight: '600' },
  status: { marginBottom: 8, color: '#333' },
  stage: { width: 260, height: 260, backgroundColor: '#000' },
  box: { flex: 1 },
  hiddenBox: { flex: 1, display: 'none' },
  rive: { flex: 1 },
});