Very slow animation

[pkt-dev]

Issue Description

When calling show or close some times the animation is extremely slow.

Steps to Reproduce / Code Snippets / Screenshots

<SlidingUpPanel
  showBackdrop={false}
  draggableRange={this.slideUpRange}
  animatedValue={this.draggedValue}
  allowDragging={false}
  ref={c => this.slideUpPanel = c}>

    {dragHandler => (
      <View style={[styles.slidingPanelContainer]}>
        <View style={styles.dragHandler} {...dragHandler}>
          {this.renderPanelPositionIcon()}
        </View>

         {this.renderPanelData()}
      </View>
  )}

</SlidingUpPanel>

---

Environment

• Version: 2.2.0
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 8 Debug

[yanuwar]

+1

[yemi]

+1

[pkt-dev]

Any help on this would be greatly appreciated. It doesn't matter the content. Android is pretty consistently extremely slow. I animate to 150 when I click on a map marker, and then have another button to make it animate to the top of the screen to show more details. Even without all of the data its still very slow.

[vgb0332]

Have you been testing with the debugger on? RN with js-debugger on will generally slow down any type of animation from my experience.

[pkt-dev]

Yes, I have debugging on. I turned it off, and the animation is much smoother. However, it doesn't really help when we are developing to have an animation going unbearably slow.

[vgb0332]

That is true, but i haven't find a way to have smooth animation while debugger on since RN came out. What I usually do is test for all the data process before applying any animation to the component or using Alert to display certain data if needed with debugger off(ex, Alert.alert(some data to display)). Another solution may be using real device, it's still slow but much smoother ans faster than when testing on virtual device in my opinion.

for this package, Im not sure if it has animation off option, but if it doesn't i'm sure you can fork the repo and make an animation off functionality yourself for test purposes.

[pkt-dev]

Thanks @vgb0332. I will attempt to do that.

[saiyam-sage]

I am also facing this issue, When calling the show or close the animation is extremely slow.

[saiyam-sage]

@pkt-dev have you any idea about this problem ?

[moxorama]

I think that solution is to rewrite animation with react-native-reanimated ;(

[saiyam-sage]

the problem is with when we use setstate or redux dispatch before show or close

[cihanbas]

@saiyam-sage Thank you for your help, when I use panel.show() after setState it is too slow, but ı use before setState it is good working

[saiyam-sage]

yes need to use react-native-reanimated

[davidsmall89]

I resolved this by making hide a callback in setState: this.setState( { sortsMenu: newSort }, this.slideUpPanel.hide )

[octopitus]

I would recommend you schedule your works to run after the animation has finished using InteractionManager.

InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

this.panelRef.show() // Or hide(). panelRef holding the reference the SlidingUpPanel component.

Since the entire animation is running in Javascript thread. Other scripts might occupy the thread and make the animation doesn't look smooth.

[saiyam-sage]

@octopitus but runAfterInteractions() is not fired sometime

[saiyam-sage]

@octopitus runAfterInteractions() is not always calling.

[octopitus]

@saiyam-sage this might be related https://github.com/facebook/react-native/issues/8624

[teodorciuraru]

Couldn't solve it in any way. Seems like something in the background (requests, maybe) block the main thread and slows this animation. Other SlidingMenu packages worked well, seems related to how the animations are initialized.

[nicost71]

I managed to get it working by running the show/hide in a javaScript setTimeout like this:

  setTimeout(() => {
    panelRef?.hide();
  });

[gilsonviana]

I was having the same issue while running on Expo Client while remote debugging. Disabling it solved the problem for me.

[29er]

i ended up using 'reanimated-bottom-sheet' as none of these attempts fixed preformance issues on Androi.

[iway1]

@29er Thanks so much for pointing me towards this library. I've spent more time than I care to admit trying to get rn-sliding-up-panel to work properly and it just consistently causes so many issues. For instance if you have multiple panels, calling .show() on one of them will show every panel. Like, why? reanimated-bottom-sheet works much better.

[kimkong88]

@29er Thanks, I guess I have to migrate to reanimated-bottom-sheet as well.. pretty painful since my entire app is relying on this library :(