Is it possible to infer variants from createStyleSheet as component props types

[bryanprimus]

based on the docs, we need to define props manually, but i think it seems redundant since i believe we can use information from createStyleSheet variants

something like this

import { Ref, forwardRef } from 'react'
import { Pressable, View } from 'react-native'
import { createStyleSheet } from 'react-native-unistyles'

export type ButtonProps = {
  size: ExtractStyleSheetVariant<typeof stylesheet>['size'] // shoule be 'xs' | 'sm'
}

export const Button = forwardRef(
  ({ ...props }: ButtonProps, ref: Ref<View>) => {
    return <Pressable accessibilityRole="button" ref={ref} {...props} />
  },
)

const stylesheet = createStyleSheet(_theme => ({
  container: {
    variants: {
      size: {
        xs: {
          padding: 10,
        },
        sm: {
          padding: 12,
        },
      },
    },
  },
}))

not sure if this is already possible or not, since i couldn't find a way to do this in the docs

[bryanprimus]

for now i'm doing this manually like this

import { Ref, forwardRef } from 'react'
import {
  Pressable,
  PressableProps,
  StyleProp,
  View,
  ViewStyle,
} from 'react-native'
import { createStyleSheet, useStyles } from 'react-native-unistyles'

// this
type Size = keyof ReturnType<typeof stylesheet>['container']['variants']['size']

export type ButtonProps = PressableProps & {
  size: Size
  style?: StyleProp<ViewStyle>
}

export const Button = forwardRef(
  ({ size, style, ...props }: ButtonProps, ref: Ref<View>) => {
    const { styles } = useStyles(stylesheet, { size })

    return (
      <Pressable
        accessibilityRole="button"
        ref={ref}
        style={() => [styles.container, style]}
        {...props}
      />
    )
  },
)

const stylesheet = createStyleSheet(_theme => ({
  container: {
    variants: {
      size: {
        xs: {
          padding: 10,
        },
        sm: {
          padding: 12,
        },
      },
    },
  },
}))

[jpudysz]

Hey! I didn't expose the type, but Unistyles indeed infers the type for the useStyles hook. It's called ExtractVariantNames, and you can find it here:

react-native-unistyles/src/types/variants.ts

Line 1 in 31677ce

export type ExtractVariantNames<T> = T extends (...args: any) => infer R

You need to pass typeof stylesheet to it. Nonetheless, I think it's easier to simply type your props because you also need to select the variant name from the result.

In this case, I believe simplicity is more important than complexity.

[bryanprimus]

import * as React from 'react';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { ExtractVariantNames } from 'react-native-unistyles/lib/typescript/src/types';
import { Pressable, PressableProps, View } from 'react-native';

type Variants = ExtractVariantNames<typeof stylesheet>;

export interface ButtonProps extends PressableProps, Variants {}

const Button = React.forwardRef<View, ButtonProps>(({ variant, ...props }, ref) => {
  const { styles } = useStyles(stylesheet, { variant });
  return <Pressable style={styles.container} ref={ref} {...props} />;
});

I went with this to make sure I got the right variants as props since retyping out the variants by hand can easily lead to mistakes.