Example of realization of compound variants

[astrahov]

You can add this example (or a similar one) to the documentation:
https://reactnativeunistyles.vercel.app/reference/compound-variants/

// styles.ts
import { createStyleSheet } from 'react-native-unistyles'

export const styleSheet = createStyleSheet((theme) => ({
    Caption: {
        variants: {
            font: {
                '1': {
                    fontSize: 16,
                },
                '1__caps': {
                    fontSize: 15,
                    textTransform: 'uppercase',
                },
                '2': {
                    fontSize: 15,
                },
                '2__caps': {
                    fontSize: 14,
                    textTransform: 'uppercase',
                },
            },
        },
    },
}))

// Caption.tsx
import { Text, type TextProps } from 'react-native'
export { useStyles } from 'react-native-unistyles'

import { styleSheet } from './styles'

interface CaptionProps extends TextProps {
    caps?: boolean;
    level?: 1 | 2 | 3; // type: number (!)
}

export const Caption = ({
    caps,
    children,
    level = 1,
    style,
    ...restProps
}: CaptionProps) => {
    const { styles } = useStyles(styleSheet, {
        font: `${level}${caps ? '__caps' : ''}`,
    })

    return (
        <Text {...restProps} style={[styles.Caption, style]}>
            {children}
        </Text>
    )
}

[jpudysz]

That's smart! Thanks for sharing.

Btw. Compound Variants are already implemented on 3.0 branch.