> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# useResolveClassNames

> Convert Tailwind class names to React Native style objects at runtime

## 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`.

<Warning>
  This hook should be used rarely. For most use cases, prefer using the `className` prop on Uniwind-wrapped components.
</Warning>

## 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

<Tip>
  **Prefer these alternatives when possible:**

  * For React Native components: Use the `className` prop directly. See [Components](/components/activity-indicator).
  * For third-party components: Wrap them with [`withUniwind`](/api/with-uniwind) to add `className` support.
</Tip>

## Usage

### Basic Example

```tsx  theme={null}
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

```tsx  theme={null}
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

```tsx  theme={null}
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

```tsx  theme={null}
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

<ParamField path="classNames" type="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`).
</ParamField>

### Return Value

<ParamField path="styles" type="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.
</ParamField>

## Performance Considerations

<Info>
  The `useResolveClassNames` hook is reactive and will automatically update when the theme changes, ensuring your styles stay in sync with the active theme.
</Info>

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

## Related

<CardGroup cols={2}>
  <Card title="withUniwind" icon="layer-group" href="/api/with-uniwind">
    Wrap third-party components to add className support
  </Card>

  <Card title="Components" icon="react" href="/components/activity-indicator">
    Learn about Uniwind-wrapped React Native components
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="useCSSVariable" icon="code" href="/api/use-css-variable">
    Access individual CSS variable values in JavaScript
  </Card>

  <Card title="Global CSS" icon="css" href="/theming/global-css">
    Define CSS variables in your theme
  </Card>
</CardGroup>