I'm trying to make accordion component with animated api and useEffect hook but animation only works if expanded state is true. When expanded state false component closes itself but with no animation. How can i make this animation work at both state?
const [expanded, setExpanded] = useState(false);
useEffect(() => {
console.log(expanded ? "150" : "0",);
Animated.parallel([
Animated.timing(animatedBGColor, {
toValue: expanded ? 150 : 0,
easing: Easing.linear,
duration: 200,
}),
Animated.spring(animatedRotation, {
toValue: expanded ? 1 : 0,
tension: 100,
friction: 9,
}),
Animated.timing(animatedHeight, {
toValue: expanded ? (lineHeight + (scaleHeight(15) * 2)) : 0,
easing: Easing.linear,
duration: 200,
}),
Animated.timing(animatedMargin, {
toValue: expanded ? scaleHeight(15) : 0,
duration: 200,
})
]).start()
}, [expanded]);
I'm changing state with this button
<AnimatedTouchable onPress={() => setExpanded(!expanded)}