Accordion animation error warning: Warning: Overriding previous layout animation with new one before the first began

538 Views Asked by At

I am trying to have animate the arrow moving from left to top but i keep getting this error

const { colorScheme } = useColorScheme();
  const [expanded, setExpanded] = useState(defaultExpand);
  const animatedController = useRef(new Animated.Value(0)).current;

  const arrowAngle = animatedController.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "90deg"],
  });

  const toggleExpand = useCallback(() => {
    Animated.timing(animatedController, {
      duration: 300,
      toValue: expanded ? 0 : 1,
      useNativeDriver: true,
    }).start();
    setExpanded(!expanded);
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  }, [expanded]);

whenever I remove

 LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

The warning goes away but with layout animation, the accordion opens smoothly. Any idea how to fix this? and am using Animated from react native

0

There are 0 best solutions below