Code Quiz

Native Driver Animation Gotcha

Spot the bug in an Animated view that tries to use the native driver.

Codejavascript

import React, { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

function ExpandingBox() {
  const height = useRef(new Animated.Value(50)).current;

  useEffect(() => {
    Animated.timing(height, {
      toValue: 200,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [height]);

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

export default ExpandingBox;

What is the bug that prevents this animation from working correctly?

← PreviousRendering Performance Fundamentals Next →Native Driver Animation Limits