Skip to main content

​
Overview

The useResolveClassNames hook converts Tailwind class names into valid React Native style objects. This is useful when working with components or libraries that don’t support the className prop directly, such as react-navigation theme configuration or third-party components that can’t be wrapped in withUniwind.
This hook should be used rarely. For most use cases, prefer using the className prop on Uniwind-wrapped components.

​
When to Use This Hook

Use useResolveClassNames when you need to:
  • Configure libraries that accept style objects (e.g., react-navigation themes)
  • Pass styles to third-party components that only accept style props (and can’t be wrapped in withUniwind)
  • Generate style objects dynamically for special use cases
  • Work with legacy code that requires style objects
Prefer these alternatives when possible:
  • For React Native components: Use the className prop directly. See Components.
  • For third-party components: Wrap them with withUniwind to add className support.

​
Usage

​
Basic Example

import { useResolveClassNames } from 'uniwind'
import { View } from 'react-native'

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

  return <View style={styles}>Content</View>
}

​
With react-navigation

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

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

  const theme = {
    colors: {
      background: 'transparent',
    },
    // Use resolved styles for navigation theme
    dark: false,
  }

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

​
Dynamic Class Names

import { useResolveClassNames } from 'uniwind'

export const DynamicCard = ({ variant }: { variant: 'primary' | 'secondary' }) => {
  const cardClasses = variant === 'primary'
    ? 'bg-blue-500 text-white'
    : 'bg-gray-200 text-black'

  const styles = useResolveClassNames(cardClasses)

  return <View style={styles}>Card content</View>
}

​
Combining Multiple Style Objects

import { useResolveClassNames } from 'uniwind'
import { View, StyleSheet } from 'react-native'

export const CombinedStyles = () => {
  const tailwindStyles = useResolveClassNames('p-4 rounded-lg')

  const customStyles = StyleSheet.create({
    shadow: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
  })

  return <View style={[tailwindStyles, customStyles.shadow]}>Content</View>
}

​
API Reference

​
Arguments

​
classNames
string
required
A string containing Tailwind class names to be resolved at runtime. Supports all standard Tailwind utilities and theme-based variants (e.g., dark:bg-gray-900).

​
Return Value

​
styles
object
A valid React Native style object containing the resolved styles. This object can be passed directly to any component’s style prop or combined with other style objects.

​
Performance Considerations

The useResolveClassNames hook is reactive and will automatically update when the theme changes, ensuring your styles stay in sync with the active theme.
While useResolveClassNames is optimized for performance, be aware that:
  • It processes class names at runtime, which is slightly less performant than compile-time resolution
  • For frequently re-rendered components, consider memoizing the result if the class names don’t change
  • Using the className prop directly is more performant when possible

withUniwind

Wrap third-party components to add className support

Components

Learn about Uniwind-wrapped React Native components
⌘I