High performance listview for React Native and web!

Overview

RecyclerListView

npm version appveyor License

If this project has helped you out, please support us with a star 🌟 .

This is a high performance listview for React Native and Web with support for complex layouts. JS only with no native dependencies, inspired by both RecyclerView on Android and UICollectionView on iOS.

npm install --save recyclerlistview

For latest beta:
npm install --save [email protected]

Note: Documentation will be upgraded soon, for now check code comments for clarity and exploring features. This component is actively tested with React Native Web as well.

Overview and features

RecyclerListView uses "cell recycling" to reuse views that are no longer visible to render items instead of creating new view objects. Creation of objects is very expensive and comes with a memory overhead which means as you scroll through the list the memory footprint keeps going up. Releasing invisible items off memory is another technique but that leads to creation of even more objects and lot of garbage collections. Recycling is the best way to render infinite lists that does not compromise performance or memory efficiency.

Apart from all performance benefits RecyclerListView comes with great features out of the box:

  • Cross Platform, works on Web
  • Supports staggered grid layouts
  • Instant layout switching like going from GridView to ListView and vice versa
  • End reach detections
  • Horizontal Mode
  • Viewability Events
  • Initial render offset/index support
  • Footer support
  • Reflow support on container size change with first visible item preservation
  • Scroll position preservation
  • Window scrolling support for web
  • Non deterministic rendering mode on demand (height cannot be determined before rendering)
  • (New) ItemAnimator interface added, customize to your will how RLV handles layout changes. Allows you to modify animations that move cells. You can do things like smoothly move an item to a new position when height of one of the cells has changed.
  • (New) Stable Id support, ability to associate a stable id with an item. Will enable beautiful add/remove animations and optimize re-renders when DataProvider is updated.
  • (New) Sticky recycler items that stick to either the top or bottom.

Why?

RecyclerListView was built with performance in mind which means no blanks while quick scrolls or frame drops. RecyclerListView encourages you to have deterministic heights for items you need to render. This does not mean that you need to have all items of same height and stuff, all you need is a way to look at the data and compute height upfront so that RecyclerListView can compute layout in one pass rather than waiting for the draw to happen. You can still do all sorts of GridViews and ListViews with different types of items which are all recycled in optimal ways. Type based recycling is very easy to do and comes out of the box.

In case you really need non deterministic rendering set forceNonDeterministicRendering prop to true on RecyclerListView. This increases layout thrashing and thus, will not be as fast.

Demo

