0
# React Native Styling System
1

2
React Native provides a comprehensive styling system based on JavaScript objects and flexbox layout, with platform-specific color utilities and dynamic theming support.
3

4
## Installation
5

6
```bash
7
npm install react-native
8
```
9

10
## Core Styling API
11

12
### StyleSheet
13

14
The primary API for creating and managing component styles efficiently with optimization and validation.
15

16
```javascript { .api }
17
// ESM
18
import {StyleSheet} from 'react-native';
19

20
// CommonJS
21
const {StyleSheet} = require('react-native');
22

23
// Basic style creation
24
const styles = StyleSheet.create({
25
  container: {
26
    flex: 1,
27
    backgroundColor: '#fff',
28
    alignItems: 'center',
29
    justifyContent: 'center',
30
  },
31
  text: {
32
    fontSize: 18,
33
    fontWeight: 'bold',
34
    color: '#333',
35
  },
36
  button: {
37
    backgroundColor: '#007AFF',
38
    paddingHorizontal: 20,
39
    paddingVertical: 10,
40
    borderRadius: 8,
41
  },
42
});
43

44
// Use styles in components
45
<View style={styles.container}>
46
  <Text style={styles.text}>Hello World</Text>
47
  <TouchableOpacity style={styles.button}>
48
    <Text style={[styles.text, {color: 'white'}]}>Press me</Text>
49
  </TouchableOpacity>
50
</View>
51

52
// Combine styles
53
const combinedStyles = StyleSheet.create({
54
  base: {
55
    fontSize: 16,
56
    color: 'black',
57
  },
58
  bold: {
59
    fontWeight: 'bold',
60
  },
61
  red: {
62
    color: 'red',
63
  },
64
});
65

66
// Multiple style application
67
<Text style={[combinedStyles.base, combinedStyles.bold]}>Bold text</Text>
68
<Text style={[combinedStyles.base, combinedStyles.red]}>Red text</Text>
69

70
// Conditional styling
71
<View style={[
72
  styles.container,
73
  isActive && styles.active,
74
  {opacity: isVisible ? 1 : 0.5}
75
]}>
76
  <Text>Conditional styling</Text>
77
</View>
78

79
// Platform-specific styles
80
const platformStyles = StyleSheet.create({
81
  container: {
82
    ...Platform.select({
83
      ios: {
84
        backgroundColor: 'white',
85
        shadowColor: '#000',
86
        shadowOffset: {width: 0, height: 2},
87
        shadowOpacity: 0.25,
88
        shadowRadius: 3.84,
89
      },
90
      android: {
91
        backgroundColor: '#f8f9fa',
92
        elevation: 5,
93
      },
94
    }),
95
  },
96
});
97

98
// Dynamic styles based on props
99
const createStyles = (theme, size) => StyleSheet.create({
100
  container: {
101
    backgroundColor: theme.backgroundColor,
102
    padding: size === 'large' ? 20 : 10,
103
  },
104
  text: {
105
    color: theme.textColor,
106
    fontSize: size === 'large' ? 18 : 14,
107
  },
108
});
109

110
// Use hairline width for thin borders
111
const hairlineStyles = StyleSheet.create({
112
  separator: {
113
    height: StyleSheet.hairlineWidth, // 1 / PixelRatio.get()
114
    backgroundColor: '#ccc',
115
  },
116
});
117

118
// Absolute fill shorthand
119
const overlayStyles = StyleSheet.create({
120
  overlay: {
121
    ...StyleSheet.absoluteFillObject, // {position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}
122
    backgroundColor: 'rgba(0,0,0,0.5)',
123
  },
124
});
125

126
// Style flattening and composition  
127
const flattenedStyle = StyleSheet.flatten([
128
  styles.base,
129
  styles.modifier,
130
  {customProperty: 'value'}
131
]);
132

133
// Style arrays with functions
134
function createButtonStyle(variant, size, disabled) {
135
  return [
136
    styles.baseButton,
137
    styles[`button${variant}`], // buttonPrimary, buttonSecondary, etc.
138
    styles[`size${size}`],      // sizeLarge, sizeSmall, etc.
139
    disabled && styles.disabled,
140
  ];
141
}
142
```
143

144
```typescript { .api }
145
interface StyleSheetStatic {
146
  // Style creation
147
  create<T extends NamedStyles<T>>(styles: T): T;
148
  
149
  // Style utilities
150
  flatten<T>(style: StyleProp<T>): T;
151
  
152
  // Constants
153
  hairlineWidth: number;
154
  absoluteFillObject: {
155
    position: 'absolute';
156
    left: 0;
157
    right: 0;
158
    top: 0;
159
    bottom: 0;
160
  };
161
  
162
  // Utility methods
163
  setStyleAttributePreprocessor?(property: string, process: (value: any) => any): void;
164
}
165

166
// Style property types
167
type StyleProp<T> = T | RegisteredStyle<T> | RecursiveArray<T | RegisteredStyle<T> | Falsy> | Falsy;
168

169
interface NamedStyles<T> {
170
  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
171
}
172

173
type Falsy = undefined | null | false;
174
type RecursiveArray<T> = ReadonlyArray<T | ReadonlyArray<T>>;
175

176
// Core style interfaces
177
interface LayoutStyle {
178
  // Flexbox
179
  display?: 'none' | 'flex';
180
  flex?: number;
181
  flexBasis?: number | string;
182
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
183
  flexGrow?: number;
184
  flexShrink?: number;
185
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
186
  
187
  // Alignment
188
  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
189
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
190
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
191
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
192
  
193
  // Positioning
194
  position?: 'absolute' | 'relative';
195
  top?: number | string;
196
  right?: number | string;
197
  bottom?: number | string;
198
  left?: number | string;
199
  
200
  // Dimensions
201
  width?: number | string;
202
  height?: number | string;
203
  minWidth?: number | string;
204
  maxWidth?: number | string;
205
  minHeight?: number | string;
206
  maxHeight?: number | string;
207
  
208
  // Spacing
209
  margin?: number | string;
210
  marginBottom?: number | string;
211
  marginEnd?: number | string;
212
  marginHorizontal?: number | string;
213
  marginLeft?: number | string;
214
  marginRight?: number | string;
215
  marginStart?: number | string;
216
  marginTop?: number | string;
217
  marginVertical?: number | string;
218
  
219
  padding?: number | string;
220
  paddingBottom?: number | string;
221
  paddingEnd?: number | string;
222
  paddingHorizontal?: number | string;
223
  paddingLeft?: number | string;
224
  paddingRight?: number | string;
225
  paddingStart?: number | string;
226
  paddingTop?: number | string;
227
  paddingVertical?: number | string;
228
  
229
  // Z-index
230
  zIndex?: number;
231
}
232

233
interface ViewStyle extends LayoutStyle {
234
  // Background
235
  backgroundColor?: string;
236
  
237
  // Border
238
  borderBottomColor?: string;
239
  borderBottomEndRadius?: number;
240
  borderBottomLeftRadius?: number;
241
  borderBottomRightRadius?: number;
242
  borderBottomStartRadius?: number;
243
  borderBottomWidth?: number;
244
  borderColor?: string;
245
  borderEndColor?: string;
246
  borderEndWidth?: number;
247
  borderLeftColor?: string;
248
  borderLeftWidth?: number;
249
  borderRadius?: number;
250
  borderRightColor?: string;
251
  borderRightWidth?: number;
252
  borderStartColor?: string;
253
  borderStartWidth?: number;
254
  borderStyle?: 'solid' | 'dotted' | 'dashed';
255
  borderTopColor?: string;
256
  borderTopEndRadius?: number;
257
  borderTopLeftRadius?: number;
258
  borderTopRightRadius?: number;
259
  borderTopStartRadius?: number;
260
  borderTopWidth?: number;
261
  borderWidth?: number;
262
  
263
  // Shadow (iOS)
264
  shadowColor?: string;
265
  shadowOffset?: {width: number; height: number};
266
  shadowOpacity?: number;
267
  shadowRadius?: number;
268
  
269
  // Elevation (Android)  
270
  elevation?: number;
271
  
272
  // Opacity
273
  opacity?: number;
274
  
275
  // Overflow
276
  overflow?: 'visible' | 'hidden' | 'scroll';
277
  
278
  // Transform
279
  transform?: TransformStyle[];
280
  
281
  // Backface
282
  backfaceVisibility?: 'visible' | 'hidden';
283
}
284

285
interface TextStyle extends LayoutStyle {
286
  // Font
287
  color?: string;
288
  fontFamily?: string;
289
  fontSize?: number;
290
  fontStyle?: 'normal' | 'italic';
291
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
292
  fontVariant?: FontVariant[];
293
  
294
  // Text layout
295
  letterSpacing?: number;
296
  lineHeight?: number;
297
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
298
  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center';
299
  textDecorationColor?: string;
300
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
301
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
302
  textShadowColor?: string;
303
  textShadowOffset?: {width: number; height: number};
304
  textShadowRadius?: number;
305
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
306
  
307
  // Writing direction
308
  writingDirection?: 'auto' | 'ltr' | 'rtl';
309
  
310
  // Android specific
311
  includeFontPadding?: boolean;
312
}
313

314
interface ImageStyle extends LayoutStyle {
315
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
316
  tintColor?: string;
317
  overlayColor?: string;
318
}
319

320
type TransformStyle = 
321
  | {perspective: number}
322
  | {rotate: string}
323
  | {rotateX: string}
324
  | {rotateY: string}
325
  | {rotateZ: string}
326
  | {scale: number}
327
  | {scaleX: number}
328
  | {scaleY: number}
329
  | {translateX: number}
330
  | {translateY: number}
331
  | {skewX: string}
332
  | {skewY: string}
333
  | {matrix: number[]};
334
```
335

336
## Color Utilities
337

338
### processColor
339

340
Process color values into platform-specific formats for native integration.
341

342
```javascript { .api }
343
import {processColor} from 'react-native';
344

345
// Process various color formats
346
const redColor = processColor('red');          // Named color
347
const hexColor = processColor('#ff0000');      // Hex color
348
const rgbColor = processColor('rgb(255,0,0)'); // RGB color
349
const rgbaColor = processColor('rgba(255,0,0,0.5)'); // RGBA color
350
const hslColor = processColor('hsl(0,100%,50%)');     // HSL color
351

352
console.log('Processed colors:', {
353
  redColor,   // Platform-specific number
354
  hexColor,   // Platform-specific number
355
  rgbColor,   // Platform-specific number
356
  rgbaColor,  // Platform-specific number
357
  hslColor,   // Platform-specific number
358
});
359

360
// Use with native modules
361
const processedColor = processColor('#007AFF');
362
NativeModules.MyNativeModule.setBackgroundColor(processedColor);
363

364
// Color validation
365
const isValidColor = (color) => {
366
  return processColor(color) !== null;
367
};
368

369
console.log(isValidColor('red'));     // true
370
console.log(isValidColor('#ff0000')); // true
371
console.log(isValidColor('invalid')); // false
372

373
// Dynamic color processing
374
const colors = ['red', 'green', 'blue', '#ff0000', 'rgba(0,255,0,0.5)'];
375
const processedColors = colors.map(color => ({
376
  original: color,
377
  processed: processColor(color),
378
}));
379
```
380

381
```typescript { .api }
382
interface processColorStatic {
383
  (color: string): number | null;
384
}
385
```
386

387
### PlatformColor
388

389
Create platform-specific color references that automatically adapt to system themes and settings.
390

391
```javascript { .api }
392
import {PlatformColor} from 'react-native';
393

394
// iOS system colors
395
const iosSystemColors = {
396
  label: PlatformColor('label'),                    // Primary text
397
  secondaryLabel: PlatformColor('secondaryLabel'), // Secondary text
398
  systemBackground: PlatformColor('systemBackground'), // Background
399
  systemBlue: PlatformColor('systemBlue'),         // System blue
400
  systemRed: PlatformColor('systemRed'),           // System red
401
  systemGray: PlatformColor('systemGray'),         // System gray
402
};
403

404
// Android system colors
405
const androidSystemColors = {
406
  primary: PlatformColor('@android:color/holo_blue_bright'),
407
  accent: PlatformColor('?android:colorAccent'),
408
  background: PlatformColor('?android:colorBackground'),
409
  foreground: PlatformColor('?android:textColorPrimary'),
410
};
411

412
// Platform-specific styling
413
const systemStyles = StyleSheet.create({
414
  container: {
415
    backgroundColor: Platform.select({
416
      ios: PlatformColor('systemBackground'),
417
      android: PlatformColor('?android:colorBackground'),
418
    }),
419
  },
420
  text: {
421
    color: Platform.select({
422
      ios: PlatformColor('label'),
423
      android: PlatformColor('?android:textColorPrimary'),
424
    }),
425
  },
426
  button: {
427
    backgroundColor: Platform.select({
428
      ios: PlatformColor('systemBlue'),
429
      android: PlatformColor('?android:colorAccent'),
430
    }),
431
  },
432
});
433

434
// Semantic color usage
435
const semanticColors = {
436
  primary: Platform.select({
437
    ios: PlatformColor('systemBlue'),
438
    android: PlatformColor('?android:colorPrimary'),
439
    default: '#007AFF',
440
  }),
441
  background: Platform.select({
442
    ios: PlatformColor('systemBackground'),
443
    android: PlatformColor('?android:colorBackground'),
444
    default: '#ffffff',
445
  }),
446
  text: Platform.select({
447
    ios: PlatformColor('label'),
448
    android: PlatformColor('?android:textColorPrimary'), 
449
    default: '#000000',
450
  }),
451
};
452

453
// Component with platform colors
454
function ThemedButton({title, onPress}) {
455
  return (
456
    <TouchableOpacity
457
      style={[styles.button, {backgroundColor: semanticColors.primary}]}
458
      onPress={onPress}
459
    >
460
      <Text style={[styles.buttonText, {color: 'white'}]}>
461
        {title}
462
      </Text>
463
    </TouchableOpacity>
464
  );
465
}
466

467
// Custom platform colors (requires native setup)
468
const customColors = {
469
  brandPrimary: Platform.select({
470
    ios: PlatformColor('MyAppPrimary'),      // Custom iOS color
471
    android: PlatformColor('@color/brand_primary'), // Custom Android color
472
  }),
473
};
474
```
475

476
```typescript { .api }
477
interface PlatformColorStatic {
478
  // Create platform color reference
479
  (...names: string[]): PlatformColor;
480
}
481

482
interface PlatformColor {
483
  __typename: 'PlatformColor';
484
}
485

486
// Common iOS system colors
487
type iOSSystemColor = 
488
  | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'quaternaryLabel'
489
  | 'systemBackground' | 'secondarySystemBackground' | 'tertiarySystemBackground'
490
  | 'systemBlue' | 'systemGreen' | 'systemIndigo' | 'systemOrange' 
491
  | 'systemPink' | 'systemPurple' | 'systemRed' | 'systemTeal' | 'systemYellow'
492
  | 'systemGray' | 'systemGray2' | 'systemGray3' | 'systemGray4' | 'systemGray5' | 'systemGray6';
493

494
// Common Android system colors  
495
type AndroidSystemColor =
496
  | '?android:colorPrimary' | '?android:colorAccent' | '?android:colorBackground'
497
  | '?android:textColorPrimary' | '?android:textColorSecondary'
498
  | '@android:color/white' | '@android:color/black'
499
  | '@android:color/holo_blue_bright' | '@android:color/holo_green_light';
500
```
501

502
### DynamicColorIOS
503

504
Create iOS-specific dynamic colors that automatically respond to appearance changes (light/dark mode).
505

506
```javascript { .api }
507
import {DynamicColorIOS} from 'react-native';
508

509
// Basic dynamic color (iOS only)
510
const dynamicBackground = DynamicColorIOS({
511
  light: '#ffffff',  // Light mode color
512
  dark: '#000000',   // Dark mode color
513
});
514

515
// Dynamic colors with high contrast support
516
const dynamicText = DynamicColorIOS({
517
  light: '#333333',
518
  dark: '#ffffff',
519
  highContrastLight: '#000000',     // High contrast light mode
520
  highContrastDark: '#ffffff',      // High contrast dark mode
521
});
522

523
// Complex dynamic color scheme
524
const dynamicColors = {
525
  background: DynamicColorIOS({
526
    light: '#f8f9fa',
527
    dark: '#121212',
528
    highContrastLight: '#ffffff',
529
    highContrastDark: '#000000',
530
  }),
531
  
532
  surface: DynamicColorIOS({
533
    light: '#ffffff',
534
    dark: '#1e1e1e',
535
    highContrastLight: '#ffffff', 
536
    highContrastDark: '#1c1c1e',
537
  }),
538
  
539
  text: DynamicColorIOS({
540
    light: '#1c1c1e',
541
    dark: '#ffffff',
542
    highContrastLight: '#000000',
543
    highContrastDark: '#ffffff',
544
  }),
545
  
546
  secondaryText: DynamicColorIOS({
547
    light: '#8e8e93',
548
    dark: '#8e8e93',
549
    highContrastLight: '#606060',
550
    highContrastDark: '#a0a0a0',
551
  }),
552
  
553
  accent: DynamicColorIOS({
554
    light: '#007AFF',
555
    dark: '#0A84FF',
556
    highContrastLight: '#0040DD',
557
    highContrastDark: '#409CFF',
558
  }),
559
};
560

561
// Themed component with dynamic colors
562
const themedStyles = StyleSheet.create({
563
  container: {
564
    backgroundColor: Platform.OS === 'ios' 
565
      ? dynamicColors.background 
566
      : '#f8f9fa', // Android fallback
567
  },
568
  
569
  card: {
570
    backgroundColor: Platform.OS === 'ios'
571
      ? dynamicColors.surface
572
      : '#ffffff', // Android fallback
573
    
574
    shadowColor: Platform.OS === 'ios'
575
      ? DynamicColorIOS({light: '#000000', dark: '#ffffff'})
576
      : '#000000',
577
  },
578
  
579
  text: {
580
    color: Platform.OS === 'ios'
581
      ? dynamicColors.text
582
      : '#1c1c1e', // Android fallback
583
  },
584
  
585
  button: {
586
    backgroundColor: Platform.OS === 'ios'
587
      ? dynamicColors.accent
588
      : '#007AFF', // Android fallback
589
  },
590
});
591

592
// Function to create dynamic colors
593
function createDynamicColor(lightColor, darkColor, options = {}) {
594
  if (Platform.OS !== 'ios') {
595
    return lightColor; // Fallback for non-iOS platforms
596
  }
597
  
598
  return DynamicColorIOS({
599
    light: lightColor,
600
    dark: darkColor,
601
    highContrastLight: options.highContrastLight || lightColor,
602
    highContrastDark: options.highContrastDark || darkColor,
603
  });
604
}
605

606
// Usage with color scheme hook
607
function AdaptiveComponent() {
608
  const colorScheme = useColorScheme();
609
  
610
  // iOS uses dynamic colors, others use manual switching
611
  const backgroundColor = Platform.OS === 'ios' 
612
    ? dynamicColors.background
613
    : (colorScheme === 'dark' ? '#121212' : '#f8f9fa');
614
    
615
  return (
616
    <View style={{backgroundColor}}>
617
      <Text>Adaptive content</Text>
618
    </View>
619
  );
620
}
621
```
622

623
```typescript { .api }
624
interface DynamicColorIOSStatic {
625
  (options: DynamicColorIOSOptions): DynamicColorIOS;
626
}
627

628
interface DynamicColorIOSOptions {
629
  light: string;
630
  dark: string;
631
  highContrastLight?: string;
632
  highContrastDark?: string;
633
}
634

635
interface DynamicColorIOS {
636
  __typename: 'DynamicColorIOS';
637
}
638
```
639

640
## Theme and Appearance Management
641

642
### useColorScheme Hook
643

644
React hook for accessing current color scheme with automatic updates.
645

646
```javascript { .api }
647
import {useColorScheme} from 'react-native';
648

649
// Basic color scheme detection
650
function ThemedComponent() {
651
  const colorScheme = useColorScheme();
652
  
653
  const backgroundColor = colorScheme === 'dark' ? '#000' : '#fff';
654
  const textColor = colorScheme === 'dark' ? '#fff' : '#000';
655
  
656
  return (
657
    <View style={{backgroundColor}}>
658
      <Text style={{color: textColor}}>
659
        Current scheme: {colorScheme}
660
      </Text>
661
    </View>
662
  );
663
}
664

665
// Theme provider with color scheme
666
const ThemeContext = createContext();
667

668
export function ThemeProvider({children}) {
669
  const colorScheme = useColorScheme();
670
  
671
  const theme = {
672
    colors: {
673
      background: colorScheme === 'dark' ? '#121212' : '#ffffff',
674
      surface: colorScheme === 'dark' ? '#1e1e1e' : '#f5f5f5',
675
      text: colorScheme === 'dark' ? '#ffffff' : '#000000',
676
      primary: colorScheme === 'dark' ? '#bb86fc' : '#6200ee',
677
      accent: colorScheme === 'dark' ? '#03dac6' : '#018786',
678
    },
679
    isDark: colorScheme === 'dark',
680
  };
681
  
682
  return (
683
    <ThemeContext.Provider value={theme}>
684
      {children}
685
    </ThemeContext.Provider>
686
  );
687
}
688

689
// Custom hook for theme
690
export function useTheme() {
691
  const context = useContext(ThemeContext);
692
  if (!context) {
693
    throw new Error('useTheme must be used within ThemeProvider');
694
  }
695
  return context;
696
}
697

698
// Component using theme
699
function ThemedCard({title, children}) {
700
  const theme = useTheme();
701
  
702
  const styles = StyleSheet.create({
703
    card: {
704
      backgroundColor: theme.colors.surface,
705
      padding: 16,
706
      borderRadius: 8,
707
      marginVertical: 8,
708
      shadowColor: theme.isDark ? '#ffffff' : '#000000',
709
      shadowOpacity: theme.isDark ? 0.1 : 0.2,
710
      shadowRadius: 4,
711
      elevation: 3,
712
    },
713
    title: {
714
      fontSize: 18,
715
      fontWeight: 'bold',
716
      color: theme.colors.text,
717
      marginBottom: 8,
718
    },
719
  });
720
  
721
  return (
722
    <View style={styles.card}>
723
      <Text style={styles.title}>{title}</Text>
724
      {children}
725
    </View>
726
  );
727
}
728

729
// Responsive theming with dimensions
730
function ResponsiveThemedComponent() {
731
  const colorScheme = useColorScheme();
732
  const {width} = useWindowDimensions();
733
  
734
  const isTablet = width >= 768;
735
  const isDark = colorScheme === 'dark';
736
  
737
  const styles = StyleSheet.create({
738
    container: {
739
      backgroundColor: isDark ? '#121212' : '#ffffff',
740
      padding: isTablet ? 32 : 16,
741
    },
742
    text: {
743
      color: isDark ? '#ffffff' : '#000000',
744
      fontSize: isTablet ? 20 : 16,
745
    },
746
  });
747
  
748
  return (
749
    <View style={styles.container}>
750
      <Text style={styles.text}>Responsive themed content</Text>
751
    </View>
752
  );
753
}
754
```
755

756
```typescript { .api }
757
interface useColorSchemeStatic {
758
  (): 'light' | 'dark' | null;
759
}
760
```
761

762
## Advanced Styling Patterns
763

764
### Responsive Design
765

766
```javascript { .api }
767
import {Dimensions, PixelRatio} from 'react-native';
768

769
// Responsive breakpoints
770
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
771

772
const breakpoints = {
773
  xs: 0,
774
  sm: 576,
775
  md: 768,
776
  lg: 992,
777
  xl: 1200,
778
};
779

780
const isTablet = screenWidth >= breakpoints.md;
781
const isLandscape = screenWidth > screenHeight;
782

783
// Responsive utility functions
784
function responsiveSize(size) {
785
  const scale = screenWidth / 320; // Base width (iPhone 5)
786
  const newSize = size * scale;
787
  
788
  if (Platform.OS === 'ios') {
789
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
790
  } else {
791
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
792
  }
793
}
794

795
function responsiveFontSize(fontSize) {
796
  const {scale, fontScale} = Dimensions.get('window');
797
  const size = fontSize * scale * fontScale;
798
  return Math.round(PixelRatio.roundToNearestPixel(size));
799
}
800

801
// Responsive grid system
802
function createGridStyles(columns = 12) {
803
  const styles = {};
804
  
805
  for (let i = 1; i <= columns; i++) {
806
    styles[`col${i}`] = {
807
      width: `${(i / columns) * 100}%`,
808
    };
809
  }
810
  
811
  return StyleSheet.create(styles);
812
}
813

814
const gridStyles = createGridStyles();
815

816
// Usage
817
<View style={{flexDirection: 'row'}}>
818
  <View style={gridStyles.col6}>
819
    <Text>Half width</Text>
820
  </View>
821
  <View style={gridStyles.col6}>
822
    <Text>Half width</Text>
823
  </View>
824
</View>
825
```
826

827
### Performance Optimization
828

829
```javascript { .api }
830
// Memoized styles for performance
831
const memoizedStyles = useMemo(() => 
832
  StyleSheet.create({
833
    container: {
834
      backgroundColor: theme.backgroundColor,
835
      padding: spacing.medium,
836
    },
837
    text: {
838
      color: theme.textColor,
839
      fontSize: typography.body,
840
    },
841
  }), [theme, spacing, typography]
842
);
843

844
// Style composition patterns
845
const baseStyles = StyleSheet.create({
846
  button: {
847
    paddingHorizontal: 16,
848
    paddingVertical: 12,
849
    borderRadius: 8,
850
    alignItems: 'center',
851
    justifyContent: 'center',
852
  },
853
});
854

855
const variantStyles = StyleSheet.create({
856
  primary: {
857
    backgroundColor: '#007AFF',
858
  },
859
  secondary: {
860
    backgroundColor: '#8E8E93',
861
  },
862
  danger: {
863
    backgroundColor: '#FF3B30',
864
  },
865
});
866

867
const sizeStyles = StyleSheet.create({
868
  small: {
869
    paddingHorizontal: 12,
870
    paddingVertical: 8,
871
  },
872
  large: {
873
    paddingHorizontal: 20,
874
    paddingVertical: 16,
875
  },
876
});
877

878
// Button component with composed styles
879
function Button({variant = 'primary', size = 'medium', style, ...props}) {
880
  const buttonStyles = [
881
    baseStyles.button,
882
    variantStyles[variant],
883
    size !== 'medium' && sizeStyles[size],
884
    style,
885
  ];
886
  
887
  return <TouchableOpacity style={buttonStyles} {...props} />;
888
}
889
```
890

891
This comprehensive styling documentation provides developers with all the tools needed to create beautiful, responsive, and platform-appropriate user interfaces in React Native applications.