ReactNative ScrollToIndex too slow

Question

im using react native to create an app for a legal document. i need the document to be scrollable. i rendered it using VirtualizedList. thing is when i try to use scrollToIndex(index: 'something') performance is too slow. my list contains about 4000 rendered items (each being about a paragraph long).

is there any way to make this run smoother?

export default function App() {
  const scroller = useRef();

  return (
    <SafeAreaView>
      <View style={styles.upperContainer}>
          <CustomButton
            onPress={() => {
              scroller.current.scrollToIndex({ index: 1547 });
            }}
          />
        </View>
      <View style={styles.flatContainer}>
        <VirtualizedList
          ref={scroller}
          data={data}
          renderItem={({ item }) => (
            <CustomText data={item.content} type={item.type} />
          )}
          getItem={(data, index) => data[index]}
          getItemCount={(data) => data.length}
          keyExtractor={(item) => item.number.toString()}
          initialNumToRender={4000}
          onScrollToIndexFailed={() => {
            alert('error');
          }}
        />
      </View>
    </SafeAreaView>
  );
}

It’s because of initialNumToRender, read more about it here. https://reactnative.dev/docs/virtualizedlist#initialnumtorender — SaachiTech, Oct 29 '20 at 04:53
try a production build, i mean generate an apk or ipa. most virtulizedlist and flatlist render issues are there only for dev versions. — Jaydeep Galani, Oct 29 '20 at 04:57

score 0 · Answer 1 · answered Oct 29 '20 at 05:19

This question is similar to these ones and maybe you can reference some of the answers and see what works for your case. Basically, you need a pure component to make this work.

Link - Flatlist performance slow

Link - VirtualizedList: You have a large list that is slow to update

ReactNative ScrollToIndex too slow

1 Answers1