{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 #
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 #
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/0.43/docs/sectionlist.html b/releases/0.43/docs/sectionlist.html
index 1a5bf81e5a7..444f1a1e733 100644
--- a/releases/0.43/docs/sectionlist.html
+++ b/releases/0.43/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/0.43/docs/virtualizedlist.html b/releases/0.43/docs/virtualizedlist.html
index e3e0788d509..444f03aa270 100644
--- a/releases/0.43/docs/virtualizedlist.html
+++ b/releases/0.43/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.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> #
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 #
Type Definitions #
Props #
Type:IntersectionTypeAnnotation
You can edit the content above on GitHub and send us a pull request!
React Native