Eugnis/react-native-timeline-flatlist

Go-to

nicencina opened this issue · 4 comments

Great component!!

Is there a way of navigating directly to a section of the timeline? Let's say that I want to display a full timeline but would like to start the user at "Today", which may be anywhere along the flatlist. Or if from somewhere in the app I want to link/navigate directly to a section of the timeline. I couldn't find documentation

Thank you

Hi. That is possible for Flatlist using https://reactnative.dev/docs/flatlist#initialscrollindex or https://reactnative.dev/docs/flatlist#scrolltoindex

For that firstly you should somehow in your code identify index of item (of data you passed) to navigate, and then pass to Timeline custom options.

For example to start from item index 3 you can pass options={{ initialScrollIndex: 3 }}.
And if you want to navigate with some external button when Timeline already rendered you should get ref from inner Flatlist like that options={{ ref: (ref) => { this.flatListRef = ref; } }}. Then you can use in your code this.flatListRef.scrollToIndex({animated: true, index: 3});

As this component based on Flatlist, you can pass custom props to it with options object like that

<Timeline 
... 
options={{ }}
/>

Awesome -- will definitely give it a try. Thank you, Eugnis!

initialScrollIndex requires getItemLayout to be implemented in order to work. However, after reviewing the source code for Timeline I noticed that it extends PureComponent (not FlatList), and PureComponent does not include a getItemLayout method, which means that I cannot override this method in order to support the requirement for initialScrollIndex (or, at least, I don't know how to).

In your render() { return () } section you implement a FlatList but I only see a way of passing options in, not getItemLayout method. I'll continue to search for documentation in case I'm missing something obvious, but I'm not sure how to get initialScrollIndex to work without what I describe above.

Nevermind -- I figured it out! ;P Just pass the getItemLayout function as an option along with the initialScrollIndex. Thanks again!