Production Flipkart Grocery Demo Video (or try the app): https://youtu.be/6YqEqP3MmoU
Infinite Loading/View Change (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
Mixed ViewTypes: https://snack.expo.io/B1GYad52b
extendedState,stableIDs and ItemAnimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
Sample project: https://github.com/naqvitalha/travelMate
Web Sample (Using RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Context Preservation Sample: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo

Other Video: https://www.youtube.com/watch?v=Tnv4HMmPgMc

Watch Video

Props

Prop Required Params Type Description
layoutProvider Yes BaseLayoutProvider Constructor function that defines the layout (height / width) of each element
dataProvider Yes DataProvider Constructor function the defines the data for each element
contextProvider No ContextProvider Used to maintain scroll position in case view gets destroyed, which often happens with back navigation
rowRenderer Yes (type: string | number, data: any, index: number) => JSX.Element | JSX.Element[] | null Method that returns react component to be rendered. You get the type, data, index and extendedState of the view in the callback
initialOffset No number Initial offset you want to start rendering from; This is very useful if you want to maintan scroll context across pages.
renderAheadOffset No number specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, keeping this as low as possible should be the intent. Higher values also increase re-render compute
isHorizontal No boolean If true, the list will operate horizontally rather than vertically
onScroll No rawEvent: ScrollEvent, offsetX: number, offsetY: number) => void On scroll callback function that executes as a user scrolls
onRecreate No (params: OnRecreateParams) => void callback function that gets executed when recreating the recycler view from context provider
externalScrollView No { new (props: ScrollViewDefaultProps): BaseScrollView } Use this to pass your on implementation of BaseScrollView
onEndReached No () => void Callback function executed when the end of the view is hit (minus onEndThreshold if defined)
onEndReachedThreshold No number Specify how many pixels in advance for the onEndReached callback
onVisibleIndicesChanged No TOnItemStatusChanged Provides visible index; helpful in sending impression events
onVisibleIndexesChanged No TOnItemStatusChanged (Deprecated in 2.0 beta) Provides visible index; helpful in sending impression events
renderFooter No () => JSX.Element | JSX.Element[] | null Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads
initialRenderIndex No number Specify the initial item index you want rendering to start from. Preferred over initialOffset if both specified
scrollThrottle No number iOS only; Scroll throttle duration
canChangeSize No boolean Specify if size can change
distanceFromWindow No number (Depricated) Use applyWindowCorrection() API with windowShift. Usage?
applyWindowCorrection No (offset: number, windowCorrection: WindowCorrection) => void (Enhancement/replacement to distanceFromWindow API) Allows updation of the visible windowBounds to based on correctional values passed. User can specify windowShift; in case entire RecyclerListWindow needs to shift down/up, startCorrection; in case when top window bound needs to be shifted for e.x. top window bound to be shifted down is a content overlapping the top edge of RecyclerListView, endCorrection: to alter bottom window bound for a similar use-case. Usage?
useWindowScroll No boolean Web only; Layout Elements in window instead of a scrollable div
disableRecycling No boolean Turns off recycling
forceNonDeterministicRendering No boolean Default is false; if enabled dimensions provided in layout provider will not be strictly enforced. Use this if item dimensions cannot be accurately determined
extendedState No object In some cases the data passed at row level may not contain all the info that the item depends upon, you can keep all other info outside and pass it down via this prop. Changing this object will cause everything to re-render. Make sure you don't change it often to ensure performance. Re-renders are heavy.
itemAnimator No ItemAnimator Enables animating RecyclerListView item cells (shift, add, remove, etc)
optimizeForInsertDeleteAnimations No boolean Enables you to utilize layout animations better by unmounting removed items
style No object To pass down style to inner ScrollView
scrollViewProps No object For all props that need to be proxied to inner/external scrollview. Put them in an object and they'll be spread and passed down.
layoutSize No Dimension Will prevent the initial empty render required to compute the size of the listview and use these dimensions to render list items in the first render itself. This is useful for cases such as server side rendering. The prop canChangeSize has to be set to true if the size can be changed after rendering. Note that this is not the scroll view size and is used solely for layouting.
onItemLayout No number A callback function that is executed when an item of the recyclerListView (at an index) has been layout. This can also be used as a proxy to itemsRendered kind of callbacks.

For full feature set have a look at prop definitions of RecyclerListView (bottom of the file). All ScrollView features like RefreshControl also work out of the box.

applyWindowCorrection usage

applyWindowCorrection is used to alter the visible window bounds of the RecyclerListView dynamically. The windowCorrection of RecyclerListView along with the current scroll offset are exposed to the user. The windowCorrection object consists of 3 numeric values:

  • windowShift - Direct replacement of distanceFromWindow parameter. Window shift is the offset value by which the RecyclerListView as a whole is displaced within the StickyContainer, use this param to specify how far away the first list item is from window top. This value corrects the scroll offsets for StickyObjects as well as RecyclerListView.
  • startCorrection - startCorrection is used to specify the shift in the top visible window bound, with which user can receive the correct Sticky header instance even when an external factor like CoordinatorLayout toolbar.
  • endCorrection - endCorrection is used to specify the shift in the bottom visible window bound, with which user can receive correct Sticky Footer instance when an external factor like bottom app bar is changing the visible view bound.

As seen in the example below

Alt Text

Typescript

Typescript works out of the box. The only execption is with the inherited Scrollview props. In order for Typescript to work with inherited Scrollview props, you must place said inherited Scrollview props within the scrollViewProps prop.

<RecyclerListView
  rowRenderer={this.rowRenderer}
  dataProvider={queue}
  layoutProvider={this.layoutProvider}
  onScroll={this.checkRefetch}
  renderFooter={this.renderFooter}
  scrollViewProps={{
    refreshControl: (
      <RefreshControl
        refreshing={loading}
        onRefresh={async () => {
          this.setState({ loading: true });
          analytics.logEvent('Event_Stagg_pull_to_refresh');
          await refetchQueue();
          this.setState({ loading: false });
        }}
      />
    )
  }}
/>

Guides

  • Sample Code
  • Performance
  • Sticky Guide
  • Web Support: Works with React Native Web out of the box. For use with ReactJS start importing from recyclerlistview/web e.g., import { RecyclerListView } from "recyclerlistview/web". Use aliases if you want to preserve import path. Only platform specific code is part of the build so, no unnecessary code will ship with your app.
  • Polyfills Needed: requestAnimationFrame

License

Apache v2.0

Contact Us

Please open issues for any bugs that you encounter. You can reach out to me on twitter @naqvitalha or, write to [email protected] for any questions that you might have.

Issues
  • [Maybe a bug] Rendering issue

    [Maybe a bug] Rendering issue

    I am using this great library to do my project. The thing is it fires componentWillUpdate instead of constructor in the first place. I found that when it wont fire Constructor, it will use an old state and props of random previous item, so it makes my logic wrong. Sorry for my bad English. Here is my codes: It is how i set dataProvider, i never add statbleID but i saw it on the blog so i try to add it into, but it is still not working. image Here is my custom component class: image And here is the screenshot from Chrome Debugger, this.props contains some value of random previous item. The first 8 items when RCL displays in the first place goes into Constructor and not go to componentWillUpdate. I dont know why it happens image

    Thanks for reading, please help me !

    opened by maxakak1998 33
  • Warn: Possible stableId collision

    Warn: Possible stableId collision

    **VirtualRenderer.prototype.syncAndGetKey ** In line if (stackItem && stackItem.dataIndex !== index) {...} Sometimes the key is equal to type ( 0 for me ), How do I fix this warning?

    opened by legion-zver 29
  • React Native 0.60 Deprecation Warning

    React Native 0.60 Deprecation Warning

    Kindly look into this.

    W/ReactNativeJS: Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount.
        
        Please update the following components: RecyclerListView
        
        Learn more about this warning here:
        https://fb.me/react-async-component-lifecycle-hooks
    2019-07-15 11:43:30.722 1119-1220/com.sts W/ReactNativeJS: Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.
        
        Please update the following components: RecyclerListView
        
        Learn more about this warning here:https://fb.me/react-async-component-lifecycle-hooks
    

    React Native Version 0.60 Recyclerlistview Version 1.3.4/ Version 2.0.0-beta.3

    opened by ignitebhdeveloper 20
  • RecyclerListView needs to have a bounded size

    RecyclerListView needs to have a bounded size

    Hi, I've been trying to use this component following the example in the README but it gives me the following error:

    RecyclerListView needs to have a bounded size. Currently height or, width is 0
    

    If I comment these lines it works perfectly: https://github.com/Flipkart/recyclerlistview/blob/77d479126595879c3c3c78cd402ba89bb253964c/src/core/RecyclerListView.tsx#L326-L328

    I've logged the values of layout and this._layout and they are {height: 0, width: 0} and {width: 414, x: 0, height: 0, y: 0}` respectively.

    The only particularity of my usage is the RecyclerListView is on a TabNavigator. Any idea why this might be happening?

    The code of my app is here in case you might want to take a look (it's ReasonML, though :( ) https://github.com/erizocosmico/myfosdem/blob/feature/recyclerlistview/re/components/eventList.re#L90-L140

    opened by erizocosmico 20
  • added masonary layout

    added masonary layout

    opened by hovox 18
  • [Bug] if I swipe the swipeable item, other swipeable items are slipping

    [Bug] if I swipe the swipeable item, other swipeable items are slipping

    Problem if I swipe the swipeable item, other swipeable items are slipping. If I set disableRecycling property to true, the problem is solved but the performance problem shows up. I'm using this library for swiping

    Screenshots

    React Native Environment Info: System: OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver) CPU: (4) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Memory: 1.05 GB / 5.66 GB Shell: 4.4.19 - /bin/bash Binaries: Node: 11.14.0 - /usr/bin/node Yarn: 1.13.0 - ~/.yarn/bin/yarn npm: 6.9.0 - ~/.npm-global/bin/npm npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.59.4 => 0.59.4 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7 react-native-update: 5.1.3

    opened by erennyuksell 18
  • change size of rendered item

    change size of rendered item

    Good day based on the source code I can see that there is an onSizeChange(), but I cannot find anything on how to change the size in such a mater that this event is triggered. Any pointers on what too look for?

    opened by Fr1kki3 18
  • Blank area

    Blank area

    I have a list with about 100 items . when I scroll I see blank area for 0.5 second

    I try your sample with last version of react native

    It has not same performance like your YouTube and I see blank area . I test at release mode in android 7 phone with 8 core CPU and 8 gig ram

    Also in your sample except image all data is same and not changed so we have no cha he in view except images . If you try with better data and each row has different price and ... , the performance decreases and we have more blank area

    I also increase renderAheadOffset to 320 and 640 but still see blank area even in your sample project

    opened by sm2017 18
  • Redux issue

    Redux issue

    I have an issue as same as https://github.com/Flipkart/ReactEssentials/issues/60 but in both android and iOS (I think the problem is not depends on OS)

    My rowRenderer return an element connected to redux and I need to use redux , and I put dataProvider in the mapStateToProps

    Can you please provide an example that show how we can use this library with redux?

    opened by sm2017 16
  • LayoutProvider responsive width

    LayoutProvider responsive width

    It would be great to be able to set responsive width in the layoutProvider.

    I'm trying to have a 100% width for example. I'm actually using window.innerWidth but the problem is that when resizing my browser window, the size is not recalculated.

    opened by TomPradat 16
  • Hide scrollbar if scrolling is horizontal and scroll one item at a time

    Hide scrollbar if scrolling is horizontal and scroll one item at a time

    Is there any way to hide scroll bar if list is Horizontal and id i scroll horizontally it should scroll one item, Is there any way to achieve this ?

    opened by umair2602 0
  • Scroll automatically moves when adding new item

    Scroll automatically moves when adding new item

    When i add new item inside RLV scroll automatically moves for amount of that item height. I am using transform: [{scaleY: -1}] and also using dynamic height elements but i am calculating height myself using rnTextSize library. The reason i dont want this scroll to happen is when i am going through older data i dont want anything to interrupt me and this scroll on new item added is bad for UX. Btw i am making chat app.

    Can anyone help me ?

    opened by bulz4y 0
  • hang and crash.. low performance.!

    hang and crash.. low performance.!

    hi- i have a list of data-- created by recyclerlistview. and i have two device for test one of them is j5 prime(RAM 2) another is j1 mini(RAM 1).. in first device every thing work great.. in second one it has hangs and app suddenly closed with no error.. any help?

    opened by arsae 2
  • scrollRef and initialRenderIndex doesnt work together. Render White Screens initially

    scrollRef and initialRenderIndex doesnt work together. Render White Screens initially

    I have added scrollRef and initialRenderIndex in recyclerview. It somehow breaks and renders white screen initially. When tap or swipe on the screen, list renders and is visible.

    Has anyone faced the similar problem, if yes how did you manage to solve this.

    opened by callmemonky 0
  • RTL - LayoutManager

    RTL - LayoutManager

    We have the following design for our app. On the leftside is the layout order for LTR and on the rightside for RTL Screenshot 2022-01-10 at 15 07 38 I've noticed that when computing the layout.x for the current element it takes into consideration the layout.x and width of the previous element (it adds them - that works for LTR but it does not work for RTL).

    And because there's a difference between the internal layout state of recycler and the actual layout. The check from ViewRenderer (https://github.com/Flipkart/recyclerlistview/commit/a29285f42b0d6d7dde804e3f65b49037704ef203) never passes because of xDiff.

    I have the following questions:

    1. Do we need a new LayoutManager to fix it and make it work for RTL ?
    2. What https://github.com/Flipkart/recyclerlistview/commit/a29285f42b0d6d7dde804e3f65b49037704ef203 tries to fix ?
    opened by dolhadan 0
  • Update README.md

    Update README.md

    Minor typo mistakes

    -higer
    +higher
    
    -heigts
    +heights
    
    -postion
    +position
    
    opened by bobychaudhary 0
  • Item container override

    Item container override

    Just like rest of the containers this PR provides a way to override ViewContainer. Will enable use cases where a custom wrapper is required over each item and we don't an extra view to be created.

    opened by naqvitalha 0
  • Undefined index while rendering sticky

    Undefined index while rendering sticky

    currentStickyIndex had undefined checks in the code even though it's type doesn't include it. I'm seeing cases in Shopify code where this value is undefined and yet a render is being attempted.

    This generally happens if you have a large value a currentIndex and amount of data is then reduced. Regardless, the computations gets updated soon after. It can cause a crash sometimes which this check will mitigate.

    opened by naqvitalha 0
  • Why onScroll not works ?

    Why onScroll not works ?

    Hello,

    Why onScroll not working ?

    <RecyclerListView dataProvider={dataProvider} layoutProvider={layoutProvider} rowRenderer={rowRenderer} scrollViewProps={{ showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: 'handled', onscroll: (data) => console.log(data), }} style={{flex: 1, marginTop: 20}} />

    opened by serverlocal017 0
Releases(3.0.5)
  • 3.0.5(Jan 25, 2021)

    New Features:

    • Server Side Rendering support. layoutSize prop introduced that can be passed on the server. This value will be used for first render and frame skip that happens on normal client rendering to measure size is avoided.
    • onItemLayout callback added. Can report when an item layout changes. First call can also be used as a proxy to determine when atleast one item has been rendered on screen. The callback doesn't report the layout however, it can be queried from RLV ref.
    • alwaysStickyFooter prop available to make the last sticky footer item remain at the end of the screen.

    Bug Fixes:

    • OffsetY compute fix for first sticky render
    • Fixed incorrect reference to this.props instead of newProps while updating onVisibleIndicesChanged callback
    Source code(tar.gz)
    Source code(zip)
  • 3.0.5-beta.1(Jan 6, 2021)

    New Features:

    • Server Side Rendering support. layoutSize prop introduced that can be passed on the server. This value will be used for first render and frame skip that happens on normal client rendering to measure size is avoided.
    • onItemLayout callback added. Can report when an item layout changes. First call can also be used as a proxy to determine when atleast one item has been rendered on screen. The callback doesn't report the layout however, it can be queried from RLV ref.
    • alwaysStickyFooter prop available to make the last sticky footer item remain at the end of the screen.

    Bug Fixes:

    • OffsetY compute fix for first sticky render
    • Fixed incorrect reference to this.props instead of newProps while updating onVisibleIndicesChanged callback
    Source code(tar.gz)
    Source code(zip)
  • 3.0.1-beta.1(May 11, 2020)

    Changes

    • New prop layoutSize added. Use this to pass a size that can be used to render RLV in the first frame itself. This can also enable SSR. If you want RLV to use the right size after mount set canChangeSize to true.
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Feb 18, 2020)

    Breaking Changes:

    • distanceFromWindow is deprecated and removed, use applyWindowCorrection instead.

    New Features:

    • Recyclerlistview has now been moved to react 16 however, it still remains compatible with older versions of react.
    • Moved GridLayoutProvider into recylerlistview. Refer this while we update samples. You can now do import { GridLayoutProvider } from "recyclerlistview" (recommended)
    • renderStickyContainer introduced in StickyContainer, used to provide custom styling options for StickyObjects.
    • applyWindowCorrection introduced, used to provide correctional values for the visible window bound for RecyclerListView.
    • renderContentContainer provided to wrap the list items inside a custom component for custom use cases.

    Improvements:

    • #387 Compat component to maintain compatibility across react version.

    Bug Fixes:

    • #400 Fix zero height start or end being prevented from inflating.
    • #401 Fix breaks if layout provider and data providers are changed in the same pass.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.12(Aug 22, 2019)

    Breaking Changes:

    • onVisibleIndexesChanged deprecated. Use onVisibleIndicesChanged instead.
    • Lot of internal changes. Test well before shipping.

    New Features:

    • ProgressiveListView with dynamic render ahead.
    • Sticky items added. Wrap your RecyclerListView component with StickyContainer and pass header and footer indices to stick the items to the top or bottom.
    • Support for debugging of difference in cell dimension.
    • forceRerender now available for custom use cases on web

    Improvements:

    • https://github.com/Flipkart/recyclerlistview/pull/272 Support IE11 window scroll offset
    • https://github.com/Flipkart/recyclerlistview/pull/257 Building process simplified
    • https://github.com/Flipkart/recyclerlistview/pull/237 Layout type check for computed layouts
    • https://github.com/Flipkart/recyclerlistview/pull/231 OnRecreateParams added in default export
    • https://github.com/Flipkart/recyclerlistview/pull/213 Optional anchoring
    • https://github.com/Flipkart/recyclerlistview/pull/216 Removed all binds
    • https://github.com/Flipkart/recyclerlistview/pull/212 Removed requestAnimationFrame polyfill
    • https://github.com/Flipkart/recyclerlistview/pull/196 Accomodating content insets and content container padding in row calculations

    Bug Fixes:

    • https://github.com/Flipkart/recyclerlistview/pull/299 Import was not from web
    • https://github.com/Flipkart/recyclerlistview/pull/301 Build Fix
    • https://github.com/Flipkart/recyclerlistview/pull/238 Add styles when using useWindowScroll={true}
    • https://github.com/Flipkart/recyclerlistview/pull/223 Fix scroll value issue when scrollOffset is less than distance
    • https://github.com/Flipkart/recyclerlistview/pull/219 Fix for scroll to offset api
    • https://github.com/Flipkart/recyclerlistview/pull/210 Stuck animator fix
    • https://github.com/Flipkart/recyclerlistview/pull/193 Fix missing onLayout
    • Other misc fixes
    Source code(tar.gz)
    Source code(zip)
  • 2.0.10-beta.1(Jul 31, 2019)

    Bug Fixes:

    • Common debounce method removed
    • Scroll inconsistencies due to distanceFromWindow fixed
    • RelayoutReqIndex matches with dataProvider length now
    • forceRerender method added to enforce renders if required
    • Sticky header related bug fixes
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-beta.3(Feb 11, 2019)

    Breaking Changes:

    • onVisibleIndexesChanged deprecated. Use onVisibleIndicesChanged instead.
    • Lot of internal changes. Test well before shipping.

    New Features:

    • ProgressiveListView with dynamic render ahead.
    • Sticky items added. Wrap your RecyclerListView component with StickyContainer and pass header and footer indices to stick the items to the top or bottom.
    • Support for debugging of difference in cell dimension.

    Improvements:

    • https://github.com/Flipkart/recyclerlistview/pull/272 Support IE11 window scroll offset
    • https://github.com/Flipkart/recyclerlistview/pull/257 Building process simplified
    • https://github.com/Flipkart/recyclerlistview/pull/237 Layout type check for computed layouts
    • https://github.com/Flipkart/recyclerlistview/pull/231 OnRecreateParams added in default export
    • https://github.com/Flipkart/recyclerlistview/pull/213 Optional anchoring
    • https://github.com/Flipkart/recyclerlistview/pull/216 Removed all binds
    • https://github.com/Flipkart/recyclerlistview/pull/212 Removed requestAnimationFrame polyfill
    • https://github.com/Flipkart/recyclerlistview/pull/196 Accomodating content insets and content container padding in row calculations

    Bug Fixes:

    • https://github.com/Flipkart/recyclerlistview/pull/299 Import was not from web
    • https://github.com/Flipkart/recyclerlistview/pull/301 Build Fix
    • https://github.com/Flipkart/recyclerlistview/pull/238 Add styles when using useWindowScroll={true}
    • https://github.com/Flipkart/recyclerlistview/pull/223 Fix scroll value issue when scrollOffset is less than distance
    • https://github.com/Flipkart/recyclerlistview/pull/219 Fix for scroll to offset api
    • https://github.com/Flipkart/recyclerlistview/pull/210 Stuck animator fix
    • https://github.com/Flipkart/recyclerlistview/pull/193 Fix missing onLayout
    Source code(tar.gz)
    Source code(zip)
  • 1.4.0-beta.5(Jun 6, 2018)

    Improvements

    • Stable Id support: Adds getStableId(index: number): string as second param in DataProvider constructor. Significantly improves re-rendering on data set changes. Enables add/remove animations.
    • New prop optimizeForInsertDeleteAnimations forcefully unmounts removed items to kick in layout animations. Without it RLV prefers reusing the cell later. This prop requires stable ids.
    • Externalised Layout Provider: You can write your own and pass it in the same prop to RLV e.g, if you want masonry with recycling you can write it and open source yourself :)
    • SSR Fixes to allow server builds
    • onRecreate prop added which triggers a callback in case of context preservation passing necessary info like lastOffset for more optimizations in app logic.
    • Improved warning in case of missing RLV bounds
    • Warning if mounted without any data

    Bug Fixes

    • https://github.com/Flipkart/recyclerlistview/issues/178
    • https://github.com/Flipkart/recyclerlistview/issues/172 Only warning for now, in next major version we'll start throwing exceptions in case RLV is mounted without data.
    Source code(tar.gz)
    Source code(zip)
  • 1.3.4(May 1, 2018)

  • 1.3.3(May 1, 2018)

    Changes

    • Adjustment to default renderAheadOffset on web
    • Incremental loading/View type change sample added (Expo demo 1)
    • Documentation around performance
    Source code(tar.gz)
    Source code(zip)
  • 1.3.2(Apr 19, 2018)

    Bug Fixes:

    • Fixed type for externalScrollView prop
    • Added new prop scrollViewProps for better typescript support, it proxies all given props to the internal ScrollView
    Source code(tar.gz)
    Source code(zip)
  • 1.3.1(Mar 22, 2018)

    Improvements

    • RNW mode doesn't import Animated by default leading to reduced bundle sizes.
    • RNW mode now uses transforms to position and shift items leading to better performance, almost identical to /web mode.
    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Mar 11, 2018)

    New Features:

    • ItemAnimator interface added, customize to your will how RLV handles layout changes. Allows you to modify animations that move cells. You can do things like smoothly move an item to a new position when height of one of the cells has changed. StableId work is in progress which will further strengthen this. Works on all supported platforms.

    Changes:

    • Default flex direction is being optimized on pure web version to match React Native. This will lead to more consistent ports. Can be a breaking change for some use cases. Please test before upgrading.
    • Performance improvements on web and react-native-web version.
    • In case of non deterministic rendering DefaultItemAnimator is used to shift items from estimated positions to actual. This looks better and avoids the need to skip frames while layout settles down. This also improves load time by atleast 2 frames.

    Bug Fixes

    • Missing scrollTo method on web fixed.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.6(Jan 9, 2018)

  • 1.2.2(Dec 2, 2017)

    Improvements

    • Significant reduction in layout thrashing while having forceNonDeterministicRendering={true}. This will greatly improve the performance for lists having non deterministic and variable heights.
    • New prop extendedState is now added where all extra data that list items depend on can be passed. Changing this object will re-render all items. Make sure shouldComponentUpdate is also defined in your item.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1(Nov 21, 2017)

  • 1.2.0(Nov 20, 2017)

    Deprecated

    • Web support via extra webpack plugin RLV_ENV is no longer supported/needed. Import from recyclerlistview/web instead. To preserve import path you may use aliases.

    Bug fix

    • Fixed incorrect onVisibleIndexesChanged trigger on first mount.
    • Fixed issue where items wouldn't resize on orientation change.

    New features

    • externalScrollView prop added allowing you to supply your own scroll providers if needed. Check ScrollComponent.ts for contracts.
    • Fully typed with TypeScript so, better intellisense in all IDEs.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.5(Oct 28, 2017)

    BugFix: Web, stack preventing stack overflow in case of non deterministic rendering. This used to happen if given estimated dimensions were way off the actual ones.

    BugFix: Web, style props was not passed to internal scrollviewer. Fixed now.

    Performance: Improved performance on iOS and Web.

    Enhancement: For exclusive use on web everything can now, simply, be imported from recyclerlistview/web, no dependency on webpack plugins unless you want the same import syntax.

    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Sep 27, 2017)

  • 1.0.7(Sep 26, 2017)

  • 1.0.61(Sep 4, 2017)

