CODEWITHSUNDEEP
react-native
Elias Larsson
Elias Larsson

Reputation: 55

Reset Animation for Animted React Native

I've stumbled upon a problem when trying to use resetAnimation() in React Native.

I'm trying to build an animated.view that resets when a new view is displayed on a touchablewithoutfeedback component.

I cannot figure out how to reset the animation so that when I press my touchablewithoutfeedback the animation resets and starts again for the new that is displayed. It runs on the first render but then it stops and just displays the text normally.

Here are some snippets of my code.

import React, { useState, useEffect } from 'react';
import { Animated, StyleSheet } from 'react-native';


    const FadeView = (props) => {
      const [fadeAnim] = useState(new Animated.Value(0));  // Initial value for opacity: 0

      React.useEffect(() => {
        Animated.timing(
        fadeAnim,
        {
            toValue: 1,
            duration: 1000,
        }

        ).start(fadeAnim.resetAnimation())
    }, []);


      return (
        <Animated.View                 // Special animatable View
          style={{
            ...props.style,
            opacity: fadeAnim,         // Bind opacity to animated value
          }}
        >
          {props.children}
        </Animated.View>
      );

    }


    const styles = StyleSheet.create({
        view:{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        },

    });

    // You can then use your `FadeInView` in place of a `View` in your components:
    export default FadeView;

And where i try to use it. 

<FadeView>
  <Text style = {styles.gameText}> {question} </Text>
</FadeView>

Upvotes: 1

Views: 2800

Answers (1)

Elias Larsson
Elias Larsson

Reputation: 55

I managed to solve it by removing the 

, []

at the end of ).start(fadeAnim.resetAnimation()) }, []);

and adding 

fadeAnim.resetAnimation();

after that codeblock.

Upvotes: 1

Related Questions