Scrolling Freezes When Rive Component Is Off-Screen in iOS Simulator

Description

When using a Rive component inside a ScrollView, scrolling performance significantly degrades once the animation moves outside the viewport. If you initiate a scroll while the animation is off-screen, the main thread appears to freeze for approximately one second. This leads to dropped frames and a temporarily unresponsive app.

During testing, I discovered that this issue occurs only in the iOS simulator. While this provides a potential workaround for real devices, the problem is still present in the simulator, and I wanted to document it properly. Since I’ve already created a reproduction project, I figured it would be useful to report the issue.

Provide a Repro

import { StyleSheet, Text, ScrollView } from "react-native";

import Rive from "rive-react-native";

export default function HomeScreen() {
  const textsArray = Array.from({ length: 300 }, (_, index) => index + 1);

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
      contentInsetAdjustmentBehavior="automatic"
    >
      <Rive resourceName="flying_car" style={{ width: 400, height: 400 }} />
      {textsArray.map((item) => (
        <Text key={item}>This is text {item}</Text>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    backgroundColor: "orange",
  },
});

I've also made a demo project: https://github.com/BakkerTom/rive-bug-demo

Source .riv/.rev file

In the example I used a community file, but I've tested with multiple .riv files both embedded in the app and via CDN. The issue appears in all situations.

Expected behavior

Scrolling performance should remain smooth, both when the animation is visible and when it has scrolled out of view.

Screenshots

https://github.com/user-attachments/assets/9a56def2-273f-48a3-a6d7-4160ba5844d4

Device & Versions (please complete the following information)

• Device: iOS Simulator
• OS: iOS 18.0

Additional context

I recorded a trace using Instruments while scrolling through the interface:

Rive Bug Trace.trace.zip

Start with the provided ScrollView/Rive reproduction and the linked rive-bug-demo project in the iOS 18.0 Simulator. Review the attached Instruments trace while reproducing the off-screen scrolling freeze, then locate the relevant React Native or iOS rendering entry point. Done means scrolling remains responsive when the animation is outside the viewport, with the behavior checked against the reproduction.