Animated.timing in componentDidUpdate in React Native

Question

I'm trying to do the following

  componentDidUpdate() {
    Animated.timing(this.scaleValueAddAlertButton, {
      toValue: 1,
      duration: 225,
      easing: Easing.bezier(0.0, 0.0, 0.2, 1),
      useNativeDriver: Platform.OS === "android"
    });
  }

It's not working.

During debugging, I have noticed that the button is not there during componentDidUpdate and was not yet painted to the screen.

When I tried this animation after everything was renderd and painted, it does work.

Is there a callback I can set here that will tell me everything was painted and it's safe to use this animation?

You can use `componentDidMount()` after everything is mounted to the tree — Pritish Vaidya, Dec 29 '18 at 14:46
In componentDidMount I'm fetching the data and updating the state when the data arrives — Edgar Barber, Dec 29 '18 at 15:24
Then probably after the fetch api is resolved in a promise or something like that — Pritish Vaidya, Dec 29 '18 at 16:30
Then I'm updating the state, that is why I wanted to use it in componentdidupdate and only one time after fetching the data. Thanks — Edgar Barber, Dec 30 '18 at 06:49

score 0 · Answer 1 · answered Jan 12 '19 at 08:14

import React, { Component } from "react";

import { View, Animated } from "react-native";

class App extends Component {
  state = {
    borderRadius: new Animated.Value(100),
    loaded: false
  };

  componentDidMount() {
    // Let the component know when the data has loaded
    setTimeout(e => {
      this.setState({
        loaded: true
      });
    }, 2000);
  }

  componentDidUpdate(_, prevState) {
    // Check whether state has changed, else you might have loaded = true
    //  and every re-render will start the animation
    let hasStateChanged = prevState.loaded !== this.state.loaded;

    // Check if state has changed and data has been loaded
    if (hasStateChanged && this.state.loaded) {
      Animated.timing(this.state.borderRadius, {
        toValue: 16,
        duration: 1200,
        useNativeDriver: true
      }).start();
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Animated.View
          style={{
            height: 200,
            width: 200,
            borderRadius: this.state.borderRadius,
            backgroundColor: "red"
          }}
        />
      </View>
    );
  }
}

export default App;

Animated.timing in componentDidUpdate in React Native

1 Answers1