react-native-web-styling

React Native Web - Styling

Comprehensive styling patterns for React Native Web, including responsive design, theming, and platform-specific styles.

Key Concepts

StyleSheet API

Use StyleSheet.create() for optimized styles:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  text: {
    fontSize: 16,
    color: '#333',
    lineHeight: 24,
  },
});

Flexbox Layout

React Native uses Flexbox for layout (defaults differ from web):

const styles = StyleSheet.create({
  // Default flexDirection is 'column' (not 'row' like web)
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

Platform-Specific Styles

Use Platform.select() for different styles per platform:

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      web: {
        maxWidth: 1200,
        marginHorizontal: 'auto',
      },
      native: {
        paddingHorizontal: 16,
      },
    }),
  },
});

Best Practices

Responsive Design

✅ Use percentage-based widths and flexbox:

const styles = StyleSheet.create({
  container: {
    width: '100%',
    maxWidth: 1200,
  },
  column: {
    flex: 1,
    minWidth: 300,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

Media Queries (Web)

✅ Use useWindowDimensions for responsive behavior:

import { useWindowDimensions, StyleSheet } from 'react-native';

function ResponsiveComponent() {
  const { width } = useWindowDimensions();
  const isDesktop = width >= 768;

  return (
    <View style={[styles.container, isDesktop && styles.containerDesktop]}>
      {/* Content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  containerDesktop: {
    padding: 32,
    maxWidth: 1200,
  },
});

Theming

✅ Create a theme context:

import React, { createContext, useContext, ReactNode } from 'react';

interface Theme {
  colors: {
    primary: string;
    background: string;
    text: string;
    border: string;
  };
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
}

const lightTheme: Theme = {
  colors: {
    primary: '#007AFF',
    background: '#FFFFFF',
    text: '#000000',
    border: '#E5E5E5',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
};

const ThemeContext = createContext<Theme>(lightTheme);

export function ThemeProvider({ children }: { children: ReactNode }) {
  return (
    <ThemeContext.Provider value={lightTheme}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

Examples

Styled Component

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

interface ButtonProps {
  title: string;
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  onPress: () => void;
}

export function Button({
  title,
  variant = 'primary',
  size = 'medium',
  onPress
}: ButtonProps) {
  return (
    <Pressable onPress={onPress}>
      <View style={[styles.button, styles[variant], styles[size]]}>
        <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  primary: {
    backgroundColor: '#007AFF',
  },
  secondary: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#007AFF',
  },
  small: {
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  medium: {
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  large: {
    paddingHorizontal: 24,
    paddingVertical: 14,
  },
  text: {
    fontWeight: '600',
  },
  primaryText: {
    color: '#FFFFFF',
  },
  secondaryText: {
    color: '#007AFF',
  },
});

Responsive Grid

import React from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';

interface GridProps {
  children: React.ReactNode;
  columns?: number;
  gap?: number;
}

export function Grid({ children, columns = 3, gap = 16 }: GridProps) {
  const { width } = useWindowDimensions();

  // Responsive columns
  const responsiveColumns = width < 640 ? 1 : width < 1024 ? 2 : columns;

  return (
    <View style={[styles.grid, { gap }]}>
      {React.Children.map(children, (child) => (
        <View style={[styles.gridItem, {
          width: `${100 / responsiveColumns}%`,
          padding: gap / 2,
        }]}>
          {child}
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: -8,
  },
  gridItem: {
    flexGrow: 0,
    flexShrink: 0,
  },
});

Shadows and Elevation

import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    // iOS shadow
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Android elevation
    elevation: 3,
    // Web box-shadow (handled by React Native Web)
    ...Platform.select({
      web: {
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
});

Common Patterns

Dynamic Styles

function DynamicComponent({ isActive, size }: { isActive: boolean; size: number }) {
  const dynamicStyles = StyleSheet.create({
    container: {
      backgroundColor: isActive ? '#007AFF' : '#E5E5E5',
      width: size,
      height: size,
    },
  });

  return <View style={[styles.base, dynamicStyles.container]} />;
}

Style Composition

const baseStyles = StyleSheet.create({
  text: {
    fontSize: 16,
    fontFamily: 'System',
  },
});

const componentStyles = StyleSheet.create({
  heading: {
    ...baseStyles.text,
    fontSize: 24,
    fontWeight: 'bold',
  },
  body: {
    ...baseStyles.text,
    lineHeight: 24,
  },
});

Absolute Positioning

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: 200,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Anti-Patterns

❌ Don't use CSS classes or stylesheets:

// Bad
<div className="container" style={{ color: 'red' }} />

// Good
<View style={styles.container} />

❌ Don't use pixel values for fonts (use numbers):

// Bad
fontSize: '16px'

// Good
fontSize: 16

❌ Don't inline complex styles:

// Bad
<View style={{
  padding: 16,
  backgroundColor: '#fff',
  borderRadius: 8,
  shadowColor: '#000',
  // ... many more properties
}} />

// Good
<View style={styles.container} />

❌ Don't use margin for spacing in lists (use gap or paddingVertical):

// Bad
items.map((item, i) => (
  <View key={item.id} style={{ marginBottom: i === items.length - 1 ? 0 : 16 }}>
    {/* Content */}
  </View>
))

// Good
<View style={styles.list}>
  {items.map((item) => (
    <View key={item.id} style={styles.listItem}>
      {/* Content */}
    </View>
  ))}
</View>

const styles = StyleSheet.create({
  list: {
    gap: 16,
  },
});

Related Skills

• react-native-web-core: Core React Native Web concepts
• react-native-web-performance: Performance optimization for styles
• react-native-web-testing: Testing styled components