Mapping for boolean component properties

[sergeylaptev]

I'd like to understand which is the most preferable way to handle boolean properties. I propose the options that I see at the moment. There is a generic component with the following props:

type Props = {
  children?: ReactNode
  disabled?: boolean
  style?: StyleProp<ViewStyle>
  variant?: 'primary' | 'secondary' | 'tertiary'
}

The component will be used for example in this way:

<MyComponent variant="secondary" />
<MyComponent variant="tertiary" disabled />
<MyComponent disabled />

Possible solutions:

1. Using the "true" variant value

function MyComponent({ disabled, variant = 'primary', style, ...rest }: Props) {
  const { styles } = useStyles(stylesheet, { disabled, variant })

  return (
    <View
      {...rest}
      style={[styles.container, styles.containerDynamic({ variant, disabled }), style]}
    />
  )
}

const stylesheet = createStyleSheet({
  container: {
    variants: {
      variant: {
        primary: {
          backgroundColor: 'blue',
        },
        secondary: {
          backgroundColor: 'magenta',
        },
        tertiary: {
          backgroundColor: 'orange',
        },
      },
      disabled: {
        true: {
          opacity: 0.8,
          backgroundColor: 'silver',
        },
      },
    },
  },

  containerDynamic: ({ disabled, variant }): Pick<Props, 'disabled' | 'variant'>) => {
    if (disabled && variant === 'primary') {
      return { backgroundColor: 'gray' }
    }

    return {}
  },
})

We will get a type error for "disabled" field complaining that "true" isn't equal to boolean, which is logical:)

2. Using a dynamic function with respective boolean props

function MyComponent({ disabled, variant = 'primary', style, ...rest }: Props) {
  const { styles } = useStyles(stylesheet, { variant })

  return (
    <View
      {...rest}
      style={[styles.container, styles.containerDynamic({ variant, disabled }), style]}
    />
  )
}

const stylesheet = createStyleSheet({
  container: {
    variants: {
      variant: {
        primary: {
          backgroundColor: 'blue',
        },
        secondary: {
          backgroundColor: 'magenta',
        },
        tertiary: {
          backgroundColor: 'orange',
        },
      },
    },
  },

  containerDynamic: ({ disabled, variant }): Pick<Props, 'disabled' | 'variant'>) => {
    if (disabled) {
      let styles: Record<string, any> = {
        opacity: 0.8,
        backgroundColor: 'silver',
      }

      if (variant === 'primary') {
        styles = { ...styles, backgroundColor: 'gray' }
      }

      return styles
    }

    return {}
  },
})

I'm open for any other possible solutions because both of these look like horrible workarounds. Thank you in advance!

[jpudysz]

You're the second person who asks about the Boolean variants 🤗.

Right now the easiest way is to cast your Boolean to string before passing to useStyles.

I could theoretically support passing booleans but it would work exactly the same (casting to string).

If this doesn't satisfy you let me know. I can think of other approaches 🙏

[sergeylaptev]

I think casting on the library's side is a good enough solution:)

[jpudysz]

I will draft a proposal next week 🙏

[jpudysz]

PR: #134