Skip to main content

​
Overview

The styled function creates wrapped versions of React Native components that support NativeWind’s className prop. This is the primary way to apply Tailwind CSS classes to components in NativeWind.

​
Import

import { styled } from 'nativewind';

​
Basic Usage

import { View, Text } from 'react-native';
import { styled } from 'nativewind';

const StyledView = styled(View);
const StyledText = styled(Text);

export default function App() {
  return (
    <StyledView className="flex-1 items-center justify-center bg-white">
      <StyledText className="text-2xl font-bold text-blue-500">
        Hello NativeWind
      </StyledText>
    </StyledView>
  );
}

​
Signature

​
component
React.ComponentType<T>
required
The React Native component to wrap with NativeWind styling capabilities.
​
StyledComponent
React.ComponentType<T & { className?: string }>
A new component that accepts all original props plus a className prop for Tailwind CSS classes.

​
Advanced Usage

​
Conditional Styling

import { styled } from 'nativewind';
import { View, Text } from 'react-native';

const StyledView = styled(View);
const StyledText = styled(Text);

function Alert({ type, message }) {
  const baseClasses = "p-4 rounded-lg";
  const typeClasses = {
    success: "bg-green-100 border-green-500",
    error: "bg-red-100 border-red-500",
    warning: "bg-yellow-100 border-yellow-500",
  }[type];

  return (
    <StyledView className={`${baseClasses} ${typeClasses}`}>
      <StyledText className="font-medium">{message}</StyledText>
    </StyledView>
  );
}

​
Responsive Design

import { styled } from 'nativewind';
import { View, Text } from 'react-native';

const StyledView = styled(View);
const StyledText = styled(Text);

function ResponsiveCard() {
  return (
    <StyledView className="p-4 sm:p-6 md:p-8 bg-white rounded-lg">
      <StyledText className="text-base sm:text-lg md:text-xl font-semibold">
        Responsive Card
      </StyledText>
    </StyledView>
  );
}

​
Dark Mode Support

import { styled } from 'nativewind';
import { View, Text } from 'react-native';

const StyledView = styled(View);
const StyledText = styled(Text);

function ThemedCard() {
  return (
    <StyledView className="bg-white dark:bg-gray-800 p-4 rounded-lg">
      <StyledText className="text-gray-900 dark:text-white font-semibold">
        Themed Content
      </StyledText>
      <StyledText className="text-gray-600 dark:text-gray-300 mt-2">
        This card adapts to light and dark modes
      </StyledText>
    </StyledView>
  );
}

​
Platform-Specific Styles

import { styled } from 'nativewind';
import { View, Text } from 'react-native';

const StyledView = styled(View);
const StyledText = styled(Text);

function PlatformCard() {
  return (
    <StyledView className="p-4 ios:shadow-lg android:elevation-4 bg-white rounded-lg">
      <StyledText className="text-lg font-semibold">
        Platform-Specific Styling
      </StyledText>
    </StyledView>
  );
}

​
Best Practices

Performance Tip: Create styled components outside of render functions to avoid unnecessary re-creations:
// Good - component created once
const StyledView = styled(View);

function MyComponent() {
  return <StyledView className="flex-1" />;
}

// Bad - component recreated on every render
function MyComponent() {
  const StyledView = styled(View);
  return <StyledView className="flex-1" />;
}
The styled function wraps components from react-native-css. Ensure you have react-native-css installed as a peer dependency:
npm install react-native-css

​
Common Patterns

​
Creating Reusable Styled Components

// components/styled.tsx
import { styled } from 'nativewind';
import { View, Text, Pressable, Image, ScrollView } from 'react-native';

export const StyledView = styled(View);
export const StyledText = styled(Text);
export const StyledPressable = styled(Pressable);
export const StyledImage = styled(Image);
export const StyledScrollView = styled(ScrollView);
Then import and use throughout your app: 
import { StyledView, StyledText } from './components/styled';

function MyScreen() {
  return (
    <StyledView className="flex-1 bg-gray-100">
      <StyledText className="text-xl font-bold">My Screen</StyledText>
    </StyledView>
  );
}

​
Combining with Native Props

import { styled } from 'nativewind';
import { ScrollView } from 'react-native';

const StyledScrollView = styled(ScrollView);

function ScrollableContent() {
  return (
    <StyledScrollView
      className="flex-1 bg-white"
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 20 }}
    >
      {/* Content */}
    </StyledScrollView>
  );
}