withTiming
- React Native course
- Advanced
- Lesson 64/83
- 5 min
Learn timing animations with withTiming.
withTiming
withTiming takes the shared value to the target in a fixed time. The default duration is 300 ms. Example: offset.value = withTiming(100). This moves the value from 0 to 100 in 300 ms linearly.
The duration can be customized: withTiming(100, { duration: 500 }). The second parameter is a configuration object; it takes duration and easing. Easing functions like Easing.inOut(Easing.ease) set the speed curve of the animation. withTiming is ideal for opacity and color transitions.
Customizing with duration
To change the duration you pass a configuration object as the second parameter: withTiming(100, { duration: 500 }). Here the animation completes in 500 ms. A longer duration feels slower, a shorter one faster.
The easing field sets the speed curve of the animation. Easing.in(Easing.quad) starts slow, Easing.out(Easing.quad) ends slow. Easing.inOut is slow at both ends. Easing.inOut(Easing.ease) is a common choice for a natural feel.
Practice A withTiming animation
Import withTiming from react-native-reanimated. Write offset.value = withTiming(100, { duration: 500 }). Go to 100 in 500 ms.
Starter code
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useTimingMove() {
const offset = useSharedValue(0);
function run() {
// go to 100 in 500 ms with withTiming
}
return { offset, run };
}Sample solution
import React from 'react';
import { useSharedValue, withTiming } from 'react-native-reanimated';
export function useTimingMove() {
const offset = useSharedValue(0);
function run() {
offset.value = withTiming(100, { duration: 500 });
}
return { offset, run };
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the default withTiming duration?
- 3 seconds Correct answer
- 30 ms
- 3000 ms
- 300 ms
Explanation: The default withTiming duration is 300 ms.
2 Match the withTiming parts
| Term | Meaning |
|---|---|
withTiming |
Fixed duration |
duration |
Duration (ms) |
Easing.inOut |
Speed curve |
100 |
Target value |
3 Write the duration value
withTiming(100, { duration: ____ })withTiming(100, { duration: 500 })Explanation: 500 is the duration in milliseconds.