Android animation only plays once at startup and then never again

[Nezz]

Description

We have an animation that's supposed to hide when another element in the list is selected. However, on Android the hiding only happens when the previous animation becomes visible.

Provide a Repro

https://github.com/Nezz/expo-repro/tree/repro/RiveAndroid

Source .riv/.rev file

Found in the repro. The rive file has a horizontal mirroring applied to it (scale X -100%) which seems to create this problem.

Expected behavior

The animation should keep playing around the selected button, but not buttons that aren't selected.

Screenshots

NotPlaying.mp4

Note how the first two buttons "glitch", then when I scroll the animation plays as elements render for the first time.

Device & Versions (please complete the following information)

• Device: Samsung Galaxy Fold 3, API 36 emulator
• OS: Android 15
• React Native Version: 0.83.2
• Expo Version (if applicable): 55

Additional context

[mfazekas]

As a workaround, try setting removeClippedSubviews={false} on your FlatList — this prevents Android from detaching/reattaching native views when they scroll offscreen, which appears to cause the Rive renderer to lose its layout state.

[Nezz]

I managed to repro it without having a FlatList:

Untitled.mov

Nezz/expo-repro@cd0a352

[mfazekas]

I managed to repro it without having a FlatList:

We investigated this on an emulator and found that the animation wasn't rendering at all (not freezing) — the RiveView with Fit.Layout needs a minimum width to render GradientBorder.riv.

With paddingHorizontal: 32, the wrapper is too narrow for the artboard's layout constraints. Adding minWidth to the wrapper fixes it:

- wrapper: { borderRadius: 16, overflow: 'visible' },
+ wrapper: { borderRadius: 16, overflow: 'visible', minWidth: 200 },

Could you confirm whether you're seeing the animation freeze mid-play or not appear at all after toggling isFocused?

[Nezz]

Ah indeed, it's a separate issue without the FlastList then. We don't have such min width issues in our real-world use cases.