st0ffern / react-native-optimized-flatlist

Optimization for complex and slow React Native FlatLists

react-native-optimized-flatlist

Optimization for FlatLists. This is a fix over the FlatList that removed every item that is not inside the viewport. This will give a more stable and faster FlatList as performance dont drop! :)

Please also read more about the issue here: facebook/react-native#13413

Installation

npm i -S react-native-optimized-flatlist

or

yarn add react-native-optimized-flatlist

Usage

Just replace FlatList with OptimizedFlatList .. thats all! :)

Replace this:

render() {
  return (
  <FlatList
    data={[{name: 'fred', name: 'freddy'}]}
    renderItem={ ({item}) => <View>{item.name}</View>}
    />
...

With this:

...
import {OptimizedFlatList} from 'react-native-optimized-flatlist'

...
render() {
  return (
  <OptimizedFlatList
    data={[{name: 'fred', name: 'freddy'}]}
    renderItem={ ({item}) => <View>{item.name}</View>}
    />
...

react-native-optimized-flatlist's Issues

Example using ScrollToEnd

```
<OptimizedFlatList
      ref={ref => (this._listRef = ref)}
      onContentSizeChange={() => {
        this._listRef.scrollToEnd();
      }}
      style={styles.list}
      data={this.state.chat}
      keyExtractor={(item, index) => index.toString()}

      renderItem={message => {
        const item = message.item;
        let inMessage = item.type === 'in';
        let itemStyle = inMessage ? styles.itemIn : styles.itemOut;

        return (
          <View key={item} style={[styles.item, itemStyle]}>
            {!inMessage && this.renderDate(item.datetime)}
            <View style={[styles.balloon]}>
              <Text>{item.message}</Text>
            </View>
            {inMessage && this.renderDate(item.datetime)}
          </View>
        );
      }}
    />

before im using Optimizedflatlist , im using flatlist react native and method scroll like that .. but not working with optimizedflatlist , 

scrolltoend is not a function..

help

This repository is abandoned?

Proptypes.element undefined

@Stoffern could you look at this error? I'm using RN 0.49

scrollToEnd doen’t work

scrollToEnd doesn’t work.

Is there any way to change scrollbar/scroll indicator color ?

I want to change the color of the scrollbar or scroll indicator that appear on the left side of the list. Is there any way to do so?

Can't use onEndReached()

why i can't use flatlist props onEndReached

issue

Recycling items doesn't take effect as soon as the screen is loaded?

Recycling items doesn't take effect as soon as the screen is loaded?

The effect works when I scroll down the list, but would it be possible for that recycle effect to start as soon as the page load? What I mean is that initially all the items are loaded, instead of them being hidden and when I scroll down ,you know, the items hide until my Viewport is on the item.

undefined is not a function(evaluating '_iterator[typeof Symbol === "function"?Symbol.iterator:"@@iterator"]()')

I found this error when replace with FlatList

<FlatList
data={data}
renderItem={_renderItem}
onEndReached={this._onEndReached}
initialNumToRender={5}
keyExtractor={(item, index) => index.toString()}
extraData={data}
/>

Scroll functions

Hi,
The last release does not have scroll functions. When is the deadline for next release?

Got an Error when you scroll fast

1. Error with task : null is not an object (evaluating 'this.rowRefs[e].ref.setVisibility')
2. Undefined is not an object (evaluating 'this.viewProperties.width')

Try my largelist

https://github.com/bolan9999/react-native-largelist

FlatlistRef.ScrollToIndex is not a function

I am not able to use scrollToIndex.
Is that intended?
ref={(ref) => { this.flatListRef = ref; }}

Item-wide flashes when loading more

Item-wide flashes when loading more

Re-Render takes some time

I tried this and seems it fixed some of the FlatList issues but I noticed when I scroll back (top or bottom) (specially when I'm using images) it takes some time to re-render and display the blocks.

So it would be good if it has an offeset to pre-load some items before displaying in viewport in order to prevent the blank space between blocks which doen't look good.

Any idea?

Please help to publish a new version that includes scrolling functions

Make a PR to the official FlatList component

Changing the data makes it weird

When there are only 2 items in the data and I dynamically change the data by removing 1 item and change also the extradata for it to refresh, what happens is all are gone (superficially). The remaining item is still there, I can verify that data got one item and to my surprise if I just change the component from optimizedflatlist to just flatlist, this does not happen.

I can also observed this not just on 2 items left, but on optimizedflatlist that I am dynamically changing data, which as I said does not happen if I just switch it to plain flatlist.

Incompatible with RN 55+

Seeing this error after simply running yarn add react-native-optimized-flatlist

Warning still alive

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

This warning still after installing this library. My context is the following: whenever I reach the end of the list I call the server to update my reducer, then update the list. Simple as that.

<OptimizedFlatList
    data={history.orders_ids}
    extraData={history}
    keyExtractor={(item, index) => index}
    renderItem={orderId => <FlatListItem order={history.orders[orderId.item]} history={history} onPress={this.onPressOrder.bind(this, orderId.item)} state={this.props.state} />}
    ItemSeparatorComponent={() => <FlatListItemSeparator/>}
    onEndReached={this.onEndReached.bind(this)}
    onEndReachedThreshold={0.2}
/>

Where history.orders_ids = [1, 2, 3, etc] and I do have history.orders which is an object like:

{
    1: {id: 1, name: 'Test1', ...otherProps},
    2: {id: 2, name: 'Test2', ...otherProps},
    etc
}

My <FlatListItem/>:

class FlatListItem extends PureComponent {
    render() {
        const {onPress, order, history} = this.props;
        return(
            <TouchableOpacity onPress={onPress}>
                {/*views, images, etc*/}
            </TouchableOpacity>
        );
    }
}

Am I doing something wrong?

Thanks!

every item is getting rendered until scroll

Hi @Stoffern , thank you for your work. Maybe I'm misunderstanding the intended usage but I would expect this control to only render the currently visible rows but it seems that it is rendering all. For example, if you create 30 rows and set them to a height so that only 5 fit on the screen, in the logs I see all 30 mounting, rendering, loading images, etc. It's only after I scroll that I see any disappear (the ones scrolled out of the top). Is this the intended behavior?

thanks

thank you

you can close whenever but I was thinking about making this and saw this repo and it did the job. cut my memory used by 320%.

Access FlatList methods

Hey,

I've experienced a great performance boots and improved stability on Android using the OptimizedFlatList, on iOS thought FlatList works perfectly.

One limitation of the OptimizedFlatList though is access to methods on the underlying FlatList, in my case I need to access scrollToOffset. The ref to the OptimizedFlatList doesn't expose the methods of the FlatList.

Would be great to have to be able to use it as a true drop-in replacement/optimization of the FlatList.

Filter Array of Data not working well on it

after filter array of data . filter item sometimes disappears , sometime show in the middle and sometimes displayed after write text more than one

Thanks! it did feel more smooth(RN 0.52)

Thanks!
(you can close this issue whenever you want)

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Removing rendered item causes index error

"react": "16.0.0-alpha.3",
"react-native": "0.44.0",
"react-native-optimized-flatlist": "^1.0.1"

I am receiving the following error when I delete an item from the flatlist.

onViewableItemsChanged is not working in react-native-optimized-flatlist

onViewableItemsChanged working fine in FlatList but due to many performance issues and memory issues, I have used react-native-optimized-flatlist. But onViewableItemsChanged is not working in react-native-optimized-flatlist. Any idea ?

https://stackoverflow.com/questions/59999214/onviewableitemschanged-not-working-in-optimizedflatlist

stickyHeaderIndices not working properly

I am using stickyHeaderIndices as array to have multiple header sticky. This works with the normal Flatlist, but not with the react-native-optimized-flatlist.

When I try to use it with react-native-optimized-flatlist, and scroll, after 2 rows the sticky header scrolls as well, while it should wait till the next sticky header is at the top.

Cannot read property 'width' of undefined

You did a good job.
I've tried your library on my code and it still looks a little weird sometimes when scrolling up and down.
If I suddenly scroll up, it doesn't displays upper list items and if i try scrolling gesture rapidly many times, it shows me such error.
Please have a look.

SectionList support

Hi Kristoffer,
It will great to have SectionList support, thanks !!!

Nested FlatList inside a ScrollView

this lib doesn't work when the FlatList is nested inside a ScrollView. Is there a way around that?

TaskQueue: Error with task : TypeError: undefined is not an object (evaluating 'this.viewProperties.width')

Hey Guys,
This Flatlist control is awesome and works best for my android app.
I am using it to display tons and tons of images from S3 server.

One problem I am facing thought. I implemented Search filter which searches through tags and filters the images.

In my case, FlatList does not seem to find its width I guess from the error. Not sure if that the issue in this package or my code.
I would greatly appreciate your help. Great work on this already.

Below is my full error if that helps.

TaskQueue: Error with task : TypeError: undefined is not an object (evaluating 'this.viewProperties.width')

This error is located at:
in FlatListItem (at OptimizedFlatList.js:34)
in RCTView (at View.js:113)
in View (at FlatList.js:530)
in RCTView (at View.js:113)
in View (at VirtualizedList.js:1300)
in CellRenderer (at VirtualizedList.js:499)
in RCTView (at View.js:113)
in View (at ScrollView.js:744)
in RCTScrollView (at ScrollView.js:852)
in ScrollView (at VirtualizedList.js:816)
in VirtualizedList (at FlatList.js:557)
in FlatList (at OptimizedFlatList.js:59)
in OptimizedFlatList (at Catalogue.js:134)
in RCTView (at View.js:113)
in View (at Catalogue.js:128)
in RCTView (at View.js:113)
in View (at Catalogue.js:127)
in Catalogue (at SceneView.js:35)
in SceneView (at CardStack.js:402)
in RCTView (at View.js:113)
in View (at CardStack.js:401)
in RCTView (at View.js:113)
in View (at CardStack.js:400)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:28)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:443)
in RCTView (at View.js:113)
in View (at CardStack.js:373)
in RCTView (at View.js:113)
in View (at CardStack.js:372)
in CardStack (at CardStackTransitioner.js:110)
in RCTView (at View.js:113)
in View (at Transitioner.js:192)
in Transitioner (at CardStackTransitioner.js:60)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:36)
in Navigator (at createNavigationContainer.js:198)
in NavigationContainer (at SceneView.js:35)
in SceneView (at CardStack.js:402)
in RCTView (at View.js:113)
in View (at CardStack.js:401)
in RCTView (at View.js:113)
in View (at CardStack.js:400)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:28)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:443)
in RCTView (at View.js:113)
in View (at CardStack.js:373)
in RCTView (at View.js:113)
in View (at CardStack.js:372)
in CardStack (at CardStackTransitioner.js:110)
in RCTView (at View.js:113)
in View (at Transitioner.js:192)
in Transitioner (at CardStackTransitioner.js:60)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:36)
in Navigator (at createNavigationContainer.js:198)
in NavigationContainer (at App.js:6)
in App (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:126)
in AppContainer (at renderApplication.js:34)
render
C:\RSSample\Woodwine\Woodwine\node_modules\react-native-optimized-flatlist\src\FlatListItem.js:38:57
finishClassComponent
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1721:102
updateClassComponent
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1713:33
beginWork
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1833:44
performUnitOfWork
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2569:33
workLoop
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2595:141
_invokeGuardedCallback
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:75:23
invokeGuardedCallback
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:49:40
performWork
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2634:41
scheduleUpdateImpl
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2768:101
scheduleUpdate
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2751:38
enqueueSetState
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1569:90
setState
C:\RSSample\Woodwine\Woodwine\node_modules\react\cjs\react.development.js:214:31
setVisibility
C:\RSSample\Woodwine\Woodwine\node_modules\react-native-optimized-flatlist\src\FlatListItem.js:32:25
_updateItem
C:\RSSample\Woodwine\Woodwine\node_modules\react-native-optimized-flatlist\src\OptimizedFlatList.js:27:42

C:\RSSample\Woodwine\Woodwine\node_modules\react-native-optimized-flatlist\src\OptimizedFlatList.js:53:23
_onViewableItemsChanged
C:\RSSample\Woodwine\Woodwine\node_modules\react-native-optimized-flatlist\src\OptimizedFlatList.js:52:21
_onViewableItemsChanged
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Lists\FlatList.js:515:29
_onUpdateSync
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Lists\ViewabilityHelper.js:256:29
onUpdate
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Lists\ViewabilityHelper.js:212:8
_updateViewableItems
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Lists\VirtualizedList.js:1200:6
_updateCellsToRender
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Lists\VirtualizedList.js:1084:30

C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Interaction\Batchinator.js:70:8
processNext
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Interaction\TaskQueue.js:116:10
_processUpdate
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Interaction\InteractionManager.js:201:6

C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:295:23
_callTimer
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:148:6
_callImmediatesPass
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:196:17
callImmediates
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:11
__callImmediates
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:282:4

C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:137:6
__guard
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:269:6
flushedQueue
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:136:17
callFunctionReturnFlushedQueue
C:\RSSample\Woodwine\Woodwine\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:11