Animations get stuck inside a FlastList

[Nezz]

Description

I noticed an issue where animations get stuck when used inside a FlatList. This did not happen with the previous SDK.

Provide a Repro

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

Source .riv/.rev file

Found in the repro

Expected behavior

There should be no stuck animations

Screenshots

Actual behaviour:

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-02-27.at.23.03.30.mov

Device & Versions (please complete the following information)

• Device: iPhone 17 Pro, but also in simulator
• OS: iOS 26.2
• React Native Version: 0.83.2 and 0.81.5
• Expo Version (if applicable): 54 and 55

Additional context

[mfazekas]

@Nezz which version of the previous sdk have you tested with?! I see the same issue, or similar issue I press A, the I go to H and press H when I go back to A the glow is still there.

legacy.mov

reproducer

/**
 * Reproducer for rive-nitro-react-native#164 — animations get stuck inside ScrollView.
 * Adapted from the nitro reproducer to use the legacy bridge API.
 */

import { useEffect, useRef, useState } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import Rive, {
  Fit,
  AutoBind,
  useRive,
  useRiveBoolean,
} from 'rive-react-native';

const BUTTONS = [
  { id: 'A', label: 'Button A' },
  { id: 'B', label: 'Button B' },
  { id: 'C', label: 'Button C' },
  { id: 'D', label: 'Button D' },
  { id: 'E', label: 'Button E' },
  { id: 'F', label: 'Button F' },
  { id: 'G', label: 'Button G' },
  { id: 'H', label: 'Button H' },
];

function RiveBorderButton({
  label,
  isFocused,
  onPress,
  itemWidth,
}: {
  label: string;
  isFocused: boolean;
  onPress: () => void;
  itemWidth: number | undefined;
}) {
  const [setRiveRef, riveRef] = useRive();
  const [, setIsFocused] = useRiveBoolean(riveRef, 'isFocused');

  useEffect(() => {
    console.log(
      `[164sv] ${label} setIsFocused(${isFocused}) ref=${riveRef ? 'yes' : 'null'}`
    );
    setIsFocused(isFocused);
    riveRef?.play();
  }, [isFocused, setIsFocused, riveRef, label]);

  return (
    <Pressable onPress={onPress}>
      <View
        style={[styles.wrapper, itemWidth ? { width: itemWidth } : undefined]}
      >
        <Rive
          ref={setRiveRef}
          url="https://dh8dcfhaxrjo9.cloudfront.net/Rive/GradientBorder.riv"
          autoplay
          fit={Fit.Layout}
          style={styles.riveLayer}
          dataBinding={AutoBind(true)}
          pointerEvents="none"
        />
        <View
          style={[styles.inner, isFocused ? styles.innerFocused : undefined]}
        >
          <Text style={styles.label}>{label}</Text>
          <Text style={styles.state}>
            {isFocused ? 'Focused' : 'Not focused'}
          </Text>
        </View>
      </View>
    </Pressable>
  );
}

