"[object Object]" is not a valid color or brush

[qmode]

I get an error "[object Object]" is not a valid color or brush, when I try to run the code on android.

import React, {memo} from 'react';
import Animated, {
useAnimatedProps,
interpolateColor, useDerivedValue, useSharedValue, useAnimatedStyle, withTiming,
} from "react-native-reanimated";
import {Path} from 'react-native-svg';
import {Platform, StyleSheet} from 'react-native';

const AnimatedColor = memo(props => {
const {
progress,
unCheckedBorderColor,
checkedBorderColor,
unCheckedBackgroundColor,
checkedBackgroundColor,
height,
width,
} = props;

const AnimationColor = Animated.createAnimatedComponent(Path);

const animation = useAnimatedProps(() => {
const fill = interpolateColor(
progress.value,
[0, 1],
[unCheckedBackgroundColor, checkedBackgroundColor],
);
const stroke = interpolateColor(
progress.value,
[0, 1],
[unCheckedBorderColor, checkedBorderColor],
);
return {fill, stroke};
});

return (
<>

</>
);
});

[badalsaibo]

This is happening for me only in debugging mode in Android

[Stewartarmbrecht]

Did you ever figure this out?

[MatiPl01]

Hey!

Could you please provide a repro with code that causes the issue for you?

The code snippet in the description of the issue doesn't show that is passed for color properties to the AnimatedColor component. I think that the problem is the wrong data type passed as colors. I tired to reproduce this issue locally but I can see no crashed when I pass colors in hexadecimal format (didn't tried with other types).

[Stewartarmbrecht]

I don't have a repro but I ended up fixing the issue by changing the way I was accessing the colors. I changed this:

  const theme = useTheme();
  const accentColor = theme.accentColor.get();
...later in code...
                    <Info color={accentColor} testID='info-icon' />

to this:

  const theme = useTheme();
  const accentColor = theme.accentColor;
...later in code...
                    <Info color={accentColor} testID='info-icon' />

However, I'm stuck trying to figure out how to use my colors returned by the tamagui theme in non-tamagui components. How would I get the background color's string value. Typescript seems to think the get() function would return a string but that is what is throwing the [object Object] error.

[MatiPl01]

Can you try theme.background.val instead of .get()?

It looks like the .get() method can return an object (OpaqueColorValue) but .val returns ColorTokens type which should be an union of string values.

This code is copied from Tamagui:

type OpaqueColorValue = symbol & { __TYPE__: 'Color' }

export type DynamicColor = ColorTokens | string | OpaqueColorValue

export const useSporeColors = useTheme as unknown as () => {
  [key in ThemeKeys]: {
    val: ColorTokens
    get: () => DynamicColor
    variable: string
  }
}

[MatiPl01]

I can see that in a project I've been working at we've been accessing colors from the Tamagui theme by using the .val property inside reanimated animated styles. Hope it will work for you as well.

[Stewartarmbrecht]

That did the trick. Thanks!

[MatiPl01]

I will close this discussion. In case anyone encounters a similar problem, please make sure that the color variable you pass to the interpolateColor is valid.