Best Practices for Styling in React Native with NativeWind and Styled Components

React Native|SEPTEMBER 9, 2025|0 VIEWS

A comprehensive guide to choosing and implementing the best styling practices for your React Native applications

Introduction

Styling in React Native can be approached in multiple ways, and choosing the right method can significantly impact your development experience and app performance. Two popular approaches that have gained traction in the React Native community are NativeWind (utility-first CSS) and Styled Components (CSS-in-JS). This guide will explore best practices for both approaches and help you decide which one fits your project needs.

Understanding Your Styling Options

NativeWind: Utility-First Approach

NativeWind brings the power of Tailwind CSS to React Native, offering a utility-first approach to styling. It provides pre-built classes that you can combine to create complex designs without writing custom CSS.

Styled Components: CSS-in-JS

Styled Components allows you to write actual CSS code to style your components, with the benefits of JavaScript integration, theming, and dynamic styling based on props.

Best Practices for NativeWind

1. Establish a Design System

Create a consistent design system by extending your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        },
        secondary: {
          500: '#f59e0b',
          600: '#d97706',
        },
      },
      spacing: {
        18: '4.5rem',
        88: '22rem',
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
        roboto: ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

2. Use Semantic Class Naming

Create reusable component classes in your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-primary-500 text-white px-4 py-2 rounded-lg font-semibold;
  }

  .btn-secondary {
    @apply bg-secondary-500 text-white px-4 py-2 rounded-lg font-semibold;
  }

  .card {
    @apply bg-white rounded-lg shadow-lg p-4 mb-4;
  }

  .input-field {
    @apply border border-gray-300 rounded-lg px-3 py-2 text-base;
  }
}

3. Leverage Responsive Design

Use NativeWind's responsive utilities for different screen sizes:

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

export const ResponsiveCard = () => {
  return (
    <View className="p-4 sm:p-6 lg:p-8 bg-white rounded-lg">
      <Text className="text-lg sm:text-xl lg:text-2xl font-bold">
        Responsive Title
      </Text>
      <Text className="text-sm sm:text-base text-gray-600 mt-2">
        This text adapts to screen size
      </Text>
    </View>
  );
};

4. Optimize for Performance

Group related styles and avoid excessive class concatenation:

// ❌ Avoid
const buttonClasses = `${baseClasses} ${isPressed ? pressedClasses : ''} ${
  isDisabled ? disabledClasses : ''
}`;

// ✅ Better
const getButtonClasses = (isPressed: boolean, isDisabled: boolean) => {
  if (isDisabled) return 'btn-primary opacity-50';
  if (isPressed) return 'btn-primary bg-primary-700';
  return 'btn-primary';
};

5. Use TypeScript for Better DX

Create typed className props:

type ButtonVariant = 'primary' | 'secondary' | 'outline';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  children: React.ReactNode;
  onPress?: () => void;
}

const variantClasses: Record<ButtonVariant, string> = {
  primary: 'bg-primary-500 text-white',
  secondary: 'bg-secondary-500 text-white',
  outline: 'border-2 border-primary-500 text-primary-500 bg-transparent',
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  children,
  onPress,
}) => {
  const className = `${variantClasses[variant]} ${sizeClasses[size]} rounded-lg font-semibold`;

  return (
    <Pressable className={className} onPress={onPress}>
      <Text className="text-center">{children}</Text>
    </Pressable>
  );
};

Best Practices for Styled Components

1. Create a Theme Provider

Set up a comprehensive theme system:

import styled, { ThemeProvider } from 'styled-components/native';

const theme = {
  colors: {
    primary: {
      light: '#3b82f6',
      main: '#2563eb',
      dark: '#1d4ed8',
    },
    secondary: {
      light: '#f59e0b',
      main: '#d97706',
      dark: '#b45309',
    },
    text: {
      primary: '#111827',
      secondary: '#6b7280',
    },
    background: {
      primary: '#ffffff',
      secondary: '#f9fafb',
    },
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  typography: {
    h1: {
      fontSize: 32,
      fontWeight: 'bold',
      lineHeight: 40,
    },
    h2: {
      fontSize: 24,
      fontWeight: 'bold',
      lineHeight: 32,
    },
    body: {
      fontSize: 16,
      fontWeight: 'normal',
      lineHeight: 24,
    },
  },
  borderRadius: {
    sm: 4,
    md: 8,
    lg: 12,
    xl: 16,
  },
};

export type Theme = typeof theme;
export { theme, ThemeProvider };

2. Use Props for Dynamic Styling

Create flexible components with prop-based styling:

import styled from 'styled-components/native';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  fullWidth?: boolean;
  disabled?: boolean;
}

export const StyledButton = styled.Pressable<ButtonProps>`
  padding: ${({ theme, size }) => {
    switch (size) {
      case 'small':
        return `${theme.spacing.xs}px ${theme.spacing.sm}px`;
      case 'large':
        return `${theme.spacing.md}px ${theme.spacing.lg}px`;
      default:
        return `${theme.spacing.sm}px ${theme.spacing.md}px`;
    }
  }};

  background-color: ${({ theme, variant, disabled }) => {
    if (disabled) return theme.colors.text.secondary;
    switch (variant) {
      case 'secondary':
        return theme.colors.secondary.main;
      case 'outline':
        return 'transparent';
      default:
        return theme.colors.primary.main;
    }
  }};

  border: ${({ theme, variant }) =>
    variant === 'outline' ? `2px solid ${theme.colors.primary.main}` : 'none'};

  border-radius: ${({ theme }) => theme.borderRadius.md}px;
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
`;

