I am trying to directly display the bottom of chat FlatLists (the latest chat message) to users and the two solutions (and challenges associated with each of them) are as follows:

1. Using react native’s scrollToEnd() method for FlatLists and firing it up every time the apps starts (perhaps using a useEffect or setTimeout) along with FlatList’s getItemLayout prop. The problem with this approach is, for some reason the FlatList ref (created using useRef) seems to be returning undefined and scrollToEnd cannot be called on undefined (I have tried calling it on the FlatList ref’s current).
2. Adding inverted prop to the FlatList along with reversing the FlatList data array. While this solution works well in the dev environment, I’m afraid this is not a great workaround for big production apps where there may be thousands of discrete chats where each of those, in turn, hold thousands of chat messages irrespective of whether the chat arrays are reversed on the frontend or the backend.

I’m looking for alternative solutions with either better or improved approach to the problem of starting users at the bottom of chat FlatList than the two mentioned above.

Note: Please do not flag this as a duplicate unless there’s a solution under a different question that beats the challenges associated with either of the two methods mentioned above perfectly rather than pointing one of the two methods as an alternative to the other.