How to use the react-native.Animated.timing function in react-native

To help you get started, we’ve selected a few react-native examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sophister / react-native-pull-to-refresh-custom / lib / PullToRefresh.js View on Github external
componentDidUpdate(prevProps, prevState) {
        if (!prevProps.refreshing && this.props.refreshing) {
            // 从 未加载 变化到 加载中
            const holdHeight = this.props.refreshingHoldHeight || this.props.headerHeight;
            Animated.timing(this.state.containerTop, {
                toValue: holdHeight,
                duration: 150,
                useNativeDriver: true,
            }).start();
        }
        else if (prevProps.refreshing && !this.props.refreshing) {
            // 从 加载中 变化到 未加载
            Animated.timing(this.state.containerTop, {
                toValue: 0,
                duration: 250,
                useNativeDriver: true,
            }).start();
        }
    }
    componentWillUnmount() {
github didi / mand-mobile-rn / src / components / popup / index.web.tsx View on Github external
private setVisible (show: boolean) {
    const { onBeforeShow, onBeforeHide } = this.props;
    show ? onBeforeShow && onBeforeShow() : onBeforeHide && onBeforeHide();
    if (!show) {
      // out
      Animated.timing(this.state.animTime, {
        toValue: 0,
        duration: 250,
      }).start(() => {
        this.setState({
          isVisible: show,
        });
      });
    } else {
      // in
      this.setState(
        {
          isVisible: show,
        },
        () => {
          Animated.timing(this.state.animTime, {
            toValue: 1,
github 15826954460 / BXStage / app / components / hebao / PTRScrollList.ios.js View on Github external
infiniteLoading = () => {
    Animated.timing(this.state.progress, {
      toValue: aniStage2,
      duration: 400,
      useNativeDriver: true,
    }).start(({finished}) => {
      finished && this.loopLoading()
    })
  };
github lhandel / react-native-card-flip / CardFlip.js View on Github external
duration,
        useNativeDriver: true
      }),
      Animated.sequence([
        Animated.timing(zoom, {
          toValue: 100,
          duration: duration / 2,
          useNativeDriver: true
        }),
        Animated.timing(zoom, {
          toValue: 0,
          duration: duration / 2,
          useNativeDriver: true
        })
      ]),
      Animated.timing(rotation, {
        toValue,
        duration: duration,
        useNativeDriver: true
      })
    ]).start(() => {
      this.props.onFlipEnd(side === 0 ? 1 : 0);
    });
  }
github crownstone / CrownstoneApp / js / views / components / deviceEntries / DeviceCommandProgressBar.tsx View on Github external
_failureFinish() {
    this.props.updateStatusText(null);
    Animated.timing(this.state.progressColor, {toValue: -1, duration: 250}).start( () => { this._hideCommandProgressBar(500) });
  }
github expo / expo / apps / native-component-list / instagram / screens / CameraScreen.js View on Github external
componentWillReceiveProps(nextProps, prevState, snapshot) {
    if (nextProps.page.id !== this.props.page.id) {
      Animated.timing(this.liveAnimation, {
        toValue: this.getAnimatedValue(nextProps),
        duration: 300,
      }).start();
    }
  }
github codypearce / material-bread / src / Components / Button / ContainedButton / ContainedButton.js View on Github external
});
    } else {
      const {
        animatedShadowRadius,
        animatedShadowOpacity,
        animatedShadowHeight,
        animatedShadowWidth,
      } = this.state;

      const shadowRadius = active ? 6.65 : 4.65;
      const shadowShadowOpacity = active ? 0.27 : 0.35;
      const shadowHeight = active ? 5 : 3;
      const shadowWidth = active ? 1.5 : 1;

      Animated.parallel([
        Animated.timing(animatedShadowRadius, {
          toValue: shadowRadius,
          duration: animationDuration,
        }),
        Animated.timing(animatedShadowOpacity, {
          toValue: shadowShadowOpacity,
          duration: animationDuration,
        }),
        Animated.timing(animatedShadowHeight, {
          toValue: shadowHeight,
          duration: animationDuration,
        }),
        Animated.timing(animatedShadowWidth, {
          toValue: shadowWidth,
          duration: animationDuration,
        }),
      ]).start();
github garblovians / react-native-svg-pan-zoom / src / SvgPanZoom.tsx View on Github external
const transform: ViewTransform = viewTransformMult(tranlationMatrix, scalingMatrix)

    const newTransform: ViewTransform = getBoundedPinchTransform(
      viewTransform,
      viewTransformMult(viewTransform, transform),
      minScale,
      maxScale
    )

    Animated.parallel([
      Animated.timing(this.state.TranslationAnimation, {
        toValue: { x: newTransform.translateX, y: newTransform.translateY },
        duration: 0,
        useNativeDriver: true
      }),
      Animated.timing(this.state.scaleAnimation, {
        toValue: newTransform.scaleX,
        duration: 0,
        useNativeDriver: true
      })
    ]).start()

    this.setState({
      viewTransform: newTransform,
    })
  }