Performance issue when using Swipable in flatlist

[UsamaIkraam0099]

Performance issue when using Swipable in Flatlist

Description

Screenshots

Steps To Reproduce

1.

Expected behavior

Actual behavior

Snack or minimal code example

Package versions

• React: 17.0.1
• React Native: 0.64.2
• React Native Gesture Handler: 1.10.3

[jakub-gonet]

Could you please expand on this one? Preferably with benchmarks and the code you used to show performance issues with Swipeables.

[UsamaIkraam0099]

Basically i apply this on FlatList and when changing on any FlatList item like backgroundcolor or borderColor its slow and taking time but when I remove Swipeable FlatList working fine no issue there. I'll share some code

[alexstanbury]

I'm seeing poor performance with Swipeable in a Flatlist too. It can be observed by using the swipeable demo from the example in this repo and increasing the number of data items in the Flatlist (There is an older issue here with users reporting the same). For now I've had to switch over to react-native-interactable but I'd much rather be using this library.

Relevant packages: "react-native": "^0.64.2", "react-native-reanimated": "^2.2.0", "react-native-gesture-handler": "^1.10.3",

[msageryd]

I'm having this issue too.

As soon as I introduce Swipeable in my Flatlist items the list scrolls much less smoothly. I have a couple of 100 items with a thumbnail and av SVG pie chart. The list scrolls perfectly smooth without Swipeable.

I thought that maybe the flatlist had trouble measuring the height of Swipeable, so I wrapped it with a View with a constant height. This didn't solve the issue. I tried setting height on containerStyle as well as childrenContainerStyle, no difference.

I console.log:ed in the Swipeable source to see if it was re-rendering all the time, but it wasn't. Each Swipeable is rendered twice, but after that no more render is logged while I'm scrolling. I don't know why it renders twice, but this is not the problem anyway.

I'll go ahead and try https://github.com/wix/react-native-interactable instead.

I'd rather use react-native-gesture-handler since I'm using this lib in other places in my app. It would be really awesome if this issue could be solved somehow.

[msageryd]

To illustrate the problem I have made two screen recordings from my iPhone X. The first recording is with a Swipeable wrapping the list items. When I scroll slowly, the performance problem is very visible. Actually, when looking at this I don't know if this really is a performance problem. It looks more lika some kind of layout problem.

The second recording is without Swipeable. Buttery smooth, as you can see.

I appologize for the crappy blurring. This is live client data which I cannot show. I have never used iMovie before, so it looks like sh-t.

With Swipeable https://user-images.githubusercontent.com/4483085/147594877-91e6384b-dee4-41c4-99dc-cb22593de30f.mp4

Without Swipeable https://user-images.githubusercontent.com/4483085/147594895-4eb82773-eca0-4b76-a5c2-03c193399afc.mp4

Edit: I think GitHub might have compressed the video. The second video looks a bit jumpy as well, but I assure you that it is buttery smooth without Swipeable.

[Haider3iq]

Hi @msageryd, I am running into same performance issues.... have you solved this anyhow?

[tylercote]

I also have this issue, and I think it may be related to some re-renders due to state changes that I am not causing.

[pierroo]

Is there any update about this performance issue? Swipeable as of now is not usable in flatlist.

[9903SV]

@jakub-gonet @kkafar

We are also facing the same issue. We are using Swipeable in Shopify's FlashList. Is there any update regarding the performance issue?

[MensurRasic]

Same issue here, any solution or alternative to Swipeable ?

[smfunder]

Same here, I detected this using Shopify's FlashList with Swipeable. When they are together a fast scroll will generate blank areas, while removing Swipeable it works very smooth. Any suggestion or any replacement for Swipeable component?

[Acetyld]

Same, are there any alternatives

[ngocle2497]

I got same issue, any solution for it?

[crusherblack]

after i take out swipable the perfomance back to normal, are there any alternatives?

[StasSokolov1]

@crusherblack @ngocle2497 @Acetyld @smfunder @UsamaIkraam0099 hello guys, check please code below, works much more smoothly for me <Swipeable onSwipeableWillClose={() => setShowRightAction(false)} onActivated={() => setShowRightAction(true)} renderLeftActions={showRightAction ? renderLeftActions : undefined}> ... </Swipeable>

[Acetyld]

@crusherblack @ngocle2497 @Acetyld @smfunder @UsamaIkraam0099 hello guys, check please code below, works much more smoothly for me <Swipeable onSwipeableWillClose={() => setShowRightAction(false)} onActivated={() => setShowRightAction(true)} renderLeftActions={showRightAction ? renderLeftActions : undefined}> ... </Swipeable>

Did you check performance / fps after implementing this For me it dropped to 30/40fps

[StasSokolov1]

@Acetyld

Yes, I'm using FlashList and when i pass undefined to renderLeftActions it works more smoothly but not smooth like without Swipeable, which list you use?

[smfunder]

hey @Acetyld @stassokolov1 and all the people here. I ended up using Interactable.View. And I use it in combination of FlashList and it is super smooth.

import Interactable from 'react-native-interactable'

  const leftSwipe = (item) => {
    // NOTE: We are no longer using TouchableOpacity in a flat list because it created this issue:
    // https://github.com/facebook/react-native/issues/34376#issuecomment-1231324454
    return (
      <View>
        <Pressable onPress={handlePinUnPinCallback}>
          <FastImage style={styles.pinUnpinMsg} source={item?.isFavorite ? Images.UNPIN_MSG : Images.PIN_MSG} />
        </Pressable>
      </View>
    )
  }

return (
    <View>
      {leftSwipe(groupDetail)}
      <Interactable.View
        ref={swipeRef}
        horizontalOnly={true}
        dragEnabled={isEnableSwipe}
        snapPoints={[{ x: 100 }, { x: 0 }, { x: -150 }]}
        alertAreas={[{ id: 'leftArea', influenceArea: { left: 5 } }, { id: 'rightArea', influenceArea: { right: 5 } }]}
        onAlert={handleOnSwipeAlert}
       >
       <View> Content of the cell </View>
     </Interactable.View>
</View>

[rparrett]

I ended up using Interactable.View. And I use it in combination of FlashList and it is super smooth.

This is exciting. Which specific react-native-interactable package are you using?

[smfunder]

I ended up using Interactable.View. And I use it in combination of FlashList and it is super smooth.

This is exciting. Which specific react-native-interactable package are you using?

@rparrett I'm using "react-native-interactable": "^2.0.1" https://github.com/wix-incubator/react-native-interactable

[Acetyld]

I ended up using Interactable.View. And I use it in combination of FlashList and it is super smooth.

This is exciting. Which specific react-native-interactable package are you using?

@rparrett I'm using "react-native-interactable": "^2.0.1" https://github.com/wix-incubator/react-native-interactable

Does it work in expo dev build?

[smfunder]

I ended up using Interactable.View. And I use it in combination of FlashList and it is super smooth.

This is exciting. Which specific react-native-interactable package are you using?

@rparrett I'm using "react-native-interactable": "^2.0.1" https://github.com/wix-incubator/react-native-interactable

Does it work in expo dev build?

@Acetyld sorry I don't know, I'm not using expo.