Handling Adaptive Scroll Targets in a React Native FlatList with Dynamic Content and Resizable Text

25 views Asked by At

I have an application with a list that can contain between 100 to 12,000 lines of text. The complexity of my situation is based on several factors:

Variable Line Heights: The heights of the lines in my list are not uniform because the length of each line of text can vary greatly.

Dynamic Font Sizes: Users have the ability to change the font size while using the app, which alters the height of each line of text.

Adding Lines: Users can add more lines to the list, further altering the overall height of the list's content like adding translation to the text.

Scrolling to a Specific Line: I have a requirement where users should be able to scroll to a specific line, such as the 200th line, but since the height of each line is variable and can change, traditional methods like scrollToIndex have not been effective. Using scrollToIndex without a fixed getItemLayout causes performance issues and an undesirable user experience due to excessive loading and erratic scrolling behaviour.

In essence, I need a way to accurately scroll to a particular line in a large and dynamically changing list without the standard assumption of fixed line heights. This is challenging because most optimized scrolling methods in React Native's FlatList depend on knowing the height of each item, which in my case, is not possible due to the dynamic nature of my list's content.

So, Looking for a better solution.

0

There are 0 answers