What am I missing with "useAnimatedProps"?

[enzomanuelmangano]

Hello guys.
I'm trying to animate the trackColor property of the Switch component from the react-native package.
The purpose is to animate the trackColor by using interpolateColor function from reanimated. Since trackColor isn't a style property I need to use "useAnimatedProps" hook.

Actually I am already animating the backgroundColor of the Animated.View with interpolateColor and I'm almost sure that it is working properly.

Code

Here I provided all the code needed to replicate my issue.

import React, { useCallback, useState } from 'react';
import { StyleSheet, Switch } from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedProps,
  useAnimatedStyle,
  useDerivedValue,
  withTiming,
} from 'react-native-reanimated';

type Theme = 'light' | 'dark';

Animated.addWhitelistedNativeProps({ trackColor: true });

const AnimatedSwitch = Animated.createAnimatedComponent(Switch);

export default function App() {
  const [theme, setTheme] = useState<Theme>('light');

  const progress = useDerivedValue(() => {
    return theme === 'dark' ? withTiming(1) : withTiming(0);
  }, [theme]);

  const backgroundColor = useDerivedValue(() => {
    return interpolateColor(progress.value, [0, 1], ['white', 'black']);
  });

  const rViewStyle = useAnimatedStyle(() => ({
    backgroundColor: backgroundColor.value,
  }));

  const animatedProps = useAnimatedProps(() => {
    const color = interpolateColor(progress.value, [0, 1], ['grey', 'violet']);

    return {
      trackColor: {
        true: color,
        false: color,
      },
    } as any;
  });

  const onValueChange = useCallback((value: boolean) => {
    setTheme(value ? 'dark' : 'light');
  }, []);

  return (
    <Animated.View style={[styles.container, rViewStyle]}>
      <AnimatedSwitch
        onValueChange={onValueChange}
        value={theme === 'dark'}
        animatedProps={animatedProps}
      />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Current Behavior

Expected Behavior

Package Versions

• Expo SDK: 41
• React Native Reanimated: 2.1.0