Recyclerlistview: [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
Frekansapp
All 18 comments
I am actually having a similar issue where I click one list item to expand the item height, the items below which re-used the same item also have an expanded height. What is the best practice to handle this?
esdotzed
on 22 Apr 2019
@naqvitalha what do you think about this issue?
Frekansapp
on 1 May 2019
same issue as well , on android only tho!
AbanoubNassem
on 23 May 2019
Does anyone solve this issue?
Frekansapp
on 10 Jun 2019
Does anyone solve this issue?
it seems to be the tabs issue , I was using NativeBase tabs and when switched to react-native-tabs it worked fine!
AbanoubNassem
on 10 Jun 2019
Does anyone solve this issue?
it seems to be the tabs issue , I was using NativeBase tabs and when switched to react-native-tabs it worked fine!
I have same problem with textinput onvaluechange changes other textinputs value
Frekansapp
on 10 Jun 2019
same issue, I have a ref per row and when I click a row, other row its clicked too
eae-christian
on 22 Jul 2019
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 swipingScreenshots
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
I has issue with swipeable component when scroll very fast. UI Thread and JS thread both drop frame rate ( on Android ). How about your app?
LVBK
on 29 Jul 2019
Me its about clicks/taps when I click a Item, other Item 18 positions down its selected too, I "resolve" this issues using disableRecycling={true} but this prop affects the performance.
eae-christian
on 29 Jul 2019
@LVBK No, i don't have
Frekansapp
on 29 Jul 2019
@eae-christian yeah, i mentioned above that solution but the performance problem shows up.
Frekansapp
on 29 Jul 2019
Me its about clicks/taps when I click a Item, other Item 18 positions down its selected too, I "resolve" this issues using disableRecycling={true} but this prop affects the performance.
It is how recycle work. Not a bug. just add close props to list item. Change it to true/false when swipe or scroll list. That's how i did it
LVBK
on 29 Jul 2019
@eae-christian yeah, i mentioned above that solution but the performance problem shows up.
ok i will try with library you shared
LVBK
on 29 Jul 2019
Me its about clicks/taps when I click a Item, other Item 18 positions down its selected too, I "resolve" this issues using disableRecycling={true} but this prop affects the performance.
It is how recycle work. Not a bug. just add close props to list item. Change it to true/false when swipe or scroll list. That's how i did it
I try this but same result, I using direct props, change states using ref and using redux (with the logic inside each row)... same result. For now I leave the disableRecycling={true} and using redux, for me its the best solution
eae-christian
on 29 Jul 2019
State needs to be reset on data change. That's how recycling works. If you are maintaining view states they will not reset automatically. That's why I recommend avoiding local states.
naqvitalha
on 29 Jul 2019
@naqvitalha Can you share an example? I couldn't understand what you say.
Frekansapp
on 20 Aug 2019
Local states will cause issues with recycling because when a component is recycled, it is not unmounted but instead only updated with the new data. The older state will therefore persist in the newer item and thus lead to unpredictable behaviour. You should ideally be passing such data via props by maintaining such state at a parent level.
arunreddy10
on 11 Nov 2019
@arunreddy10 I get it, and fine, but it doesn't really make sense to keep every piece of state at the parent level. Local state is valid and an encouraged React practice in most situations.
It wouldn't make sense to keep track of whether or not a button is toggled on the parent level, because then you'd have to keep track of everything on the parent level and you would end up with massive components that go against the principles of React.
dariuscosden
on 23 Apr 2021
Related issues
H-Shafiei
路
8Comments
ErHarinderSingh
路
6Comments
ardyfeb
路
6Comments
gilra2000
路
6Comments
LukaszK88
路
6Comments
Most helpful comment
@arunreddy10 I get it, and fine, but it doesn't really make sense to keep every piece of state at the parent level. Local state is valid and an encouraged React practice in most situations.
It wouldn't make sense to keep track of whether or not a button is toggled on the parent level, because then you'd have to keep track of everything on the parent level and you would end up with massive components that go against the principles of React.