DynamicColorIOS

DynamicColorIOS is a workletized version of a React Native's DynamicColorIOS, designed to be used within Reanimated. It's a way to define colors that automatically adapt to light and dark mode on iOS.

Reference

import { DynamicColorIOS } from 'react-native-reanimated';

function Example() {
  const progress = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    // ...

    return {
      backgroundColor: DynamicColorIOS({
        light: lightColor,
        dark: darkColor,
      }),
      // hightlight-end
    };
  });
}

Type definitions

function DynamicColorIOS(
  {
    light: ColorValue,
    dark: ColorValue,
    highContrastLight?: ColorValue,
    highContrastDark?: ColorValue
  }
): DynamicColorValue;

type DynamicColorValue = {
  dynamic: {
    light: ColorValue,
    dark: ColorValue,
    highContrastLight?: ColorValue,
    highContrastDark?: ColorValue
  },
}

Arguments

tuple

An object with two mandatory keys: light and dark, and two optional keys: highContrastLight and highContrastDark.

Returns

An object containing a dynamic field, which holds the injected color values.

Example

  const animatedStyle = useAnimatedStyle(() => {
    const lightColor = interpolateColor(progress.value, [0, 1], LIGHT_COLORS);
    const darkColor = interpolateColor(progress.value, [0, 1], DARK_COLORS);

    return {
      backgroundColor: DynamicColorIOS({
        light: lightColor,
        dark: darkColor,
      }),
    };
  });

  return (
    <View>
      <Animated.View style={[styles.box, animatedStyle]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {

Platform compatibility

Android	iOS	Web
❌	✅	❌