add guide for FlatList onViewableItemsChanged

[sueLan]

I wrote an article about the onViewableItemsChanged in FlatList. The article is here @rachelnabors was advising me to add this article to this website. The conversation is here. I think it would be better for more people to better understand this API and the implementation behind it. Because the implementation is quite interesting.

[react-native-bot]

Deploy preview for react-native ready!

Built with commit 75b337c1f07bb30852f0e17f7ca5543688f254f0

https://deploy-preview-2198--react-native.netlify.app

Changes to docs/ are reflected in the next "master" version.

Thank you for your contributions.

_{How to Contribute • Documentation Sources}

[sueLan]

2. It would be great to open with a section on on _why" this is important.

Thank you for the reply.

• For the 2nd point, in _why" this is important, I am wondering what this is?
• For other points, I will do them.

[rachelnabors]

It's usually good to open with a small paragraph answering "how, who, what, why, where, and when":

• What are we going to talk about?
• Who would need to do this?
• Why is it important?
• Where would you implement this?
• When would you need to know this?
• How do we do this? (Read below to find out!)

You can see some of that here

[sueLan]

It's usually good to open with a small paragraph answering "how, who, what, why, where, and when":

• What are we going to talk about?
• Who would need to do this?
• Why is it important?
• Where would you implement this?
• When would you need to know this?
• How do we do this? (Read below to find out!)

You can see some of that here

Hi, thank you for the details. I just added a small section at the beginning of article to explain why, when, who. Besides, I also made other changes as you mentioned. I don't know what specific folder I should put this article. I put it in the The basics folder at first. Maybe, you have some idea?

[rachelnabors]

Editing inside a google doc?

This is really good! @sueLan, normally I work with authors in a Google Doc or some place where we can freely rearrange and expand on the guide's structure. Text editors are... less collaborative! If you'd like to move the content discussion of this PR into a Google Doc, it might make this faster! I made a few edits, but I think it might go faster to make the rest if we use a collaborative space like Google Docs.

Structural changes other docs need

** Viewablity config has a better explanation under flatlist https://reactnative.dev/docs/flatlist#viewabilityconfig than virtualizedlist https://reactnative.dev/docs/virtualizedlist#viewabilityconfig**

• @Simek Can we extract these to an Object Type or shared props list?
• If not, can we make sure the two are the same?
• These sections should also link to this new doc, and that should be part of this PR.

More feedbacks

• This doc should come after Using a ListView in the sidebar.
• Your examples need to go into a Snack player! Check out this page's source code to see how it works.

Example Structure

I removed the section where you share the types with the audience (copied below) because while that information is important, but it can be found at the link to ViewabilityConfig. I think it would work better if you broke down the examples to explain how these values are working in them. Example structure:

• Snack player with example code
• "Let's take a look at what is happening here:"
• explanation ("minimumViewTime denote the milliseconds an item must be visible before the callback will be fired...")
• more code snippets and their explanations

What do you think?

[sueLan]

@rachelnabors So nice.

Google Doc

Fine. Should I create the Google doc or you create it in your google drive? My google account is [email protected] .

This doc should come after Using a ListView in the sidebar.

ic, I will move it there

Snack player

will do this.

removed the section ViewabilityConfig

nice! It is better to use link. Looks more concise

I think it would work better if you broke down the examples to explain how these values are working in them. Example structure:

Good idea. easy for readers to understand.

[Simek]

@Simek Can we extract these to an Object Type or shared props list?

@rachelnabors Sure, I can work on that. This property is used by two components so it is enough to justify the extraction to the Object Type. 🙂

[rachelnabors]

@Simek Perfect :)

@sueLan I'll start a collaboration doc. Check your inbox!

[rachelnabors]

Also thinking it actually belongs under "Interactions"—it's far too advanced for the Basics section :D

[sueLan]

Also thinking it actually belongs under "Interactions"—it's far too advanced for the Basics section :D

• I moved the article to "Interactions" section. Feel free to tell me if you want to place it in other places.

  Agree that it isn't something basic and doesn't belong to Basics Section. Initially, I thought interactions is mainly for articles about touch event, gesture responder. But now, I feel like it makes sense to put this article there. Because onViewableItemsChanged mainly works in scenarios where users scroll the FlatList.

@rachelnabors