diff --git a/Libraries/Experimental/FlatList.js b/Libraries/CustomComponents/Lists/FlatList.js similarity index 92% rename from Libraries/Experimental/FlatList.js rename to Libraries/CustomComponents/Lists/FlatList.js index 240f0c73b..aac931077 100644 --- a/Libraries/Experimental/FlatList.js +++ b/Libraries/CustomComponents/Lists/FlatList.js @@ -53,7 +53,7 @@ type RequiredProps = { * * ); * ... - * + * * * Provides additional metadata like `index` if you need it. */ @@ -136,7 +136,7 @@ type OptionalProps = { nextInfo: {item: ItemT, index: number} ) => boolean, /** - * See ViewabilityHelper for flow type and comments. + * See ViewabilityHelper for flow type and further documentation. */ viewabilityConfig?: ViewabilityConfig, }; @@ -160,14 +160,24 @@ type DefaultProps = typeof defaultProps; * - Separator support. * - Pull to Refresh * - * If you need sticky section header support, use ListView. + * If you need sticky section header support, use ListView for now. * * Minimal Example: * * {item.key}} * /> + * + * Some notes for all of the `VirtualizedList` based components: + * - Internal state is not preserved when content scrolls out of the render window. Make sure all + * your data is captured in the item data or external stores like Flux, Redux, or Relay. + * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously + * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see + * blank content. This is a tradeoff that can be adjusted to suit the needs of each application, + * and we are working on improving it behind the scenes. + * - By default, the list looks for a `key` prop on each item and uses that for the React key. + * Alternatively, you can provide a custom keyExtractor prop. */ class FlatList extends React.PureComponent, void> { static defaultProps: DefaultProps = defaultProps; diff --git a/Libraries/Experimental/MetroListView.js b/Libraries/CustomComponents/Lists/MetroListView.js similarity index 100% rename from Libraries/Experimental/MetroListView.js rename to Libraries/CustomComponents/Lists/MetroListView.js diff --git a/Libraries/Experimental/SectionList.js b/Libraries/CustomComponents/Lists/SectionList.js similarity index 100% rename from Libraries/Experimental/SectionList.js rename to Libraries/CustomComponents/Lists/SectionList.js diff --git a/Libraries/Experimental/ViewabilityHelper.js b/Libraries/CustomComponents/Lists/ViewabilityHelper.js similarity index 94% rename from Libraries/Experimental/ViewabilityHelper.js rename to Libraries/CustomComponents/Lists/ViewabilityHelper.js index a8a185165..ef2b73a9e 100644 --- a/Libraries/Experimental/ViewabilityHelper.js +++ b/Libraries/CustomComponents/Lists/ViewabilityHelper.js @@ -54,6 +54,9 @@ export type ViewabilityConfig = {| |}; /** +* A Utility class for calculating viewable items based on current metrics like scroll position and +* layout. +* * An item is said to be in a "viewable" state when any of the following * is true for longer than `minViewTime` milliseconds (after an interaction if `waitForInteraction` * is true): @@ -78,10 +81,16 @@ class ViewabilityHelper { this._config = config; } + /** + * Cleanup, e.g. on unmount. Clears any pending timers. + */ dispose() { this._timers.forEach(clearTimeout); } + /** + * Determines which items are viewable based on the current metrics and config. + */ computeViewableItems( itemCount: number, scrollOffset: number, @@ -135,6 +144,10 @@ class ViewabilityHelper { return viewableIndices; } + /** + * Figures out which items are viewable and how that has changed from before and calls + * `onViewableItemsChanged` as appropriate. + */ onUpdate( itemCount: number, scrollOffset: number, @@ -196,6 +209,9 @@ class ViewabilityHelper { } } + /** + * Records that an interaction has happened even if there has been no scroll. + */ recordInteraction() { this._hasInteracted = true; } diff --git a/Libraries/Experimental/VirtualizeUtils.js b/Libraries/CustomComponents/Lists/VirtualizeUtils.js similarity index 100% rename from Libraries/Experimental/VirtualizeUtils.js rename to Libraries/CustomComponents/Lists/VirtualizeUtils.js diff --git a/Libraries/Experimental/VirtualizedList.js b/Libraries/CustomComponents/Lists/VirtualizedList.js similarity index 100% rename from Libraries/Experimental/VirtualizedList.js rename to Libraries/CustomComponents/Lists/VirtualizedList.js diff --git a/Libraries/Experimental/VirtualizedSectionList.js b/Libraries/CustomComponents/Lists/VirtualizedSectionList.js similarity index 100% rename from Libraries/Experimental/VirtualizedSectionList.js rename to Libraries/CustomComponents/Lists/VirtualizedSectionList.js diff --git a/Libraries/Experimental/__flowtests__/FlatList-flowtest.js b/Libraries/CustomComponents/Lists/__flowtests__/FlatList-flowtest.js similarity index 100% rename from Libraries/Experimental/__flowtests__/FlatList-flowtest.js rename to Libraries/CustomComponents/Lists/__flowtests__/FlatList-flowtest.js diff --git a/Libraries/Experimental/__flowtests__/SectionList-flowtest.js b/Libraries/CustomComponents/Lists/__flowtests__/SectionList-flowtest.js similarity index 100% rename from Libraries/Experimental/__flowtests__/SectionList-flowtest.js rename to Libraries/CustomComponents/Lists/__flowtests__/SectionList-flowtest.js diff --git a/Libraries/Experimental/__tests__/ViewabilityHelper-test.js b/Libraries/CustomComponents/Lists/__tests__/ViewabilityHelper-test.js similarity index 100% rename from Libraries/Experimental/__tests__/ViewabilityHelper-test.js rename to Libraries/CustomComponents/Lists/__tests__/ViewabilityHelper-test.js diff --git a/Libraries/Experimental/__tests__/VirtualizeUtils-test.js b/Libraries/CustomComponents/Lists/__tests__/VirtualizeUtils-test.js similarity index 100% rename from Libraries/Experimental/__tests__/VirtualizeUtils-test.js rename to Libraries/CustomComponents/Lists/__tests__/VirtualizeUtils-test.js