ScrollView) that aren't explicitly listed
+here, along with the following caveats:- 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.
- This is a
PureComponentwhich means that it will not re-render ifpropsremain shallow- -equal. Make sure that everything yourrenderItemfunction depends on is passed as a prop that -is not===after updates, otherwise your UI may not update on changes. This includes the -dataprop and parent component state. - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+equal. Make sure that everything your
renderItemfunction depends on is passed as a prop +(e.g.extraData) that is not===after updates, otherwise your UI may not update on +changes. This includes thedataprop and parent component state. - 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
keyprop on each item and uses that for the React key. -Alternatively, you can provide a customkeyExtractorprop.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
Rendered in between each item, but not at the top or bottom.
ListFooterComponent?: ?ReactClass<any> #
Rendered at the bottom of all the items.
ListHeaderComponent?: ?ReactClass<any> #
Rendered at the top of all the items.
columnWrapperStyle?: StyleObj #
Optional custom style for multi-item rows generated when numColumns > 1.
data: ?Array<ItemT> #
For simplicity, data is just a plain array. If you want to use something else, like an
+Alternatively, you can provide a custom keyExtractor prop.
NOTE: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with
+content not rendering, e.g when using LayoutAnimation, try setting
+removeClippedSubviews={false}, and we may change the default in the future after more
+experimentation in production apps.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
Rendered in between each item, but not at the top or bottom.
ListFooterComponent?: ?ReactClass<any> #
Rendered at the bottom of all the items.
ListHeaderComponent?: ?ReactClass<any> #
Rendered at the top of all the items.
columnWrapperStyle?: StyleObj #
Optional custom style for multi-item rows generated when numColumns > 1.
data: ?Array<ItemT> #
For simplicity, data is just a plain array. If you want to use something else, like an
immutable list, use the underlying VirtualizedList directly.
extraData?: any #
A marker property for telling the list to re-render (since it implements PureComponent). If
any of your renderItem, Header, Footer, etc. functions depend on anything outside of the
data prop, stick it here and treat it immutably.
getItem?: #
getItemCount?: #
Provides additional metadata like index if you need it.
viewabilityConfig?: ViewabilityConfig #
See ViewabilityHelper for flow type and further documentation.
Methods #
scrollToEnd(params?: object) #
Scrolls to the end of the content. May be janky without getItemLayout prop.
scrollToIndex(params: object) #
Scrolls to the item at a the specified index such that it is positioned in the viewable area
such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the
-middle.
May be janky without getItemLayout prop.
scrollToItem(params: object) #
Requires linear scan through data - use scrollToIndex instead if possible. May be janky
-without getItemLayout prop.
scrollToOffset(params: object) #
Scroll to a specific content pixel offset, like a normal ScrollView.
recordInteraction() #
Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
+middle. viewOffset is a fixed number of pixels to offset the final target position.
Note: cannot scroll to locations outside the render window without specifying the
+getItemLayout prop.
scrollToItem(params: object) #
Requires linear scan through data - use scrollToIndex instead if possible.
Note: cannot scroll to locations outside the render window without specifying the
+getItemLayout prop.
scrollToOffset(params: object) #
Scroll to a specific content pixel offset, like a normal ScrollView.
recordInteraction() #
Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
if waitForInteractions is true and the user has not scrolled. This is typically called by
taps on items or by navigation actions.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Development OS: macOS Linux diff --git a/releases/next/docs/panresponder.html b/releases/next/docs/panresponder.html index 7f2b66a8301..ba76f7ece1a 100644 --- a/releases/next/docs/panresponder.html +++ b/releases/next/docs/panresponder.html @@ -14,7 +14,7 @@ native event object:
React NativeSectionList #
A performant interface for rendering sectioned lists, supporting the most handy features:
- Fully cross-platform.
- Configurable viewability callbacks.
- List header support.
- List footer support.
- Item separator support.
- Section header support.
- Section separator support.
- Heterogeneous data and item rendering support.
- Pull to Refresh.
- Scroll loading.
If you don't need section support and want a simpler interface, use
-<FlatList>.
If you need sticky section header support, use ListView for now.
Simple Examples:
<FlatList>.Simple Examples:
This is a convenience wrapper around <VirtualizedList>,
-and thus inherits the following caveats:
- Internal state is not preserved when content scrolls out of the render window. Make sure all +/>
This is a convenience wrapper around <VirtualizedList>,
+and thus inherits it's props (as well as those of ScrollView) that aren't explicitly listed
+here, along with the following caveats:
- 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.
- This is a
PureComponentwhich means that it will not re-render ifpropsremain shallow- -equal. Make sure that everything yourrenderItemfunction depends on is passed as a prop that -is not===after updates, otherwise your UI may not update on changes. This includes the -dataprop and parent component state. - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+equal. Make sure that everything your
renderItemfunction depends on is passed as a prop +(e.g.extraData) that is not===after updates, otherwise your UI may not update on +changes. This includes thedataprop and parent component state. - 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
keyprop on each item and uses that for the React key. -Alternatively, you can provide a customkeyExtractorprop.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
Rendered in between adjacent Items within each section.
ListFooterComponent?: ?ReactClass<any> #
Rendered at the very end of the list.
ListHeaderComponent?: ?ReactClass<any> #
Rendered at the very beginning of the list.
SectionSeparatorComponent?: ?ReactClass<any> #
Rendered in between each section.
extraData?: any #
A marker property for telling the list to re-render (since it implements PureComponent). If
+Alternatively, you can provide a custom keyExtractor prop.
NOTE: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with
+content not rendering, e.g when using LayoutAnimation, try setting
+removeClippedSubviews={false}, and we may change the default in the future after more
+experimentation in production apps.
Props #
ItemSeparatorComponent?: ?ReactClass<any> #
Rendered in between adjacent Items within each section.
ListFooterComponent?: ?ReactClass<any> #
Rendered at the very end of the list.
ListHeaderComponent?: ?ReactClass<any> #
Rendered at the very beginning of the list.
SectionSeparatorComponent?: ?ReactClass<any> #
Rendered in between each section.
extraData?: any #
A marker property for telling the list to re-render (since it implements PureComponent). If
any of your renderItem, Header, Footer, etc. functions depend on anything outside of the
data prop, stick it here and treat it immutably.
initialNumToRender: number #
How many items to render in the initial batch. This should be enough to fill the screen but not
much more. Note these items will never be unmounted as part of the windowed rendering in order
@@ -39,8 +43,16 @@ sure to also set the refreshing prop correctly.
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.
renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #
Default renderer for every item in every section. Can be over-ridden on a per-section basis.
renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #
Rendered at the top of each section. Sticky headers are not yet supported.
sections: Array<SectionT> #
stickySectionHeadersEnabled?: boolean #
Makes section headers stick to the top of the screen until the next one pushes it off. Only -enabled by default on iOS because that is the platform standard there.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
viewabilityConfig prop.refreshing?: ?boolean #
Set this true while waiting for new data from a refresh.
renderItem: (info: {item: Item, index: number}) => ?React.Element<any> #
Default renderer for every item in every section. Can be over-ridden on a per-section basis.
renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #
Rendered at the top of each section. These stick to the top of the ScrollView by default on
+iOS. See stickySectionHeadersEnabled.
sections: Array<SectionT> #
stickySectionHeadersEnabled?: boolean #
Makes section headers stick to the top of the screen until the next one pushes it off. Only +enabled by default on iOS because that is the platform standard there.
Methods #
scrollToLocation(params: object) #
Scrolls to the item at the specified sectionIndex and itemIndex (within the section)
+positioned in the viewable area such that viewPosition 0 places it at the top (and may be
+covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. viewOffset is a
+fixed number of pixels to offset the final target position, e.g. to compensate for sticky
+headers.
Note: cannot scroll to locations outside the render window without specifying the
+getItemLayout prop.
recordInteraction() #
Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
+if waitForInteractions is true and the user has not scrolled. This is typically called by
+taps on items or by navigation actions.
You can edit the content above on GitHub and send us a pull request!
Examples # | Edit on GitHub |
Slider #
A component used to select a single value from a range of values.
Props #
disabled?: bool #
If true the user won't be able to move the slider. Default value is false.
maximumTrackTintColor?: color #
The color used for the track to the right of the button. Overrides the default blue gradient image on iOS.
maximumValue?: number #
Initial maximum value of the slider. Default value is 1.
minimumTrackTintColor?: color #
The color used for the track to the left of the button. -Overrides the default blue gradient image on iOS.
minimumValue?: number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete?: function #
Callback called when the user finishes changing the value (e.g. when -the slider is released).
onValueChange?: function #
Callback continuously called while the user is dragging the slider.
step?: number #
Step value of the slider. The value should be +Overrides the default blue gradient image on iOS.
minimumValue?: number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete?: function #
Callback that is called when the user releases the slider, +regardless if the value has changed. The current value is passed +as an argument to the callback handler.
onValueChange?: function #
Callback continuously called while the user is dragging the slider.
step?: number #
Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
style?: ViewPropTypes.style #
Used to style and layout the Slider. See StyleSheet.js and
ViewStylePropTypes.js for more info.
testID?: string #
Used to locate this view in UI automation tests.
value?: number #
Initial value of the slider. The value should be between minimumValue diff --git a/releases/next/docs/virtualizedlist.html b/releases/next/docs/virtualizedlist.html index 431e40bd154..08be5fe358e 100644 --- a/releases/next/docs/virtualizedlist.html +++ b/releases/next/docs/virtualizedlist.html @@ -7,15 +7,16 @@ window with appropriately sized blank space. The window adapts to scrolling beha are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.
Some caveats:
- 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.
- This is a
PureComponentwhich means that it will not re-render ifpropsremain shallow- -equal. Make sure that everything yourrenderItemfunction depends on is passed as a prop that -is not===after updates, otherwise your UI may not update on changes. This includes the -dataprop and parent component state. - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+equal. Make sure that everything your
renderItemfunction depends on is passed as a prop +(e.g.extraData) that is not===after updates, otherwise your UI may not update on +changes. This includes thedataprop and parent component state. - 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
keyprop on each item and uses that for the React key. -Alternatively, you can provide a customkeyExtractorprop.
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 #
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: removeClippedSubviews might not be necessary and may cause bugs. If you see issues with
+content not rendering, e.g when using LayoutAnimation, try setting
+removeClippedSubviews={false}, and we may change the default in the future after more
+experimentation in production apps.
Props #
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, 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
@@ -33,7 +34,7 @@ sure to also set the refreshing prop correctly.
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 #
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.
updateCellsBatchingPeriod: number #
Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off +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.
scrollEventThrottle?: #
updateCellsBatchingPeriod: number #
Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
screen. Similar fill rate/responsiveness tradeoff as maxToRenderPerBatch.
viewabilityConfig?: ViewabilityConfig #
windowSize: number #
Determines the maximum number of items rendered outside of the visible area, in units of
visible lengths. So if your list fills the screen, then windowSize={21} (the default) will
render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
diff --git a/showcase.html b/showcase.html
index 3796b5ed614..ea722c5a041 100644
--- a/showcase.html
+++ b/showcase.html
@@ -1,4 +1,4 @@
-
Who's using React Native?
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
Some of these are hybrid native/React Native apps.
A curated list of open source React Native apps is also being kept by React Native News.
Who's using React Native?
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
Some of these are hybrid native/React Native apps.
A curated list of open source React Native apps is also being kept by React Native News.