Implementing Dark Mode Transitions

In this lesson, you will learn how to create a buttery-smooth visual crossfade when switching your app between light and dark themes.

When a user toggles dark mode, a sudden change in background colors can feel jarring. To make this professional, we use react-native-reanimated to interpolate colors between your theme states. Instead of swapping CSS-like classes instantly, we treat the background color as an animatable property.

The Core Concept

The trick is to use useSharedValue to track your theme state (e.g., 0 for light, 1 for dark) and useDerivedValue to map that numerical value to specific color sets. By wrapping your main container in an Animated.View, you can interpolate the background color automatically as the value transitions.

Here is how you define that transition:

import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

const themeValue = useSharedValue(0); // 0 = Light, 1 = Dark

const animatedStyle = useAnimatedStyle(() => {
  return {
    backgroundColor: interpolateColor(
      themeValue.value,
      [0, 1],
      ['#FFFFFF', '#121212'] // Light to Dark colors
    ),
  };
});

// To trigger the switch:
const toggleTheme = () => {
  themeValue.value = withTiming(themeValue.value === 0 ? 1 : 0, { duration: 500 });
};

Why This Matters

By animating the backgroundColor property, you prevent "visual snapping." When users interact with your theme toggle, they perceive a cohesive shift rather than a system glitch. This approach works seamlessly with your existing layout structures. Because we are using useAnimatedStyle, the color update happens on the UI thread, ensuring that the transition remains responsive even if your JavaScript thread is busy handling data or navigation logic.

Keep in mind that you should apply this logic to the top-level container or individual components that need to respond to the shift. This provides a tactile, "premium" feel to your app, confirming to the user that their preference change was processed intentionally and gracefully.

Key Takeaway: Use interpolateColor with a withTiming animation to morph your UI colors smoothly instead of snapping them instantly during theme changes.