Animated.loop cause Flatlist onEndReached not trigger.

[sbin1211]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

when i try to implement the infinite scroll using Flatlist while my page has the animated.loop animation. the onEndReached will not trigger. react-native-native-web@0.19 has this issue but react-native-web@0.18 is okay

see the video.

Screen.Recording.2023-08-03.at.11.29.50.mov

Expected behavior

Flatlist's onEndReached event will trigger.

Steps to reproduce

package version: react-native-web@0.19

1. when page loaded, click the "Add Data" button to load data into Flatlist.
2. scroll the Flatlist, you can only scroll to the first 10 items and onEndReached can not trigger.
3. click the "remove aniamtion" button, and scroll the flatlist, now okay and onEndReached trigger.

import React from "react";
import {
  Pressable,
  FlatList,
  StyleSheet,
  Text,
  View,
  Animated
} from "react-native";

const renderMemberItem = ({ item, index }) => {
  return <Text style={{ marginVertical: 50 }}>{item.text}</Text>;
};
function App() {
  const rippleAnim = React.useRef(new Animated.Value(0)).current;

  const [data, setData] = React.useState([]);
  const [animate, setAnimate] = React.useState(true);
  React.useEffect(() => {
    if (!animate) {
      return;
    }
    const animated = Animated.loop(
      Animated.sequence([
        Animated.timing(rippleAnim, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: true
        }),
        Animated.timing(rippleAnim, {
          toValue: 0,
          duration: 1500,
          useNativeDriver: true
        })
      ])
    );
    animated.start();

    return () => {
      animated && animated.stop();
    };
  }, [animate, rippleAnim]);
  return (
    <View style={styles.app}>
      <FlatList
        scrollEventThrottle={16}
        onScroll={() => {
          console.log("onScroll");
        }}
        style={{ height: 200, backgroundColor: "#ff0" }}
        data={data}
        onEndReached={() => {
          alert("onEndReach");
        }}
        renderItem={renderMemberItem}
      />
      <Pressable
        onPress={() => {
          setData(mockData());
        }}
        style={buttonStyles.button}
      >
        <Text style={buttonStyles.text}>Add Data</Text>
      </Pressable>
      <Pressable
        onPress={() => {
          setAnimate(false);
        }}
        style={buttonStyles.button}
      >
        <Text style={buttonStyles.text}>Remove Animated Loop</Text>
      </Pressable>
      <Animated.View
        style={[
          { backgroundColor: "red", width: 10, height: 10 },
          {
            transform: [
              {
                translateX: rippleAnim.interpolate({
                  inputRange: [0, 0.5, 1],
                  outputRange: [0, -50, 50],
                  extrapolate: "clamp"
                })
              }
            ]
          }
        ]}
      />
    </View>
  );
}

const mockData = () => {
  const d = [];
  for (let i = 0; i < 20; i++) {
    d.push({ text: "text " + i, key: i });
  }
  return d;
};
const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  logo: {
    height: 80
  },
  header: {
    padding: 20
  },
  title: {
    fontWeight: "bold",
    fontSize: "1.5rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  text: {
    lineHeight: "1.5em",
    fontSize: "1.125rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  link: {
    color: "#1B95E0"
  },
  code: {
    fontFamily: "monospace, monospace"
  }
});

const buttonStyles = StyleSheet.create({
  button: {
    backgroundColor: "#2196F3",
    borderRadius: 2
  },
  text: {
    color: "#fff",
    fontWeight: "500",
    padding: 8,
    textAlign: "center",
    textTransform: "uppercase"
  }
});

export default App;

Test case

https://codesandbox.io/s/peaceful-bouman-wtw5cj?file=/src/App.js:4259-4271

Additional comments

No response

[necolas]

The web fork of Animated is no longer being maintained, but updating it is blocked on this React Native issue that will allow RN Web to install the same Animated package used in RN. You should comment there facebook/react-native#35263