export default function ScrollViewStuck() {
  const [selected, setSelected] = useState('A');
  const [narrow, setNarrow] = useState(false);
  const scrollViewRef = useRef<ScrollView>(null);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>ScrollView Visibility Test</Text>
      <Text style={styles.subtitle}>
        Uses ScrollView (no recycling). If glow gets stuck here too, it's NOT
        about FlatList view recycling.
      </Text>

      <Pressable
        style={[styles.toggleBtn, narrow ? styles.toggleActive : undefined]}
        onPress={() => setNarrow((v) => !v)}
      >
        <Text style={styles.toggleText}>
          {narrow ? 'Narrow — only 1 visible' : 'Wide — both visible'}
        </Text>
      </Pressable>

      <View
        style={[
          styles.listContainer,
          narrow ? styles.listNarrow : undefined,
        ]}
      >
        <ScrollView
          ref={scrollViewRef}
          horizontal
          showsHorizontalScrollIndicator
          style={styles.list}
          contentContainerStyle={styles.listContent}
        >
          {BUTTONS.map((item, index) => (
            <View key={item.id} style={{ flexDirection: 'row' }}>
              {index > 0 && <View style={{ width: narrow ? 400 : 24 }} />}
              <RiveBorderButton
                label={item.label}
                isFocused={selected === item.id}
                onPress={() => setSelected(item.id)}
                itemWidth={narrow ? 250 : undefined}
              />
            </View>
          ))}
        </ScrollView>
      </View>

      <View style={styles.controlRow}>
        <Pressable
          style={styles.controlBtn}
          onPress={() =>
            scrollViewRef.current?.scrollTo({ x: 0, animated: true })
          }
        >
          <Text style={styles.controlText}>To start</Text>
        </Pressable>
        <Pressable
          style={styles.controlBtn}
          onPress={() =>
            scrollViewRef.current?.scrollToEnd({ animated: true })
          }
        >
          <Text style={styles.controlText}>To end</Text>
        </Pressable>
      </View>

      <View style={styles.controlRow}>
        <Pressable
          style={styles.selectBtn}
          onPress={() => {
            setSelected('A');
            scrollViewRef.current?.scrollTo({ x: 0, animated: true });
          }}
        >
          <Text style={styles.controlText}>Select A + Scroll</Text>
        </Pressable>
        <Pressable
          style={styles.selectBtn}
          onPress={() => {
            setSelected('H');
            scrollViewRef.current?.scrollToEnd({ animated: true });
          }}
        >
          <Text style={styles.controlText}>Select H + Scroll</Text>
        </Pressable>
      </View>

      <View style={styles.statusContainer}>
        <Text style={styles.statusText}>
          Selected: <Text style={styles.statusHighlight}>{selected}</Text>
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0c1027',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  title: {
    color: '#FFFFFF',
    fontSize: 22,
    fontWeight: '700',
    marginBottom: 8,
  },
  subtitle: {
    color: '#9CA3AF',
    fontSize: 14,
    marginBottom: 16,
    textAlign: 'center',
  },
  toggleBtn: {
    backgroundColor: '#1a1f3d',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#354190',
    marginBottom: 16,
  },
  toggleActive: {
    borderColor: '#FF4444',
    backgroundColor: '#2a1020',
  },
  toggleText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
  listContainer: {
    width: '100%',
    overflow: 'hidden',
  },
  listNarrow: {
    width: 200,
  },
  list: {
    flexGrow: 0,
  },
  listContent: {
    paddingHorizontal: 30,
    paddingVertical: 30,
  },
  wrapper: {
    borderRadius: 16,
    overflow: 'visible',
  },
  riveLayer: {
    position: 'absolute',
    top: -25,
    left: -25,
    right: -28,
    bottom: -28,
  },
  inner: {
    backgroundColor: '#141936',
    borderRadius: 15,
    borderWidth: 1,
    borderColor: '#354190',
    paddingVertical: 24,
    paddingHorizontal: 32,
    alignItems: 'center',
    gap: 8,
  },
  innerFocused: {
    borderColor: '#00B78B',
  },
  label: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
  state: {
    color: '#9CA3AF',
    fontSize: 12,
  },
  controlRow: {
    flexDirection: 'row',
    gap: 16,
    marginTop: 12,
  },
  controlBtn: {
    backgroundColor: '#1a1f3d',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#354190',
  },
  selectBtn: {
    backgroundColor: '#0d2a22',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#00B78B',
  },
  controlText: {
    color: '#FFFFFF',
    fontSize: 13,
    fontWeight: '600',
  },
  statusContainer: {
    marginTop: 20,
    padding: 16,
    backgroundColor: '#1a1f3d',
    borderRadius: 12,
  },
  statusText: {
    color: '#9CA3AF',
    fontSize: 14,
  },
  statusHighlight: {
    color: '#00B78B',
    fontWeight: '700',
  },
});

[Nezz]

We were on "rive-react-native": "9.8.0" previously. However, we did not use a ViewModel there:

  const riveRef = useRef<RiveRef>(null);

  useEffect(() => {
    riveRef.current?.setInputState('State', 'isFocused', isFocused);
  }, [isFocused]);

  return 
      <Rive
        url="https://dh8dcfhaxrjo9.cloudfront.net/Rive/Border.riv"
        autoplay
        fit={Fit.Layout}
        style={styles.riveAnimation}
        ref={riveRef}
      />

I made the switch due to the suggestion here:
#161 (comment)

[Nezz]

I tried using setBooleanInputValue with "@rive-app/react-native": "0.2.3" and that had the same issue. The latest version isn't building currently so I couldn't check that.

[Nezz]

There is also some kind of related issue where not only does the animation get "stuck" when it should be deactivated, but it also gets bigger than it actually should be:

I think this is caused by us reducing the size of the tile when it's deselected.