Animation stutters when UI Thread is under heavy load

[Jianlong-Nie]

Description

When the JS thread is under heavy load during app initialization, the Rive animation visibly stutters/glitches. This suggests the animation tick is running on (or being blocked by) the JS thread.

Steps to Reproduce

1. Use a Rive animation as a splash screen in a React Native (Expo) app
2. Log in as a user that triggers a large amount of JS work on startup (e.g., a creator account that loads many queries, contexts, and subscriptions)
3. Observe the splash screen Rive animation

Expected Behavior

The animation should play smoothly regardless of JS thread load, as the rendering/animation tick should be handled natively.

Actual Behavior

The animation stutters and glitches when the JS thread is busy processing initialization work.

Environment

• @rive-app/react-native (rive-nitro-react-native)
• React Native (Expo)
• iOS

Additional Context

Comparing with Lottie (lottie-react-native), which runs its animation engine natively and is not affected by JS thread load, the Rive animation appears to be at least partially dependent on the JS thread for its animation tick.

Is there a way to ensure the animation runs entirely on the native/UI thread, decoupled from JS thread activity? Any workaround or roadmap item for this would be appreciated.

MicrosoftTeams-video.-.2026-02-12T170530.326.mp4

[mfazekas]

Thanks for the bug report!

I tried to reproduce this with a reproducer that blocks the JS thread for ~60s while a Rive file with endless animation plays. The vehicles kept animating smoothly even while JS was completely blocked.

js-thread-rive.mov

Reproducer code

import { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { RiveView, Fit, useRiveFile, useRive } from '@rive-app/react-native';

const VEHICLES_URL = 'https://cdn.rive.app/animations/vehicles.riv';

export default function Issue159Page() {
  const { riveFile, isLoading, error } = useRiveFile(VEHICLES_URL);
  const { setHybridRef } = useRive();
  const [status, setStatus] = useState('idle');

  const blockJsThread = () => {
    setStatus('blocking (60s)...');
    setTimeout(() => {
      let round = 0;
      const totalRounds = 6;
      const blockRound = () => {
        round++;
        if (round > totalRounds) {
          setStatus('idle');
          return;
        }
        setStatus(`blocking round ${round}/${totalRounds}...`);
        setTimeout(() => {
          const end = Date.now() + 10000;
          while (Date.now() < end) {
            JSON.parse(JSON.stringify({ a: 'x'.repeat(10000) }));
          }
          blockRound();
        }, 1);
      };
      blockRound();
    }, 100);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>#159 — JS thread stutter</Text>
      <Text style={styles.subtitle}>
        Platform: {Platform.OS}
        {'\n'}Press button to block JS thread for ~60s (yields every 10s).
        {'\n'}Watch if the vehicles keep animating or freeze.
      </Text>
      <View style={styles.riveContainer}>
        {isLoading && (
          <ActivityIndicator size="large" color="#007AFF" style={StyleSheet.absoluteFillObject} />
        )}
        {error && <Text style={styles.errorText}>{error}</Text>}
        {riveFile && (
          <RiveView
            hybridRef={setHybridRef}
            file={riveFile}
            fit={Fit.Contain}
            autoPlay={true}
            style={StyleSheet.absoluteFillObject}
          />
        )}
      </View>
      <Pressable
        style={[styles.button, status !== 'idle' ? styles.blockingButton : styles.readyButton]}
        onPress={blockJsThread}
        disabled={status !== 'idle' || !riveFile}
      >
        <Text style={styles.buttonText}>
          {status !== 'idle' ? status : 'Block JS thread (60s)'}
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 16 },
  title: { fontSize: 20, fontWeight: 'bold', textAlign: 'center', marginTop: 8 },
  subtitle: { fontSize: 12, color: '#666', textAlign: 'center', marginTop: 4, marginBottom: 16 },
  riveContainer: { flex: 1, backgroundColor: '#f0f0f0', borderRadius: 12, overflow: 'hidden' },
  errorText: { color: 'red', textAlign: 'center', padding: 20 },
  button: { marginTop: 16, paddingVertical: 14, borderRadius: 10, alignItems: 'center' },
  readyButton: { backgroundColor: '#FF3B30' },
  blockingButton: { backgroundColor: '#999' },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

Feel free to use this reproducer as a base — if you can modify it to reproduce the stutter we can investigate. It's possible the heavy work in your case is blocking the main/UI thread as well, not just the JS thread.

[mfazekas]

Update: Tested blocking both the JS thread and the UI/main thread separately using a worklet-based reproducer.

Findings:

• Blocking JS thread only → Rive graphics keep animating smoothly, no stutter
• Blocking UI/main thread → Rive graphics freeze/stutter

This is expected — Rive's render loop is driven by CADisplayLink (iOS) / Choreographer (Android) on the main thread. If the main thread is congested, the animation will stall.

So the stutter you're seeing is likely caused by heavy work running on the main thread, not just the JS thread. If you can move that work off the main thread (e.g. to a background thread or worklet runtime), the animation should stay smooth.

ui-thread-rive.mov

Updated reproducer (tests both JS and UI thread blocking)

import { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { RiveView, Fit, useRiveFile, useRive } from '@rive-app/react-native';
import { scheduleOnUI } from 'react-native-worklets';

const VEHICLES_URL = 'https://cdn.rive.app/animations/vehicles.riv';

const JS_BLOCK_MS = 10_000;
const JS_ROUNDS = 6;

const UI_BLOCK_MS = 62;
const UI_GAP_MS = 50;
const UI_TOTAL_SECONDS = 60;

function spinFor(ms: number) {
  'worklet';
  const end = Date.now() + ms;
  while (Date.now() < end) {
    // burn CPU
  }
}

export default function Issue159Page() {
  const { riveFile, isLoading, error } = useRiveFile(VEHICLES_URL);
  const { setHybridRef } = useRive();
  const [status, setStatus] = useState('idle');

  const blockJsThread = () => {
    setStatus('JS blocking...');
    setTimeout(() => {
      let round = 0;
      const blockRound = () => {
        round++;
        if (round > JS_ROUNDS) {
          setStatus('idle');
          return;
        }
        setStatus(`JS round ${round}/${JS_ROUNDS}...`);
        setTimeout(() => {
          spinFor(JS_BLOCK_MS);
          blockRound();
        }, 1);
      };
      blockRound();
    }, 100);
  };

  const blockUiThread = () => {
    setStatus('UI blocking...');
    const totalBursts = Math.floor(
      (UI_TOTAL_SECONDS * 1000) / (UI_BLOCK_MS + UI_GAP_MS)
    );
    let burst = 0;
    const nextBurst = () => {
      burst++;
      if (burst > totalBursts) {
        setStatus('idle');
        return;
      }
      if (burst % 50 === 0) {
        const sec = Math.round((burst * (UI_BLOCK_MS + UI_GAP_MS)) / 1000);
        setStatus(`UI ${sec}s/${UI_TOTAL_SECONDS}s...`);
      }
      scheduleOnUI(() => {
        'worklet';
        spinFor(UI_BLOCK_MS);
      });
      setTimeout(nextBurst, UI_GAP_MS);
    };
    setTimeout(nextBurst, 100);
  };

  const blocking = status !== 'idle';

  return (
    <View style={styles.container}>
      <Text style={styles.title}>#159 — Thread stutter</Text>
      <Text style={styles.subtitle}>
        Platform: {Platform.OS}
        {'\n'}Block JS or UI thread for ~{UI_TOTAL_SECONDS}s.
        {'\n'}Watch if the vehicles keep animating or freeze.
      </Text>
      <View style={styles.riveContainer}>
        {isLoading && (
          <ActivityIndicator size="large" color="#007AFF" style={StyleSheet.absoluteFillObject} />
        )}
        {error && <Text style={styles.errorText}>{error}</Text>}
        {riveFile && (
          <RiveView
            hybridRef={setHybridRef}
            file={riveFile}
            fit={Fit.Contain}
            autoPlay={true}
            style={StyleSheet.absoluteFillObject}
          />
        )}
      </View>
      <View style={styles.buttonRow}>
        <Pressable
          style={[styles.button, styles.flex1, blocking ? styles.blockingButton : styles.jsButton]}
          onPress={blockJsThread}
          disabled={blocking || !riveFile}
        >
          <Text style={styles.buttonText}>
            {status.startsWith('JS') ? status : 'Block JS (60s)'}
          </Text>
        </Pressable>
        <Pressable
          style={[styles.button, styles.flex1, blocking ? styles.blockingButton : styles.uiButton]}
          onPress={blockUiThread}
          disabled={blocking || !riveFile}
        >
          <Text style={styles.buttonText}>
            {status.startsWith('UI') ? status : 'Block UI (60s)'}
          </Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 16 },
  title: { fontSize: 20, fontWeight: 'bold', textAlign: 'center', marginTop: 8 },
  subtitle: { fontSize: 12, color: '#666', textAlign: 'center', marginTop: 4, marginBottom: 16 },
  riveContainer: { flex: 1, backgroundColor: '#f0f0f0', borderRadius: 12, overflow: 'hidden' },
  errorText: { color: 'red', textAlign: 'center', padding: 20 },
  buttonRow: { flexDirection: 'row', gap: 8, marginTop: 16 },
  flex1: { flex: 1 },
  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center' },
  jsButton: { backgroundColor: '#FF3B30' },
  uiButton: { backgroundColor: '#FF9500' },
  blockingButton: { backgroundColor: '#999' },
  buttonText: { color: '#fff', fontSize: 14, fontWeight: '600' },
});

[mfazekas]

FWIW we're woking on a new iOS/android runtimes, and update rn bindings to use those. Those will doing the animations off the main thread, solving this case, but those are in experimental phase as of now.

[Jianlong-Nie]

FWIW we're woking on a new iOS/android runtimes, and update rn bindings to use those. Those will doing the animations off the main thread, solving this case, but those are in experimental phase as of now.

Thanks for the detailed investigation! That's really helpful.

Excited to hear about the new iOS/Android runtimes that move animations off the main thread. Do you have a rough timeline or ETA for when we could start testing it, even in an experimental/alpha form?