CODEWITHSUNDEEP
reactjsreact-native
CharlieWhite
CharlieWhite

Reputation: 143

Animation from sub-component is not displayed

Problem : Animation is not played from the parent component.

Context :

I have two components.

The first one (Parent component):

export default function LevelSecondItem (props) {
    const { Data, moveTo, Identifiant, Score, GAME } = props;

    return (
        <View style={styles.main_container}>
          <ProgressBarLight 
            percentage={40} 
            total={3}
            items={1}
            label={Data.description}
          />
          <View style={styles.second_container}>
            <ButtonCustom text={"Commencer"} onPress={() => moveTo(Data.puzzle,Identifiant+"-"+Data.id,GAME) }/>
          </View>
        </View>
    )

}

The second component (sub-component - child) :

const ProgressBarLight = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current  // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 100,
        duration: 10000,
        useNativeDriver:false
      }
    ).start();
  }, [fadeAnim])

  return (<Animated.View><Animated.Text>{fadeAnim}</Animated.Text></Animated.View>)
}

Comment :

When saving the file, react is updating the app. In this way, I'm able to see the animated value. The value is changing. But the main component is not showing the animation. I don't know why.

Upvotes: 0

Views: 519

Answers (2)

CharlieWhite
CharlieWhite

Reputation: 143

You need to reset the animated value to zero by using animation.setValue(0) . I was not able to find this function... I try to use setAnimation(0) and this is thowing an error.

import React, { useState, useEffect } from 'react'
import { Text, View, StyleSheet, Animated } from 'react-native'
import {GREY80_VALUE,GREEN_VALUE} from '../GlobalConstant'

export default function CardIndicator(props) {
    const { currentTotalIndex, currentTotalObject } = props;

    const [animation, setAnimation] = useState(new Animated.Value(0));

    const anim = ()=>{
        Animated.timing(
            animation,
            {
              toValue: 1,
              duration: 1000,
              useNativeDriver: false,
            }
          ).start(()=>{
            Animated.timing(
                animation,
                {
                  toValue: 0,
                  duration: 1000,
                  useNativeDriver: false,
                }
              )
          });
    }

    useEffect(()=>{
        animation.setValue(0)
        anim()
    },[currentTotalIndex])

    const boxInterpolation =  animation.interpolate({
      inputRange: [0, 1],
      outputRange:[GREEN_VALUE , GREY80_VALUE]
    })

    const animatedStyle = {
        backgroundColor: boxInterpolation
    }

    return (<Animated.View style={{padding:10,borderRadius:5,...animatedStyle}}><Text style={{fontFamily:"RobotoMono-Bold",fontSize: 16}}>{currentTotalIndex+" / "+currentTotalObject}</Text></Animated.View>)
}

Upvotes: 1

shammi
shammi

Reputation: 1399

you can use react native animatable library it's very easy to use just like this

import * as Animatable from 'react-native-animatable';
const FadeInView = (props) => {

  return (<View><Animatable.Text animation="fadeIn">{"your text here"}</Animatable.Text></View>)
}

you can find more props of this library and use it

Upvotes: 0

Related Questions