Marquee list is getting slows down in android and face crashes in production

[AkilUnik]

`import React, { memo } from "react"; import { Marquee } from "@animatereactnative/marquee"; import { Image, View } from "react-native"; import { hp } from "../../../utils/dimensions"; import { COLORS } from "../../../theme/color"; import Animated, { FadeInLeft, FadeInRight } from "react-native-reanimated"; import { ANIMIE_IMAGES } from "../../../assets/anime";

const MarqueeList = () => { const numRows = 4; const imagesPerRow = Math.ceil(ANIMIE_IMAGES.length / numRows);

const imageGroups = Array.from({ length: numRows }, (_, i) => ANIMIE_IMAGES.slice(i * imagesPerRow, (i + 1) * imagesPerRow - 1) );

return ( <View style={{ flex: 1, transform: [{ rotate: "170deg" }, { scale: -1 }], top: -hp(60), borderWidth: 0, borderColor: COLORS.purple, }} > {imageGroups.map((images, rowIndex) => ( <Marquee key={marquee-${rowIndex}} spacing={8} speed={0.4} style={{ marginTop: 12 }} reverse={rowIndex % 2 !== 0} > <View style={{ flexDirection: "row" }}> {images.map((image, index) => ( <Box key={box-${rowIndex}-${index}} size={170} spacing={10}> <Image entering={(rowIndex % 2 === 0 ? FadeInRight : FadeInLeft) .duration(500) .delay(300 * (rowIndex + 1) + Math.random() * 100)} source={image} style={{ width: "100%", height: "100%", borderRadius: hp(10), }} /> </Box> ))} </View> </Marquee> ))} </View> ); };

const Box = ({ children, size = 200, spacing = 0 }) => { return ( <View style={{ width: hp(size), height: hp(size), marginRight: spacing, marginBottom: spacing, borderRadius: hp(10), justifyContent: "center", alignItems: "center", backgroundColor: COLORS.gray_800, }} > {children} </View> ); };

export default memo(MarqueeList); `

[raunaq17]

@AkilUnik Did you find a fix? I am facing similar issues. The animations seem to have slowed down and become a bit laggy. i recently upgraded to react native version 0.76 @catalinmiron Any idea about this?

[catalinmiron]

I'd like to see a reproducible step.

What version of marquee are you using?

[raunaq17]

I'd like to see a reproducible step.

What version of marquee are you using?

@catalinmiron I am currently using version 5.0.1 React native version-0.76 (new architecture)

const MarqueeExample = (props: MarqueeExampleProps) => {
  const {firstRow, secondRow} = props;
  const onPressCalled = () => {
    console.log('Marquee pressed');
  };
  if (!firstRow?.length && !secondRow?.length) return null;
  return (
    <View style={styles.container}>
      <Pressable onPress={onPressCalled} style={styles.marqueeContainer}>
        <Marquee speed={SPEED} withGesture={false}>
          <View style={styles.itemRow}>
            {firstRow.map((item) => (
              <View key={item.id} style={styles.item}>
                <Text style={styles.itemText}>{item.name}</Text>
                <Text style={styles.itemCount}>{item.count}</Text>
              </View>
            ))}
          </View>
        </Marquee>
        <Marquee speed={SPEED} withGesture={false}>
          <View style={styles.itemRow}>
            {secondRow.map((item) => (
              <View key={item.id} style={styles.item}>
                <Text style={styles.itemText}>{item.name}</Text>
                <Text style={styles.itemCount}>{item.count}</Text>
              </View>
            ))}
          </View>
        </Marquee>
      </Pressable>
    </View>
  );
};