Animation from sub-component is not displayed - reactjs

Question

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.

Answer 1

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>)
}

Answer 2

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