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

[BakkerTom]

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

RocketSim_Recording_iPhone_16_6.1_2025-02-26_14.10.52.mp4

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

[LockedDB]

I came here to report the same thing but after upgrading to "8.4.0" the issue was solved for me. 👍

[BakkerTom]

I forgot to mention it in my original issue, but I used version 8.4.0 there.

"rive-react-native@npm:^8.4.0":
  version: 8.4.0
  resolution: "rive-react-native@npm:8.4.0"
  peerDependencies:
    react: "*"
    react-native: "*"
  checksum: 10c0/06162c83366b52884b0aece67bd2752a2be30ee299be478e2579cac80797f33e3bd7234092b529c0ad566920fb3d1ae5d7dc66ae163113b565fff9584485d076
  languageName: node
  linkType: hard