From 7ee120310b4e303f1e65c3c46211bc5abbad2b6a Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Sat, 4 Mar 2017 00:41:29 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/flatlist.html | 34 ++++++++++++++++++------- releases/next/docs/scrollview.html | 21 ++++++++------- releases/next/docs/sectionlist.html | 29 +++++++++++++++------ releases/next/docs/virtualizedlist.html | 24 ++++++++++++----- 4 files changed, 74 insertions(+), 34 deletions(-) diff --git a/releases/next/docs/flatlist.html b/releases/next/docs/flatlist.html index 538b4a2a8aa..d941005f931 100644 --- a/releases/next/docs/flatlist.html +++ b/releases/next/docs/flatlist.html @@ -89,7 +89,9 @@ class FlatListExample extends } render() { const filterRegex = new RegExp(String(this.state.filterText), 'i'); - const filter = (item) => (filterRegex.test(item.text) || filterRegex.test(item.title)); + const filter = (item) => ( + filterRegex.test(item.text) || filterRegex.test(item.title) + ); const filteredData = this.state.data.filter(filter); return ( <UIExplorerPage @@ -124,9 +126,14 @@ class FlatListExample extends ={filteredData} debug={this.state.debug} disableVirtualization={!this.state.virtualized} - getItemLayout={this.state.fixedHeight ? this._getItemLayout : undefined} + getItemLayout={this.state.fixedHeight ? + this._getItemLayout : + undefined + } horizontal={this.state.horizontal} - key={(this.state.horizontal ? 'h' : 'v') + (this.state.fixedHeight ? 'f' : 'd')} + key={(this.state.horizontal ? 'h' : 'v') + + (this.state.fixedHeight ? 'f' : 'd') + } legacyImplementation={false} numColumns={1} onRefresh={this._onRefresh} @@ -157,22 +164,31 @@ class FlatListExample extends }; _shouldItemUpdate(prev, next) { /** - * Note that this does not check state.horizontal or state.fixedheight because we blow away the - * whole list by changing the key in those cases. Make sure that you do the same in your code, - * or incorporate all relevant data into the item data, or skip this optimization entirely. + * Note that this does not check state.horizontal or state.fixedheight + * because we blow away the whole list by changing the key in those cases. + * Make sure that you do the same in your code, or incorporate all relevant + * data into the item data, or skip this optimization entirely. */ return prev.item !== next.item; } - // This is called when items change viewability by scrolling into or out of the viewable area. + // This is called when items change viewability by scrolling into or out of + // the viewable area. _onViewableItemsChanged = (info: { changed: Array<{ - key: string, isViewable: boolean, item: any, index: ?number, section?: any + key: string, + isViewable: boolean, + item: any, + index: ?number, + section?: any, }> } ) => { // Impressions can be logged here if (this.state.logViewable) { - infoLog('onViewableItemsChanged: ', info.changed.map((v) => ({...v, item: '...'}))); + infoLog( + 'onViewableItemsChanged: ', + info.changed.map((v) => ({...v, item: '...'})), + ); } }; _pressItem = (key: number) => { diff --git a/releases/next/docs/scrollview.html b/releases/next/docs/scrollview.html index 3a3dd206355..e25b8ba26cb 100644 --- a/releases/next/docs/scrollview.html +++ b/releases/next/docs/scrollview.html @@ -6,17 +6,16 @@ set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

Doesn't yet support other contained responders from blocking this scroll -view from becoming the responder.

<ScrollView> vs <ListView> - which one to use? -ScrollView simply renders all its react child components at once. That -makes it very easy to understand and use. -On the other hand, this has a performance downside. Imagine you have a very -long list of items you want to display, worth of couple of your ScrollView's -heights. Creating JS components and native views upfront for all its items, -which may not even be shown, will contribute to slow rendering of your -screen and increased memory usage.

This is where ListView comes into play. ListView renders items lazily, -just when they are about to appear. This laziness comes at cost of a more -complicated API, which is worth it unless you are rendering a small fixed -set of items.

Props #

View props... #

contentContainerStyle?: StyleSheetPropType(ViewStylePropTypes) #

These styles will be applied to the scroll view content container which +view from becoming the responder.

<ScrollView> vs <FlatList> - which one to use?

ScrollView simply renders all its react child components at once. That +makes it very easy to understand and use.

On the other hand, this has a performance downside. Imagine you have a very +long list of items you want to display, maybe several screens worth of +content. Creating JS components and native views for everythign all at once, +much of which may not even be shown, will contribute to slow rendering and +increased memory usage.

This is where FlatList comes into play. FlatList renders items lazily, +just when they are about to appear, and removes items that scroll way off +screen to save memory and processing time.

FlatList is also handy if you want to render separators between your items, +multiple columns, infinite scroll loading, or any number of other features it +supports out of the box.

Props #

View props... #

contentContainerStyle?: StyleSheetPropType(ViewStylePropTypes) #

These styles will be applied to the scroll view content container which wraps all of the child views. Example:

return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> diff --git a/releases/next/docs/sectionlist.html b/releases/next/docs/sectionlist.html index e78ab99a27c..05c86eb1165 100644 --- a/releases/next/docs/sectionlist.html +++ b/releases/next/docs/sectionlist.html @@ -87,7 +87,9 @@ class SectionListExample extends }; render() { const filterRegex = new RegExp(String(this.state.filterText), 'i'); - const filter = (item) => (filterRegex.test(item.text) || filterRegex.test(item.title)); + const filter = (item) => ( + filterRegex.test(item.text) || filterRegex.test(item.title) + ); const filteredData = this.state.data.filter(filter); return ( <UIExplorerPage @@ -110,8 +112,12 @@ class SectionListExample extends ={HeaderComponent} ListFooterComponent={FooterComponent} - SectionSeparatorComponent={() => <CustomSeparatorComponent text="SECTION SEPARATOR" />} - ItemSeparatorComponent={() => <CustomSeparatorComponent text="ITEM SEPARATOR" />} + SectionSeparatorComponent={() => + <CustomSeparatorComponent text="SECTION SEPARATOR" /> + } + ItemSeparatorComponent={() => + <CustomSeparatorComponent text="ITEM SEPARATOR" /> + } enableVirtualization={this.state.virtualized} onRefresh={() => alert('onRefresh: nothing to refresh :P')} onViewableItemsChanged={this._onViewableItemsChanged} @@ -123,8 +129,8 @@ class SectionListExample extends {title: 'Item In Header Section', text: 'Section s1', key: '0'}, ]}, {key: 's2', data: [ - {noImage: true, title: 'First item', text: 'Section s2', key: '0'}, - {noImage: true, title: 'Second item', text: 'Section s2', key: '1'}, + {noImage: true, title: '1st item', text: 'Section s2', key: '0'}, + {noImage: true, title: '2nd item', text: 'Section s2', key: '1'}, ]}, {key: 'Filtered Items', data: filteredData}, ]} @@ -133,11 +139,18 @@ class SectionListExample extends /UIExplorerPage> ); } - _renderItemComponent = ({item}) => <ItemComponent item={item} onPress={this._pressItem} />; - // This is called when items change viewability by scrolling into our out of the viewable area. + _renderItemComponent = ({item}) => ( + <ItemComponent item={item} onPress={this._pressItem} /> + ); + // This is called when items change viewability by scrolling into our out of + // the viewable area. _onViewableItemsChanged = (info: { changed: Array<{ - key: string, isViewable: boolean, item: {columns: Array<*>}, index: ?number, section?: any + key: string, + isViewable: boolean, + item: {columns: Array<*>}, + index: ?number, + section?: any }>}, ) => { // Impressions can be logged here diff --git a/releases/next/docs/virtualizedlist.html b/releases/next/docs/virtualizedlist.html index f188667779b..d042af2d97e 100644 --- a/releases/next/docs/virtualizedlist.html +++ b/releases/next/docs/virtualizedlist.html @@ -10,17 +10,29 @@ your data is captured in the item data or external stores like Flux, Redux, or R 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.

    • Props #

    FooterComponent?: ?ReactClass<any> #

    HeaderComponent?: ?ReactClass<any> #

    SeparatorComponent?: ?ReactClass<any> #

    data?: any #

    The default accessor functions assume this is an Array<{key: string}> but you can override +Alternatively, you can provide a custom keyExtractor prop.

    NOTE: LayoutAnimation and sticky section headers both have bugs when used with this and are +therefore not officially supported yet.

    NOTE: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with +content not rendering, try disabling it, and we may change the default there.

    Props #

    FooterComponent?: ?ReactClass<any> #

    HeaderComponent?: ?ReactClass<any> #

    SeparatorComponent?: ?ReactClass<any> #

    data?: any #

    The default accessor functions assume this is an Array<{key: string}> but you can override getItem, getItemCount, and keyExtractor to handle any type of index-based data.

    debug?: ?boolean #

    debug will turn on extra logging and visual overlays to aid with debugging both usage and -implementation.

    disableVirtualization: boolean #

    DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully +implementation, but with a significant perf hit.

    disableVirtualization: boolean #

    DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable -this for debugging purposes.

    getItem: (items: any, index: number) => ?Item #

    getItemCount: (items: any) => number #

    getItemLayout?: (items: any, index: number) => - {length: number, offset: number, index: number} #

    horizontal?: ?boolean #

    initialNumToRender: number #

    keyExtractor: (item: Item, index: number) => string #

    maxToRenderPerBatch: number #

    onEndReached?: ?(info: {distanceFromEnd: number}) => void #

    onEndReachedThreshold?: ?number #

    onLayout?: ?Function #

    onRefresh?: ?Function #

    If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make +this for debugging purposes.

    getItem: (data: any, index: number) => ?Item #

    A generic accessor for extracting an item from any sort of data blob.

    getItemCount: (data: any) => number #

    Determines how many items are in the data blob.

    getItemLayout?: (data: any, index: number) => + {length: number, offset: number, index: number} #

    horizontal?: ?boolean #

    initialNumToRender: number #

    How many items to render in the initial batch. This should be enough to fill the screen but not +much more.

    keyExtractor: (item: Item, index: number) => string #

    maxToRenderPerBatch: number #

    The maximum number of items to render in each incremental render batch. The more rendered at +once, the better the fill rate, but responsiveness my suffer because rendering content may +interfere with responding to button taps or other interactions.

    onEndReached?: ?(info: {distanceFromEnd: number}) => void #

    onEndReachedThreshold?: ?number #

    onLayout?: ?Function #

    onRefresh?: ?Function #

    If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.

    onViewableItemsChanged?: ?(info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void #

    Called when the viewability of rows changes, as defined by the -viewabilityConfig prop.

    refreshing?: ?boolean #

    Set this true while waiting for new data from a refresh.

    removeClippedSubviews?: boolean #

    renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #

    renderScrollComponent: (props: Object) => React.Element<any> #

    shouldItemUpdate: ( +viewabilityConfig prop.

    refreshing?: ?boolean #

    Set this true while waiting for new data from a refresh.

    removeClippedSubviews?: boolean #

    A native optimization that removes clipped subviews (those outside the parent) from the view +hierarchy to offload work from the native rendering system. They are still kept around so no +memory is saved and state is preserved.

    renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #

    renderScrollComponent: (props: Object) => React.Element<any> #

    Render a custom scroll component, e.g. with a differently styled RefreshControl.

    shouldItemUpdate: ( props: {item: Item, index: number}, nextProps: {item: Item, index: number} -) => boolean #

    updateCellsBatchingPeriod: number #

    viewabilityConfig?: ViewabilityConfig #

    windowSize: number #

    Methods #

    scrollToEnd(params?: object) #

    scrollToIndex(params: object) #

    scrollToItem(params: object) #

    scrollToOffset(params: object) #

    recordInteraction() #

    Type Definitions #

    Props #

    Type:
    IntersectionTypeAnnotation

    You can edit the content above on GitHub and send us a pull request!

    ← PrevNext →