I can’t figure out how to make a horizontal scrolling marquee that does not cause major performance issues. For example, it takes a full 5-10 seconds for form elements to come into focus when I select them, when I have this marquee running.

My data that I’m scrolling is an array of 200 questions, each only about 150 characters long.

When I force it down to about 10-20, the lag goes away.

I’ve tried using FlatList inside my Marquee which did not help at all.

What am I doing wrong?

import { Marquee } from '@animatereactnative/marquee';

const handleLayout = (event:any) => {
  const { width } = event.nativeEvent.layout;
  setContentWidth(width);
};
  
const renderItem = ({ item }:{item:any}) => (
  <View style={styles.item}>
    <Text style={styles.text}>{item}</Text>
  </View>
);
  
return (
  <View style={styles.container}>
    <Marquee spacing={20} speed={1}>
    <FlatList
      ref={flatListRef}
      data={questions}
      renderItem={renderItem}
      keyExtractor={(item, index) => `${item}-${index}`}
      horizontal
      showsHorizontalScrollIndicator={false}
      scrollEnabled={false}
      onLayout={handleLayout}
      contentContainerStyle={{ flexDirection: 'row' }}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
    </Marquee>
  </View>
);