Property Resolver

gluestack-style enables you to modify the value resolution for any style property by providing a callback function for any style property in your gluestack-style.config file or when creating a component using styled. For example, if you want to add support for RGBA values in the background-color property you can follow the below example.

function hexToRgba(hex, alpha) {
  let r, g, b
  if (hex.length === 4) {
    r = "0x" + hex[1] + hex[1]
    g = "0x" + hex[2] + hex[2]
    b = "0x" + hex[3] + hex[3]
  } else if (hex.length === 7) {
    r = "0x" + hex[1] + hex[2]
    g = "0x" + hex[3] + hex[4]
    b = "0x" + hex[5] + hex[6]
  }
  return "rgba(" + +r + "," + +g + "," + +b + "," + alpha.toString() + ")"
}

const MyButton = styled(
  Pressable,
  {
    bg: "$red500:alpha-50",
  },
  {
    descendantStyle: ["_text"],
  },
  {
    propertyResolver: {
      backgroundColor: (rawValue, resolver) => {
        if (rawValue.includes(":alpha-")) {
          let opacity = resolver(rawValue.split(":alpha-")[1], "opacity")
          let value = rawValue.split(":alpha-")[0]
          return hexToRgba(resolver(value), opacity)
        } else {
          return resolver(rawValue)
        }
      },
    },
  }
)

To avoid complexity and make it easy to understand we stick to resolving only against the final style property that gets attached to the stylesheet. Therefore, you cannot provide resolvers for a specific alias

function hexToRgba(hex, alpha) {
  let r, g, b
  if (hex.length === 4) {
    r = "0x" + hex[1] + hex[1]
    g = "0x" + hex[2] + hex[2]
    b = "0x" + hex[3] + hex[3]
  } else if (hex.length === 7) {
    r = "0x" + hex[1] + hex[2]
    g = "0x" + hex[3] + hex[4]
    b = "0x" + hex[5] + hex[6]
  }
  return "rgba(" + +r + "," + +g + "," + +b + "," + alpha.toString() + ")"
}

const MyButton = styled(
  Pressable,
  {
    bg: "$red500:alpha-50",
  },
  {
    descendantStyle: ["_text"],
  },
  {
    propertyResolver: {
      // ✔️
      backgroundColor: (rawValue, resolver) => {
        if (rawValue.includes(":alpha-")) {
          let opacity = resolver(rawValue.split(":alpha-")[1], "opacity")
          let value = rawValue.split(":alpha-")[0]
          return hexToRgba(resolver(value), opacity)
        } else {
          return resolver(rawValue)
        }
      },
      // ❌
      bg: (rawValue, resolver) => {
        if (rawValue.includes(":alpha-")) {
          let opacity = resolver(rawValue.split(":alpha-")[1], "opacity")
          let value = rawValue.split(":alpha-")[0]
          return hexToRgba(resolver(value), opacity)
        } else {
          return resolver(rawValue)
        }
      },
    },
  }
)

Resolving Props with Property Resolver (Experimental)

You can also use the property resolver to resolve props that are passed to the component. For example, if you want to resolve the colors prop of the LinearGradient component you can do it like this. You just need to add the propertyTokenMap and propertyResolver inside props of propertyResolver in the config.

Warning: This is an experimental feature and may be subject to future API changes.

import React from "react"
import { styled } from "@gluestack-style/react"
import { AppProvider } from "./Provider"
import { LinearGradient } from "expo-linear-gradient"

const StyledLinearGradient = styled(
  LinearGradient,
  {
    bg: "$primary500",
    h: "$40",
    w: "$40",
  },
  { resolveProps: ["colors"] },
  {
    propertyTokenMap: {
      colors: "colors",
    },
    propertyResolver: {
      props: {
        colors: (value: any, resolver: any) => {
          return value.map((color: any) => resolver(color))
        },
      },
    },
  }
)

export function PropertyResolver({ ...args }: any) {
  return (
    <AppProvider>
      <StyledLinearGradient
        colors={["$red400", "$blue300"]}
        {...args}
      ></StyledLinearGradient>
    </AppProvider>
  )
}
export default PropertyResolver

API Reference:

Parameters :
- value: This is the raw value that is passed to the component (inline or from baseStyle).
- resolver: A function that takes in a token value and returns the corresponding output.
Returns: String or Numerical value to be passed to the specific property within the style prop of the component.

Note: The Property Resolver is locally scoped so if you define it in a components config then it will only modify that property value for that particular component. To apply this functionality globally, define it in the gluestack-style.config.js/ts file as shown below.

import { createConfig } from "@gluestack-style/react"

export const config = createConfig({
  aliases: {
    bg: "backgroundColor",
    backgroundColor: "backgroundColor",
    // ...
  },
  tokens: {
    // ...
  },
  globalStyle: {
    // ...
  },
  propertyResolver: {
    backgroundColor: (rawValue, resolver) => {
      if (rawValue.includes(":alpha-")) {
        let opacity = resolver(rawValue.split(":alpha-")[1], "opacity")
        let value = rawValue.split(":alpha-")[0]
        return hexToRgba(resolver(value), opacity)
      } else {
        return resolver(rawValue)
      }
    },
  },
} as const)

Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimized at build time.