Display Animated Value in React Native Render Text Component

Question

I can not display the Value of Animated on the Render and returns this error.

Invariant Violation: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

Of course, I see the Value in the console

constructor(props) {
    super(props);

    this.state={
       progress:0
    }

    this.animatedValue = new Animated.Value(0);

    this.animatedValue.addListener((progress) => {
        this.setState({progress})
    });
}

componentDidMount() {
    this.animate()
}

animate() {
    this.animatedValue.setValue(0);
    Animated.timing(
        this.animatedValue,
        {
            toValue: 1,
            duration: 15000,
            easing: Easing.linear
        }
    ).start()
}

render() {
    return(
        <View>
            <Text> {this.state.progress} </Text>
        </View>
    );

}

Tholle · Accepted Answer · 2018-07-03 18:30:06Z

9

The function given to addListener will be called with an object with a value key as argument, so instead of setting progress with the entire object, use the value instead:

this.animatedValue.addListener((progress) => {
  this.setState({ progress: progress.value });
});

answered Jul 3, 2018 at 18:30

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saeed Zhiany Over a year ago

This will causes state of component changes, and so Re-rendering!, am I right? if yes, any better idea exists?

Nick Bull Over a year ago

A good way to avoid unnecessary re-renders would be to depend upon a condition before calling setState, e.g., if (Math.round(progress.value) !== this.state.progress)

Max Over a year ago

Another way of avoiding too many rerenders is using a throttle

ismnoiet · Accepted Answer · 2020-03-25 13:48:47Z

1

Tholle solution works fine if the animated value doesn't change that much, because it will cause a component re-render(as mentioned by @saeedZhiany in his comment) each time the value changes and that can lead to performance issues.

The better solution for these cases is to use ._value property of animatedValue, something like this:

 <Text>
    {Math.round(this.animatedValue._value)}
 </Text>

This way you get the real value at anytime without updating the component state. Thus avoiding performance issues.

answered Mar 25, 2020 at 13:48

ismnoiet

4,16926 silver badges30 bronze badges

1 Comment

Alexander Sandberg Over a year ago

Note: If useNativeDriver: true this will always return 0.

Collectives™ on Stack Overflow

Display Animated Value in React Native Render Text Component

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related