React-Native SectionList scroll to item out of view on Android

Question

For a Project I'm workin on, I need to create a component in which users can add entries to an array which lives in state, and a SectionList to display those entries. Also, I need the SectionList to scroll down to the latest entry right after it is entered. Please check out this snack for an example

The list itself displays all entries and updates after a new entry was added, but once the list contains more than the screen can display, it can only scroll down to the second last, and I really need to scroll to the last.

I tried numerous things, containing awaiting setState, defining contentContainerStyle, converting the whole thing to a VirtualizedList and ScrollView, everything I can think of, but I simply can't get it to scroll to the last entry.

Question: How can I get my SectionList to scroll to the last item, which is currently out of bounds of the SectionList component?

UPDATE I know that this issue is caused by the SectionList not containing the item yet when scrollToLocation is called. The key to the solution seems to be to await the re-render of the list

UPDATE 2 SetState has a callback that does not solve this issue either. However, the solution in this comment works. The problem with it is that it only works in .js files, and I am working with .tsx files all over my project. How could I overcome this?

Answer 1

Apparently this is a bug in React-Native 0.59.6.

On android, when working in the completion block of setState, one needs to set a timeout of 0.2 seconds and after that, SectionList will scroll all the way down. However, the item that is supposed to be there isn't rendered yet and sometimes appears 0.5 seconds later, resulting in a really clunky feel.

I have posted an issue Here, and hope it will be fixed soon