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),
}}
/>

))}


))}

);
};

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}

);
};

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>
  );
};