Third-Party Components

Overview

Uniwind provides two powerful tools for styling third-party components that don’t natively support className props.

Option 1: withUniwind (Recommended)

Wrap third-party components to add className support using withUniwind:

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

const StyledSafeAreaView = withUniwind(SafeAreaView)

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

Best for: Components you use frequently throughout your app. Wrap them once, use them everywhere with className support.

withUniwind Documentation

Learn how to wrap components and map custom props

Option 2: useResolveClassNames

Convert className strings to style objects at runtime:

import { useResolveClassNames } from 'uniwind'
import { CustomComponent } from 'some-library'

export const MyComponent = () => {
  const styles = useResolveClassNames('bg-blue-500 p-4 rounded-lg')

  return <CustomComponent style={styles} />
}

Best for: One-off usage or components with complex style requirements that can’t be easily wrapped.

useResolveClassNames Documentation

Learn how to convert classNames to style objects

Quick Comparison

Feature	withUniwind	useResolveClassNames
Setup	Once per component	Per usage
Performance	Optimized	Slightly slower
Best for	Reusable components	One-off cases
Syntax	`className="..."`	`style={...}`

Example: react-native-paper

import { withUniwind } from 'uniwind'
import { Button } from 'react-native-paper'

// Wrap once
const StyledButton = withUniwind(Button)

// Use everywhere
<StyledButton
  className="m-4"
  mode="contained"
>
  Press me
</StyledButton>

import { useResolveClassNames } from 'uniwind'
import { NavigationContainer } from '@react-navigation/native'

export const App = () => {
  const cardStyle = useResolveClassNames('bg-white dark:bg-gray-900')

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ cardStyle }}>
        {/* Your screens */}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

For most third-party components, withUniwind is the recommended approach as it provides better performance and cleaner syntax.

​Overview

​Option 1: withUniwind (Recommended)

withUniwind Documentation

​Option 2: useResolveClassNames

useResolveClassNames Documentation

​Quick Comparison

​Example: react-native-paper

​Example: react-navigation

Overview

Option 1: withUniwind (Recommended)

Option 2: useResolveClassNames

Quick Comparison

Example: react-native-paper

Example: react-navigation