Support DynamicColorIOS

[chrisnojima]

Hi,
Would it be possible to support DynamicColorIOS (https://reactnative.dev/docs/dynamiccolorios). We currently use this to have nice auto dark/light support on ios but these colors don't play nicely with animated views. We use these colors extensively and when we need to use an animated view we have to convert them. Is it a big lift to handle them natively in reanimated?

[tomekzaw]

Hi @chrisnojima, thanks for opening the discussion. What exactly do you mean by supporting DynamicColorIOS? Would you like to use them within useAnimatedStyle or with CSS animations or transitions? Could you show us a code snippet and describe its expected behavior?

[chrisnojima]

My primary use case is useAnimatedStyle.
I think the behavior changed between 3 and 4. In 3 you can pass a DynamicColorIOS style thats not animated to the animated view and it will render fine, but it does not support animating the color. In 4 you can't do that as it filters all the styles and then complains if the color isn't a string/number. I already worked around the lack of animation support , but it would be nice to support the non-animated styles passing through. Ideally they'd be animatable also. I wouldn't expect the animation to work as it's dynamically switching (although that would be nice also)

Here's an MR of me updating from 3 to 4: https://github.com/keybase/client/pull/28435/files#diff-89cddb7e12667f3747b55b68246420611bcdb5a1a18b1077e76d11403f134d13R10

One small example is:

const backgroundColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
})

const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
    }
  })
  return <Animated.View style={[
  {backgroundColor}, // this used to work
  animatedStyle
]} />

[patrycjakalinska]

hi @chrisnojima!

I've tried passing a static backgroundColor to an Animated component in Reanimated 4, and it works for me.
Could you tell me what you're trying to achieve that's different to the example code, so I can look into it? Also, let me know if this example works on your end c:.

Example code that's working

import React, { useEffect, useState } from 'react';
import { Button,StyleSheet, View, DynamicColorIOS} from 'react-native';
import Animated, {interpolateColor,runOnUI, runOnJS, useAnimatedStyle, useSharedValue, withTiming, useAnimatedProps } from 'react-native-reanimated';

export default function EmptyExample() {
  const opacity = useSharedValue(1);
  const width = useSharedValue(100);
  const backgroundColor = DynamicColorIOS({light: 'red', dark: 'blue'})

  useEffect(() => {
    const interval = setInterval(() => {
      opacity.value = withTiming(opacity.value === 1 ? 0.2 : 1, {duration: 2000})
      width.value = withTiming(width.value === 100 ? 200 : 100, {duration: 2000})
    }
    ,2000
    )
    return () => clearInterval(interval)
    },[])
  
    const animatedStyle = useAnimatedStyle(() => {
      return {
        opacity: opacity.value,
        width: width.value
      };
    });

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Animated.View style={[styles.container, animatedStyle, {backgroundColor}]}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 100,
  },
});

Screen.Recording.2025-09-09.at.09.29.17.mov

Regarding animations, I'll work on enabling them with DynamicColors in Reanimated :)

[chrisnojima]

Awesome news on actual support. So I can't repro this in 4.1.0 its actually 4.0.0