Performance with large data sets

[tomasmozeris]

Hey, Thanks for nice library 🙏 I'm analysing it's potential and I'm struggling with performance on data sets with ~200 items. I cloned repo, modified basic example array size from 20 to 200: https://github.com/jemise111/react-native-swipe-list-view/blob/master/SwipeListExample/examples/basic.js#L14 I run it on real device, scroll down to # 50 item and try to swipe. At start nothing happens, after few seconds swipe starts to function. I wonder if it's limitation of library or I'm doing something wrong 😕

[afilp]

We have the same issue, we have many items (around 500) and the initial render delays a lot (at least 20 seconds). Is this something normal or we can do something about this in the code?

Thanks!

[pavermakov]

@jemise111 Do you have any tips to solve this issue?

[jemise111]

Hey guys have you tried some of the performance improvements listed here: https://reactnative.dev/docs/optimizing-flatlist-configuration

I think the rendering issue @afilp mentioned could be fixed by some of those

@tomasmozeris My first guesses are it's something related to scroll events, listeners on the row swipe value, or onLayout events. I'm trying to go through the code and disable them one by one. I think the best improvement I see is with disabling onscroll events but I'm not sure without digging deeper. Can you try adjusting scrollEventThrottle and seeing if that helps.

Any extra info you guys have can help me figure this out better

[tomasmozeris]

Hey, We ended up combining:

• <RecyclerListView /> for the list
• <SwipeRow /> for giving list item swipe interaction

It gave decent performance for low end devices

[jemise111]

Thanks @tomasmozeris that's helpful

[Acetyld]

Hey, We ended up combining:

* [`<RecyclerListView />`](https://github.com/Flipkart/recyclerlistview) for the list

* [`<SwipeRow />`](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeRow.md) for giving list item swipe interaction

It gave decent performance for low end devices

Hello!

Sadly this is not working for us, i just spend a whole day trying everything but we keep stuck at same problem https://github.com/Flipkart/recyclerlistview/issues/333

This problem.

1. When opening a other row, old one doesnt close and i tried everything from the same approach as siwpe-list-view has with storing refs. to only storing ref of the open row and closing one on a new one being opend.
2. When you scroll, because it recycles it will still show open row from the one above see the github problem.

We are now thinking about using renderListView to render recyclerview or a other optimization flat list. Because performance is so bad, even with only 200 items.

The problem is when initial load or when scrollen the whole app just kinda freezes with a flatlist.

Did you ever manage to solve the problem with the close row while using recyclerview?

[HyopeR]

Same problem. Any progress?

Edit: After some experimentation I came to the following conclusion. Maybe it can help someone. I've looked at issues involving various performance issues.

Suggestion 1: The react-native-big-list package works efficiently. Suggestion 2: react-native-gesture-handler Swipeable can be used for swipeable component.

I blended these two packages for my needs and the result is amazing. I can get the performance that I used to get in 25 items in more than 150 items. (I haven't tested more)

[manosKas]

@HyopeR can u post a snack example ?

[HyopeR]

https://user-images.githubusercontent.com/36919703/189102422-da6d3321-457a-4fd6-bb45-a7c336c47a86.mp4

This example requires installing react-native-gesture-handler.

Note: The usage of onSwipeableOpen varies according to the versions of react-native-gesture-handler. Check for different version usages. Documentation

Note: One of the disadvantages of the react-native-big-list package is that you have to give the elements a fixed height.

Here are the package versions:

    "react-native-big-list": "^1.5.4",
    "react-native-gesture-handler": "2.5.0",
    "react-native-reanimated": "2.5.0"

Example code:

import React, {useRef} from 'react';
import {Text, View} from 'react-native';
import {Swipeable} from 'react-native-gesture-handler';
import BigList from 'react-native-big-list';

const ListSwipeRef = React.createRef();

const ItemLeft = () => {
  return <View style={{width: 100, height: 100, backgroundColor: 'green'}} />;
};

const Item = ({item, index}) => {
  const ref = useRef();
  const color = index % 2 === 0 ? '#BBB' : '#EEE';

  return (
    <Swipeable
      ref={ref}
      leftThreshold={100}
      rightThreshold={0}
      renderLeftActions={() => <ItemLeft />}
      onSwipeableOpen={direction => {
        switch (direction) {
          case 'left':
            if (ListSwipeRef.current && ListSwipeRef.current?.id !== index) {
              ListSwipeRef.current.self?.close();
            }

            ListSwipeRef.current = {
              id: index,
              self: ref.current,
            };
            break;

          case 'right':
            break;

          default:
            break;
        }
      }}>
      <View
        style={{
          height: 100,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: color,
        }}>
        <Text style={{fontWeight: 'bold', fontSize: 24}}>{index}</Text>
      </View>
    </Swipeable>
  );
};

const SwipeAbleList = () => {
  return (
    <BigList
      style={{flex: 1}}
      itemHeight={100 + 10}
      keyExtractor={(item, index) => `item-${index}`}
      renderItem={({item, index}) => <Item item={item} index={index} />}
      data={Array.from(Array(100000).keys())}
    />
  );
};

export default SwipeAbleList;