Allow variant definitions as functions that receive the current variant value

[jake-carpenter]

I would like variant definitions in the StyleSheet to be functions that receive the currently selected variant value and return a style object (or style fragment). This makes it easy to map a variant directly to theme data without duplicating keys for each variant value.

Example of what I might have today:

type Appearance = 'round' | 'square'

const styles = StyleSheet.create((theme) => ({
  container: {
    variants: {
      appearance: {
        round: {
          theme.components.myComponent.appearance.round.borderColor
          theme.components.myComponent.appearance.round.borderRadius
        },
        square: {
          theme.components.myComponent.appearance.square.borderColor
          theme.components.myComponent.appearance.square.borderRadius
        }
      }
    }
  }
}))

In a situation where my theme has defined these 1:1, a function could simplify this:

type Appearance = 'round' | 'square'

const styles = StyleSheet.create((theme) => ({
  container: {
    variants: {
      // Variant definition became a function with the current value as an argument
      appearance: (value: Appearance) => theme.components.myComponent.appearance[value],
    },
  },
}))

[jpudysz]

Why not dynamic function?

type Appearance = 'round' | 'square'

const styles = StyleSheet.create((theme) => ({
  container: (value: Appearance) => ({
    ...theme.components.myComponent.appearance[value],
  }),
}))

[jake-carpenter]

Note: This is all predicated on the assumption that it's appropriate to memoize the dynamic function result.

In more complex situations, I've seen that using dynamic functions can be executed multiple times per render unless the value is memoized. If I have a dynamic function that accepts one of my variants, I could potentially end up in a situation where I'm memoizing an incorrect value that doesn't update when another variant changes.

This has crossed into being more contrived than I would like, but consider the component expanded to:

type Appearance = 'square' | 'round'
type VariantB = 'foo' | 'bar'

function MyComponent({appearance, variantB}: {appearance: Appearance; variantB: VariantB}) {
  styles.useVariants({variantB})

  return (
    <>
      <View style={styles.container(appearance)} />
      <View style={styles.container(appearance)} />
    </>
  )
}

const styles = StyleSheet.create(theme => ({
  container: (value: Appearance) => ({
    ...theme.components.myComponent.appearance[value],
    variants: {
      variantB: {
        foo: {backgroundColor: 'blue'},
        bar: {backgroundColor: 'red'}
      },
    },
  }),
}))

I would refactor that to memoize the style:

function MyComponent({appearance, variantB}: {appearance: Appearance; variantB: VariantB}) {
  styles.useVariants({variantB})
  
  // containerStyle now won't change when 'variantB' changes
  const containerStyle = useMemo(() => styles.container(appearance), [appearance])

  // More correct version of the memo, but with an ESLint error.
  //
  // const containerStyle = useMemo(
  //   () => styles.container(appearance),
  // [appearance, variantB])
  // ^^^^^^^^^^^^^^^^^^^^^^ ESLint error - 'unnecessary dependency'

  return (
    <>
      <View style={containerStyle} />
      <View style={containerStyle} />
    </>
  )
}

Another solution is to pass all relevant variants to the dynamic function but it also comes with the potential for an explosion of complexity as the number of variants increases. In any case, this is an example of easy mistake to make it would be nice if the library made this scenario less likely by providing the built-in "dynamic function" for variant args.

[jpudysz]

dynamic functions can be executed multiple times per render

It's executed whenever your component re-renders. It could be also executed from C++.

I would refactor that to memoize the style

There is no need to memoize anything, do you have any performance problems?