Add a Generic Box Styled Component for Third-Party Components

[divineniiquaye]

Description

Uniwind currently provides the withUniwind HOC to enable styling for third-party components, which works well. However, it introduces some friction when used repeatedly across an app, especially when dealing with many external components.

I’d like to propose adding a generic styled component (e.g. Box) that can style any component, including third-party ones, while preserving proper type inference.

Current Approach

Today, styling third-party components requires explicitly wrapping each component with withUniwind:

import { withUniwind } from 'uniwind'
import { SafeAreaView } from 'react-native-safe-area-context'

const StyledSafeAreaView = withUniwind(SafeAreaView)

<StyledSafeAreaView className="flex-1 bg-background">
  {/* content */}
</StyledSafeAreaView>

This works, but it:

• Adds boilerplate
• Requires creating new wrapped components
• Doesn’t scale ergonomically when many third-party components are involved

Proposed API

Introduce a generic styled component such as Box that internally uses withUniwind and can render any component via an as prop:

import { Box } from 'uniwind'
import { SafeAreaView } from 'react-native-safe-area-context';

<Box
  as={SafeAreaView}
  className="flex-1 bg-background"
>
  {/* content */}
</Box>

Key Expectations

• Box should accept any React component (including third-party ones)
• Props should be properly inferred based on the as component
• className support should work identically to native Uniwind components
• Internally, Box can leverage withUniwind to avoid duplication

Thanks for the great work on Uniwind — this feature would make third-party integration even smoother 🚀

[divineniiquaye]

Since this doesn't yet exist in Uniwind, anyone looking to use this feature, here's a workaround to double Uniwind as a component and config.

import { ComponentPropsWithRef, ElementType, useMemo } from 'react'
import { Uniwind as UniwindConfig, withUniwind } from 'uniwind'

type AnyObject = Record<PropertyKey, any>

type StyleToClass<K extends PropertyKey> = K extends 'style' ? 'className'
    : K extends `${infer StyleProp}Style` ? `${StyleProp}ClassName`
    : never

type ColorPropToClass<K extends PropertyKey> = K extends 'color' ? 'colorClassName'
    : K extends `${string}Color` | `${string}color${string}` ? `${K}ClassName`
    : never

type ApplyUniwind<TProps extends AnyObject> =
    & {
        [K in keyof TProps as StyleToClass<K>]?: string
    }
    & {
        [K in keyof TProps as ColorPropToClass<K>]?: string
    }
    & TProps

type BoxProps<T extends ElementType> = {
    as: T
} & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>

const Box = <T extends ElementType>({ as, ...props }: BoxProps<T>) => {
    const StyledComponent = useMemo(() => withUniwind(as as any), [as])
    return <StyledComponent {...props} />
}

export const Uniwind = Object.assign(
    Box,
    UniwindConfig,
) as typeof UniwindConfig & typeof Box

[Brentlok]

I don't really understand how is it going to make migration smoother and limit boilerplate. You can simply reexport components wrapped with withUniwind and use them throughout the app. You can't really do something like that with this proposed Box component

[divineniiquaye]

I personally use this in my company's project, we have a large monorepo with design system that runs across all apps owned by the company. This comes in handy for us especially for expo vector icons and lucide native icons.

We don't need to re-export any component, just wrap it and good to go.