tintColor prop on image doesn't accept tokens

[lhguerra]

Description

When i set a tint color with a color token I get invalid value error

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

1.1.17

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

ERROR Warning: Failed prop type: Invalid prop tintColor supplied to Image: $white.default
Valid color formats are

• '#f0f' (#rgb)

• '#f0fc' (#rgba)

• '#ff00ff' (#rrggbb)

• '#ff00ff00' (#rrggbbaa)

• 'rgb(255, 255, 255)'

• 'rgba(255, 255, 255, 1.0)'

• 'hsl(360, 100%, 100%)'

• 'hsla(360, 100%, 100%, 1.0)'

• 'transparent'

• 'red'

• 0xff00ff00 (0xrrggbbaa)

  at BaseImage (http://192.168.15.3:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:77578:70)
  in StyledComponent (created by Image)

[lhguerra]

I also don't know how to reset its value, no matter what I pass (like null or an empty string) gives me the invalid color error. We should be able to unset such value! Like this tintColor={reactionStatus === ReactionType.dislike ? "#D33030" : ""}

[surajahmed]

@lhguerra You can use useToken hook available in @gluestack-ui/themed. With this hook, you can access the token value, which can then be passed to the respective prop. For more details, follow this link https://gluestack.io/ui/docs/hooks/use-token

[lhguerra]

I know that, but why would I need to do that using a Gluestack component?

[surajahmed]

tintColor prop resolution is not supported by default in gluestack-ui. We'll add it in the future. Thanks for pointing this out.