React-native-collapsible: Collapsible slow and no animation on Android

[RobertBroersma]

I've copied the example in the Example folder.

When opening it on my Android emulator _or_ on my physical Android device, it is 9 of ten times very slow. The 1 out of 10 times it isn't slow, it becomes slow after the first hot-reload.

When pressing a button it takes about 0.5 - 1 seconds before the collapsible responds and opens/closes. I thought it could be because of too little memory on my emulator, but my physical device should be fast enough (Nexus 6P). I thought it could be because the rest of my app uses Redux, but the example obviously doesn't interact with that.

Could it be an Expo issue?

I saw some similar issues on here, but not really a solution.

using

"expo": "^22.0.0",
"moment": "^2.18.1",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1",
"react-native-animatable": "^1.2.4",
"react-native-collapsible": "^0.9.0"

[mtebele]

Same here, it's extremely slow on Android.

[iRoachie]

Are you testing performance in release mode?

[RobertBroersma]

@iRoachie I've tested in development and in release mode, same results

[RobertBroersma]

Today it takes about 10-20 seconds for an item to collapse. Seems kind of random.

[josvos]

Using Accordion, I have no problems on Android, both on emulator and on device (even with dev mode enabled): items collapse smoothly. Using react-native 0.49.3 (natively, no Expo etc.), if that matters.

[mtebele]

It works good on release, but not in debug mode.

[hiepnm]

I have the same problem in debug mode (I have already started remote js debugging)

[johnlaine1]

Same problem here. Takes about 5 seconds to load the initial scene and then opening and closing of the sections is slow and janky.

[john1jan]

it slow for me as well

[iRoachie]

Will look into this today

[mikpalm]

Any progress?

[seriph]

Same issue here. Pixel XL

[iRoachie]

So guys I've been doing some testing and unable to reproduce any sluggish behavior. Not ruling out the fact that you may have it, but you may want to check if your render is handling any intensive operations that may block the js thread.

Example on API 19(Lollipop Nexus 7)

Example on API 26 (Oreo Nexus 5X)

[mikpalm]

In my case. our headers have two ways to display and alter on open/close, our content have images in them round thumb images divided on left and right side. and the issue is more when you open and close the same one quickly, first its lagging alot and on random occasions, the content part gets clipped/cut and is semi displayed in the header. for me the issue is more prominent on slower systems. for ex 5.1.1. (Cant show you a gif of it right now tho). But I have made an ugly solution to all this. That is that I lock the hole thing until onChange is called. And I changed the Animation on Android to linear.

[zhangjinbo619]

I have the same problem in debug && release in android.

and then I found console.log(this) in my code.

So I don't get these problems back after I delete these debug information。

I hope to help you。

[kylethebaker]

I was running into this issue on android too, but for me the issue was remote debugging being enabled (I use react-native-debugger specifically, not sure if the same problems arise using the chrome debugger or not). Disabling remote debugging (while not ideal while developing) fixed this on android for me. It also means that in the release builds we don't run into this.

[Luminisc]

Same thing here, there are no animation and really slow open/close of accordion while JS debugging enabled. Disabling of a debugger is fixing the problem.
"react-native": "0.50.2",
"react-native-collapsible": "^0.10.0"

[damathryx]

same here. any updates on this?

[jgfidelis]

Still happening on @1.2.0

[TeChn4K]

Same as @kylethebaker, disabling remote JS debugging solve this issue.

[jeffmon]

This is a common problem, even when using the Animated component of react-native. I was running into this issue with a list of collapsible components all subscribed to the redux store. My coworker pointed out that every time something in the store changed, all components were being re-rendered, hence the sluggishness of any animation.

My tip is to go through and make sure that your components are only subscribed to things that they really need. In my case, I was getting a variable from redux and comparing it to another prop in each component in the list, so every component was being re-rendered every time that variable changed, hence the sloooow animation. I simple changed the prop to come from the parent component as a boolean instead of comparing the redux store variable to another prop and the difference was night and day!

[sibelius]

check this https://www.npmjs.com/package/react-native-reanimated-collapsible

[oblador]

PR #401 migrates to reanimated instead for smoother animation experience, please give it a spin 👍