How to reduce the speed of popup?

[Prasanna4693]

I want to reduce the speed of the popup dialog.I used the like..

<PopupDialog ref={"cartClosePopup"} dialogStyle={{height: 300, width: 300, backgroundColor: 'rgba(0, 0, 0, .0)',}} dialogAnimation={slideAnimation} closeOnTouchOutside={false} overlayBackgroundColor={'#000000'} overlayOpacity={0.8} animationDuration={1600}

        >

But it is not taking the speed i have given.

[jacklam718]

@Prasanna4693 Currently we cannot change the speed for the SlideAnimation but you can create new animation by you self and pass it into the PopupDialog component by the dialogAnimation prop.

For example:

/* @flow */

import { Animated } from 'react-native';
import { Animation } from 'react-native-popup-dialog';

type Param = {
  toValue: number,
  slideFrom: string,
}

export default class SlideAnimation extends Animation {
  constructor({ toValue = 0, slideFrom = 'bottom' }: Param) {
    super(toValue);
    this.animations = this.createAnimations(slideFrom);
  }

  toValue(toValue: number, onFinished: ?Function) {
    Animated.spring(this.animate, {
      toValue,
      velocity: 0,
      tension: 65, # change speed
      friction: 10,
    }).start(onFinished);
  }

  createAnimations(slideFrom: string): Object {
    const transform = [];

    if (['top', 'bottom'].includes(slideFrom)) {
      if (slideFrom === 'bottom') {
        transform.push({
          translateY: this.animate.interpolate({
            inputRange: [0, 1],
            outputRange: [800, 1],
          }),
        });
      } else {
        transform.push({
          translateY: this.animate.interpolate({
            inputRange: [0, 1],
            outputRange: [-800, 1],
          }),
        });
      }
    } else if (['left', 'right'].includes(slideFrom)) {
      if (slideFrom === 'right') {
        transform.push({
          translateX: this.animate.interpolate({
            inputRange: [0, 1],
            outputRange: [800, 1],
          }),
        });
      } else {
        transform.push({
          translateX: this.animate.interpolate({
            inputRange: [0, 1],
            outputRange: [-800, 1],
          }),
        });
      }
    }

    const animations = {
      transform,
    };

    return animations;
  }
}

[chandniKkpl]

If you want to do something related to speed then use Animated.timing because in the spring animation we don't have any control related to speed.