0

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)}
  • Make sure you are still rendering components even if `expanded` is false. Try different numbers instead of 0's, for example height can go from 100 to 20 instead of from 100 to 0. Turn animation off one by one to identify the problem – Max Mar 25 '20 at 12:35
  • @Max I will try it later. Changed it to class component right now. – Necmettin Sargın Mar 25 '20 at 13:01

0 Answers0