Third-Party Components

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>

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} />
}

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>
  )
}