react-native-collapsible: Collapsible slow and no animation on Android
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"
About this issue
- Original URL
- State: open
- Created 7 years ago
- Comments: 24 (1 by maintainers)
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”
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.
This is a common problem, even when using the
Animatedcomponent 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!
Same as @kylethebaker, disabling remote JS debugging solve this issue.
Still happening on
@1.2.0Will look into this today