withTiming: Animate Values Over a Set Duration
withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.
Why it exists
Many UI animations need to change a property from a start value to an end value over a specific, predictable duration. Manually calculating the value for each frame is complex and inefficient. We need a declarative way to say "animate this property to that value in exactly 500 milliseconds."
The mental model
Think of withTiming as a programmable CSS transition. Instead of defining transition: opacity 0.3s ease-in-out in a stylesheet, you apply the same concept directly to a shared value in JavaScript. You set the destination, the travel time, and the "mood" of the journey via an easing curve.
How it works
withTiming is a function that you assign to a shared value's .value property. It takes a target value as its first argument. The second, optional argument is a configuration object where you specify duration in milliseconds (default is 300ms) and an easing function from Reanimated's Easing module. The engine then calculates all intermediate values on the UI thread, ensuring a smooth animation that isn't blocked by a busy JavaScript thread. It can animate numbers, colors, and even transform matrices.
When to use it
Use withTiming for any animation where the duration is the most important factor. This is perfect for choreographed UI sequences like fading an element in or out, showing a progress bar, expanding or collapsing a component to a fixed height, or sliding a menu open. It's for animations that run on a schedule, not ones that react.
When not to use it
Avoid withTiming for animations that should feel physically responsive to user interaction. A gesture-driven drag-and-drop, a card "springing" back into place, or a bouncy modal appearance will feel robotic with a fixed duration. For these, the physics-based withSpring is the correct tool as it simulates forces, not a clock.
One canonical example
To fade a component in over 500 milliseconds, first define a shared value for its opacity: const opacity = useSharedValue(0);. Then, in an effect or event handler, trigger the animation: opacity.value = withTiming(1, { duration: 500 });. Finally, connect this value to your component's style: const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));.
Interview question
Which animation scenario is best suited for using Reanimated's withTiming?
- a.A draggable element smoothly following a user's finger across the screen.
- b.An element fading into view over a precisely defined 500-millisecond period.Correct
- c.An object continuously accelerating and decelerating based on simulated friction.
- d.A button providing a bouncy, spring-like feedback when pressed.
Why? this is the answer
withTiming is designed for animations with a fixed duration and easing, making it perfect for predictable, time-based effects like fading. Scenarios involving user gestures, physics-based responses, or continuous motion are better handled by other Reanimated primitives like withSpring or direct value updates, as withTiming's fixed duration would feel robotic.
Just read this? Test yourself on what you have been reading.
Read the original → docs.swmansion.com
- #react-native
- #reanimated
- #animation
- #mobile
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles