Code Quiz

Native Driver Animation Jank

A native-driver animation silently fails because it targets an unsupported style property.

Codejavascript

const ExpandingBox = () => {
  const anim = useRef(new Animated.Value(50)).current;

  useEffect(() => {
    Animated.timing(anim, {
      toValue: 250,
      duration: 400,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View
      style={{ height: anim, width: 100, backgroundColor: 'tomato' }}
    />
  );
};

This animation throws/warns and doesn't run smoothly. What is the bug and how do you fix it?

← PreviousReact Native Performance Essentials Next →Native Driver Animations & JS Thread Jank