Skip to main content

​
Overview

Uniwind provides two powerful tools for styling third-party components that don’t natively support className props. 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

FeaturewithUniwinduseResolveClassNames
SetupOnce per componentPer usage
PerformanceOptimizedSlightly slower
Best forReusable componentsOne-off cases
SyntaxclassName="..."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>

​
Example: react-navigation

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.
⌘I