Description
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: