Mastering React Native Styling

React Native uses a subset of CSS properties with JavaScript objects for styling. This approach provides type safety and better performance while maintaining familiar CSS concepts. Let's dive into how to style your React Native applications effectively.

StyleSheet API

The StyleSheet API optimizes your styles and provides better error checking than plain objects.

Basic StyleSheet Usage

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

const Card = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Welcome</Text>
    <Text style={styles.description}>This is a styled card</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: 16,
    borderRadius: 8,
    backgroundColor: '#ffffff',
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2, // Android shadow
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1a365d',
    marginBottom: 8,
  },
  description: {
    fontSize: 16,
    color: '#4a5568',
  },
});

Combining Styles

// Multiple styles using array syntax
<View style={[styles.container, styles.elevated]}>
  <Text style={[styles.text, styles.bold]}>
    Bold Text
  </Text>
</View>

// Conditional styling
<Text style={[
  styles.text,
  isActive && styles.activeText,
  disabled && styles.disabledText,
]}>
  Dynamic Style
</Text>

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  elevated: {
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  text: {
    fontSize: 16,
  },
  bold: {
    fontWeight: 'bold',
  },
  activeText: {
    color: '#FF6B2B',
  },
  disabledText: {
    color: '#9CA3AF',
  },
});

Working with Colors

React Native supports various color formats and provides platform-specific opacity handling.

Color Formats

const colors = StyleSheet.create({
  // Hex colors
  primary: {
    color: '#FF6B2B',
    backgroundColor: '#1a365d',
  },
  
  // RGB and RGBA
  secondary: {
    color: 'rgb(26, 54, 93)',
    backgroundColor: 'rgba(255, 107, 43, 0.1)',
  },
  
  // Named colors
  basic: {
    color: 'black',
    backgroundColor: 'white',
  },
  
  // HSL (through rgb conversion)
  accent: {
    color: 'hsl(20, 100%, 50%)',
  },
});

Theme System

// 📁 theme/colors.ts
export const colors = {
  primary: {
    50: '#FFF5F0',
    100: '#FFE6D5',
    500: '#FF6B2B',
    600: '#FB5607',
    700: '#C54409',
  },
  neutral: {
    50: '#F8FAFC',
    100: '#F1F5F9',
    500: '#64748B',
    900: '#0F172A',
  },
} as const;

// Usage in components
import { colors } from '../theme/colors';

const ThemedCard = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Themed Component</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.neutral[50],
    borderColor: colors.primary[100],
  },
  title: {
    color: colors.neutral[900],
  },
});

Dimensions and Units

React Native uses density-independent pixels (dp) for consistent sizing across devices.

Responsive Dimensions

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

// Static dimensions
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

// Hook-based dimensions (preferred)
const ResponsiveCard = () => {
  const { width, height } = useWindowDimensions();
  
  return (
    <View style={[
      styles.card,
      { width: width * 0.9, maxWidth: 400 }
    ]}>
      <Text>Responsive Card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    padding: 16,
    marginHorizontal: 'auto',
    backgroundColor: '#fff',
    borderRadius: 8,
  },
});

Platform-Specific Styling

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

const styles = StyleSheet.create({
  // Platform-specific styles
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    },
    android: {
      elevation: 5,
    },
  }),
  
  // Platform-specific values
  button: {
    paddingTop: Platform.OS === 'ios' ? 20 : 16,
    ...Platform.select({
      ios: {
        fontFamily: 'SF Pro Text',
      },
      android: {
        fontFamily: 'Roboto',
      },
    }),
  },
});

Style Inheritance and Composition

Unlike web CSS, React Native has limited style inheritance. Text styles only inherit from parent Text components.

Text Style Inheritance

const StyledText = () => (
  <Text style={styles.baseText}>
    Base Text
    <Text style={styles.highlightText}>
      {' '}Highlighted
    </Text>
  </Text>
);

const styles = StyleSheet.create({
  baseText: {
    fontSize: 16,
    color: '#1a365d',
  },
  highlightText: {
    fontWeight: 'bold',
    color: '#FF6B2B',
  },
});

Style Composition with Components

interface StyledButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'large';
  style?: StyleProp<ViewStyle>;
}

const StyledButton: React.FC<StyledButtonProps> = ({
  variant = 'primary',
  size = 'small',
  style,
  ...props
}) => (
  <TouchableOpacity
    style={[
      styles.button,
      styles[variant],
      styles[size],
      style,
    ]}
    {...props}
  />
);

const styles = StyleSheet.create({
  button: {
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primary: {
    backgroundColor: '#FF6B2B',
  },
  secondary: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#FF6B2B',
  },
  small: {
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  large: {
    paddingVertical: 12,
    paddingHorizontal: 24,
  },
});

Best Practices

1. Organize Styles by Component

// 📁 components/Card/Card.styles.ts
export const createStyles = (theme: Theme) =>
  StyleSheet.create({
    container: {
      // Base styles
    },
    header: {
      // Header styles
    },
    // ... more styles
  });

// 📁 components/Card/Card.tsx
import { createStyles } from './Card.styles';

const Card = () => {
  const theme = useTheme();
  const styles = createStyles(theme);
  
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        {/* Component content */}
      </View>
    </View>
  );
};

2. Use Style Constants

// 📁 theme/spacing.ts
export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
} as const;

// 📁 theme/typography.ts
export const typography = {
  sizes: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 20,
    xl: 24,
  },
  weights: {
    regular: '400',
    medium: '500',
    bold: '700',
  },
} as const;

3. Responsive Design Patterns

const ResponsiveLayout = () => {
  const { width } = useWindowDimensions();
  const isTablet = width >= 768;
  
  return (
    <View style={[
      styles.container,
      isTablet && styles.tabletContainer,
    ]}>
      <View style={[
        styles.sidebar,
        isTablet && styles.tabletSidebar,
      ]}>
        {/* Sidebar content */}
      </View>
      <View style={styles.content}>
        {/* Main content */}
      </View>
    </View>
  );
};

Next Steps

Now that you understand React Native styling, you can:

Create consistent and maintainable styles
Build responsive layouts
Implement platform-specific styling
Create reusable style systems
Optimize style performance

In the next chapter, we'll explore advanced UI concepts in React Native, including animations and gestures.

React Native Fundamentals