Owner
Flipkart
Flipkart
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 281 Jan 18, 2022
High-performance React Native Graphics using Skia

@shopify/react-native-skia Checkout the full documentation here. React Native Skia brings the Skia Graphics Library to React Native. Skia serves as th

Shopify 1.9k Jan 16, 2022
A Native Picker with high performance.

react-native-picker Documentation Params Key Type Default Support Description isLoop Boolean false Android pickerTextEllipsisLen number 6 Android pick

beefe 1.7k Jan 20, 2022
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Gifted ListView A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps Changelog 0.0.13 Use RefreshControl

Farid Safi 1.6k Jan 15, 2022
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features Can be

Arkit 1.2k Jan 13, 2022
Animated Pagination For React Native's ListView, FlatList, and SectionList

The best Pagination component for React Native. React Native Pagination Roadmap see: ROADMAP.md Horizontal To try these out yourself its prudy easy, J

garrettmac 355 Jan 15, 2022
SGListView is a memory minded implementation of React Native's ListView

React Native SGListView SGListView is a memory minded implementation of the React Native's ListView. Maintainers Wanted I'm currently looking for main

Shaheen Ghiassy 746 Dec 24, 2021
A pull to refresh ListView for React Native completely written in js.

A pull to refresh ListView for React Native completely written in js. Also supports custom animations. Installation npm install react-native-refresher

Syrus Akbary 454 Nov 24, 2021
React Native scrollview/listview component with image lazyload feature

React Native scrollview lazyload ScrollView with image/components lazyload feature. Support all ScrollView feature. Detect ScrollView by 'renderRow' a

Isken Huang 74 Oct 16, 2020
A Listview with a sidebar to jump to sections directly

Based on johanneslumpe's react-native-selectablesectionlistview, thanks to him for the awesome component! 99% of this component was done by @johannesl

Alexander Vitanov 460 Nov 25, 2021
The high-quality iOS native search bar for react native.

React Native Search Bar The high-quality native search bar for react native. Getting Started This is a native library. It does not work with expo or c

Zhao Han 823 Jan 11, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

null 203 Dec 5, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.9k Jan 22, 2022
Cycle.js run() for react-native-navigation on react-native-web

Cycle Native Navigation Web Similar to and largely compatible with cycle-native-navigation but meant for use with react-native-web and Electron. npm i

André Staltz 4 Jan 3, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

webRidge 29 Jan 10, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 6 Aug 24, 2021
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 73 Jan 5, 2022