export const ButtonText = styled.Text<Pick<ButtonProps, 'variant' | 'size'>>`
  color: ${({ theme, variant }) => {
    switch (variant) {
      case 'outline':
        return theme.colors.primary.main;
      default:
        return '#ffffff';
    }
  }};

  font-size: ${({ theme, size }) => {
    switch (size) {
      case 'small':
        return '14px';
      case 'large':
        return '18px';
      default:
        return '16px';
    }
  }};

  font-weight: 600;
  text-align: center;
`;

3. Optimize with useMemo

Prevent unnecessary re-renders for complex styled components:

import React, { useMemo } from 'react';
import styled from 'styled-components/native';

interface CardProps {
  elevation?: number;
  backgroundColor?: string;
  borderRadius?: number;
}

const StyledCard = styled.View<CardProps>`
  background-color: ${({ backgroundColor, theme }) =>
    backgroundColor || theme.colors.background.primary};
  border-radius: ${({ borderRadius, theme }) =>
    borderRadius || theme.borderRadius.lg}px;
  padding: ${({ theme }) => theme.spacing.md}px;
  shadow-color: #000;
  shadow-offset: 0px ${({ elevation = 2 }) => elevation}px;
  shadow-opacity: 0.1;
  shadow-radius: ${({ elevation = 2 }) => elevation * 2}px;
  elevation: ${({ elevation = 2 }) => elevation};
`;

export const Card: React.FC<CardProps & { children: React.ReactNode }> = ({
  children,
  ...props
}) => {
  const memoizedCard = useMemo(
    () => <StyledCard {...props}>{children}</StyledCard>,
    [children, props]
  );

  return memoizedCard;
};

4. Create Reusable Component Libraries

Build a component library with consistent patterns:

// components/UI/index.ts
export { StyledButton, ButtonText } from './Button';
export { Card } from './Card';
export { Container } from './Container';
export { Typography } from './Typography';

// Usage
import { StyledButton, ButtonText, Card, Typography } from '../components/UI';

export const UserProfile = () => {
  return (
    <Card elevation={3}>
      <Typography variant="h2" color="primary">
        User Profile
      </Typography>
      <Typography variant="body" color="secondary">
        Manage your account settings
      </Typography>
      <StyledButton variant="primary" size="large" fullWidth>
        <ButtonText variant="primary" size="large">
          Edit Profile
        </ButtonText>
      </StyledButton>
    </Card>
  );
};

Choosing Between NativeWind and Styled Components

Use NativeWind When:

You prefer utility-first CSS approach
Your team is familiar with Tailwind CSS
You want rapid prototyping capabilities
You need consistent spacing and typography scales
You're building with a design system in mind
You want smaller bundle sizes

Use Styled Components When:

You prefer component-based styling
You need complex theming capabilities
You want TypeScript integration with props
You're comfortable with CSS-in-JS
You need dynamic styling based on complex logic
Your team prefers writing traditional CSS

Hybrid Approach

You can actually use both approaches in the same project:

// Use NativeWind for layout and spacing
import { View } from 'react-native';
import styled from 'styled-components/native';

const CustomText = styled.Text`
  color: ${({ theme }) => theme.colors.primary.main};
  font-family: ${({ theme }) => theme.fonts.heading};
`;

export const HybridComponent = () => {
  return (
    <View className="flex-1 p-4 bg-gray-100">
      <View className="bg-white rounded-lg p-6 shadow-lg">
        <CustomText>
          Combining NativeWind classes with Styled Components
        </CustomText>
      </View>
    </View>
  );
};

Performance Considerations

NativeWind Performance Tips:

Use the official babel plugin for compile-time optimization
Avoid dynamic class generation in render functions
Leverage purging to remove unused styles
Use semantic classes to reduce repetition

Styled Components Performance Tips:

Use shouldForwardProp to avoid passing non-DOM props
Memoize complex styled components
Avoid creating styled components inside render functions
Use CSS prop sparingly for better performance

// ❌ Don't do this
const Component = () => {
  const StyledView = styled.View`
    background-color: red;
  `; // Created on every render

  return <StyledView />;
};

// ✅ Do this
const StyledView = styled.View`
  background-color: red;
`;

const Component = () => {
  return <StyledView />;
};

Testing Styled Components

Create testable styled components:

import { render } from '@testing-library/react-native';
import { ThemeProvider } from 'styled-components/native';
import { Button } from './Button';
import { theme } from './theme';

const renderWithTheme = (component: React.ReactElement) => {
  return render(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
};

describe('Button Component', () => {
  it('renders primary button correctly', () => {
    const { getByText } = renderWithTheme(
      <Button variant="primary">Click me</Button>
    );

    expect(getByText('Click me')).toBeTruthy();
  });

  it('applies correct styles for secondary variant', () => {
    const { getByTestId } = renderWithTheme(
      <Button variant="secondary" testID="button">
        Click me
      </Button>
    );

    const button = getByTestId('button');
    expect(button.props.style).toMatchObject({
      backgroundColor: theme.colors.secondary.main,
    });
  });
});

Conclusion

Both NativeWind and Styled Components offer powerful ways to style React Native applications. The choice between them depends on your team's preferences, project requirements, and development philosophy.

Key Takeaways:

NativeWind excels at rapid development and consistency through utility classes
Styled Components provides powerful theming and component-based styling
Both approaches can coexist in the same project
Performance considerations are important regardless of your choice
Establish clear patterns and guidelines for your team
Consider your team's familiarity with CSS vs. utility-first approaches

Choose the approach that best fits your project's needs, and don't be afraid to experiment with both to find what works best for your team and use case.

Remember: The best styling solution is the one that your team can use consistently and maintainably throughout your application's lifecycle.

Welcome to Huy Ha's zone of coding passion