rn-sliding-up-panel: Very slow animation

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 24 (2 by maintainers)

Most upvoted comments

yanuwar on May 31, 2019

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

davidsmall89 on Jul 5, 2019

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

saiyam-sage on Jul 2, 2019

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.

octopitus on Jul 10, 2019

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

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

nicost71 on Jun 18, 2020

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

moxorama on Jul 2, 2019

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.

vgb0332 on Jun 4, 2019

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

29er on Mar 26, 2021

@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

cihanbas on Jul 3, 2019

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

gilsonviana on Jan 22, 2021