StyleSheet - React Native

The StyleSheet API provides an abstraction similar to CSS StyleSheets for creating and managing component styles. It offers performance benefits through style validation and optimization.

Import

import { StyleSheet } from 'react-native';

Methods

create()

Creates an optimized StyleSheet from a style object.

const styles = StyleSheet.create(obj);

object

required

An object containing named style definitions.Each key becomes a style name, and each value is a style object.

Returns: An immutable object with the same keys, optimized for performance. Benefits:

Validates style properties at creation time
Freezes style objects in development mode
Enables performance optimizations
Provides better error messages
Allows style IDs for efficient bridging

flatten()

Flattens an array of style objects into a single aggregated style object.

const flatStyle = StyleSheet.flatten(styles);

array | object

required

A style object, array of styles, or nested array of styles.

Returns: A single flattened style object.

compose()

Combines two styles, with the second style overriding properties in the first.

const combinedStyle = StyleSheet.compose(style1, style2);

object

First style object (base styles).

object

Second style object (override styles).

Returns: Combined style. If either style is falsy, returns the other without allocating an array.

Properties

hairlineWidth

The thinnest line width that can be displayed on the device.

const width = StyleSheet.hairlineWidth;

Returns: number - Typically 1 / PixelRatio.get(), always at least 1 physical pixel.

absoluteFill

Pre-defined style for absolute positioning that fills the entire parent.

const fillStyle = StyleSheet.absoluteFill;

Equivalent to:

{
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
}

Examples

Basic Usage

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

const MyComponent = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Hello World</Text>
    <Text style={styles.subtitle}>Welcome to React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 8,
  },
});

export default MyComponent;

Combining Styles

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

const MyComponent = ({ isActive }) => (
  <View>
    <Text style={[styles.text, isActive && styles.activeText]}>
      Status Text
    </Text>
  </View>
);

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'black',
  },
  activeText: {
    color: 'green',
    fontWeight: 'bold',
  },
});

Using compose()

import { StyleSheet } from 'react-native';

const baseButtonStyle = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
});

const primaryButtonStyle = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
  },
});

const combinedStyle = StyleSheet.compose(
  baseButtonStyle.button,
  primaryButtonStyle.button,
);

Using flatten()

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  base: { fontSize: 16, color: 'black' },
  bold: { fontWeight: 'bold' },
  red: { color: 'red' },
});

const flatStyle = StyleSheet.flatten([
  styles.base,
  styles.bold,
  styles.red,
]);
// { fontSize: 16, color: 'red', fontWeight: 'bold' }

Using hairlineWidth

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

const Divider = () => <View style={styles.divider} />;

const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
});

Using absoluteFill

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

const Overlay = () => (
  <View style={styles.container}>
    <Image source={require('./bg.png')} style={styles.backgroundImage} />
    <View style={styles.overlay}>
      {/* Content */}
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    ...StyleSheet.absoluteFill,
    resizeMode: 'cover',
  },
  overlay: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
});

Responsive Styles

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

const { width } = Dimensions.get('window');
const isSmallDevice = width < 375;

const styles = StyleSheet.create({
  container: {
    padding: isSmallDevice ? 10 : 20,
  },
  text: {
    fontSize: isSmallDevice ? 14 : 16,
  },
});

Conditional Styles

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

const Card = ({ isHighlighted, isDisabled }) => (
  <View
    style={[
      styles.card,
      isHighlighted && styles.highlighted,
      isDisabled && styles.disabled,
    ]}
  />
);

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  highlighted: {
    borderWidth: 2,
    borderColor: '#007AFF',
  },
  disabled: {
    opacity: 0.5,
  },
});

Shadows and Elevation

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

Reusable Style Compositions

import { StyleSheet } from 'react-native';

// Base styles
const baseStyles = {
  centerContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  shadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
};

// Component styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...baseStyles.centerContent,
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    ...baseStyles.shadow,
  },
});

Dynamic Styles

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

const Box = ({ color, size }) => (
  <View style={[styles.box, { backgroundColor: color, width: size, height: size }]} />
);

const styles = StyleSheet.create({
  box: {
    borderRadius: 8,
  },
});

Nested Style Arrays

const styles = StyleSheet.create({
  base: { fontSize: 16 },
  bold: { fontWeight: 'bold' },
  red: { color: 'red' },
  large: { fontSize: 20 },
});

<Text
  style={[
    styles.base,
    [
      isBold && styles.bold,
      isImportant && [styles.red, styles.large],
    ],
  ]}
>
  Text Content
</Text>

Style Properties

Layout Props

width, height
margin, marginTop, marginRight, marginBottom, marginLeft
padding, paddingTop, paddingRight, paddingBottom, paddingLeft
flex, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis
justifyContent, alignItems, alignSelf, alignContent
position ('relative', 'absolute')
top, right, bottom, left
zIndex

Transform Props

transform: [
  { translateX: 10 },
  { translateY: 20 },
  { rotate: '45deg' },
  { scale: 1.5 },
  { scaleX: 2 },
  { scaleY: 0.5 },
  { skewX: '10deg' },
  { skewY: '10deg' },
]

Color and Background

backgroundColor
opacity
overflow ('visible', 'hidden', 'scroll')

Border Props

borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
borderStyle ('solid', 'dotted', 'dashed')

Shadow Props (iOS)

shadowColor
shadowOffset ({ width: number, height: number })
shadowOpacity
shadowRadius

Elevation (Android)

elevation

Text Props

color
fontSize, fontWeight, fontFamily, fontStyle
lineHeight, letterSpacing
textAlign ('left', 'right', 'center', 'justify')
textDecorationLine ('none', 'underline', 'line-through')
textTransform ('none', 'uppercase', 'lowercase', 'capitalize')

Performance Tips

Always use StyleSheet.create() instead of inline styles. It validates styles once and creates optimized style IDs.

// ❌ Bad: Inline styles (recreated on every render)
<View style={{ flex: 1, padding: 20 }} />

// ✅ Good: StyleSheet (optimized, validated)
const styles = StyleSheet.create({ container: { flex: 1, padding: 20 } });
<View style={styles.container} />

Avoid creating new style objects or arrays on every render. This defeats performance optimizations.

// ❌ Bad: New array on every render
<View style={[styles.base, { color: props.color }]} />

// ✅ Good: Conditional styles from StyleSheet
<View style={[styles.base, props.isActive && styles.active]} />

Use StyleSheet.compose() for optimal performance when combining two styles, especially in reusable components.

Common Patterns

Theme-based Styles

const createStyles = (theme) => StyleSheet.create({
  container: {
    backgroundColor: theme.background,
  },
  text: {
    color: theme.text,
  },
});

const lightTheme = { background: '#fff', text: '#000' };
const darkTheme = { background: '#000', text: '#fff' };

const styles = createStyles(lightTheme);

Style Inheritance

const baseStyles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
});

const variants = StyleSheet.create({
  primary: {
    ...baseStyles.button,
    backgroundColor: '#007AFF',
  },
  secondary: {
    ...baseStyles.button,
    backgroundColor: '#5856D6',
  },
});

​Import

​Methods

​create()

​flatten()

​compose()

​Properties

​hairlineWidth

​absoluteFill

​Examples

​Basic Usage

​Combining Styles

​Using compose()

​Using flatten()

​Using hairlineWidth

​Using absoluteFill

​Responsive Styles

​Conditional Styles

​Shadows and Elevation

​Reusable Style Compositions

​Dynamic Styles

​Nested Style Arrays

​Style Properties

​Layout Props

​Transform Props

​Color and Background

​Border Props

​Shadow Props (iOS)

​Elevation (Android)

​Text Props

​Performance Tips

​Common Patterns

​Theme-based Styles

​Style Inheritance

Import

Methods

create()

flatten()

compose()

Properties

hairlineWidth

absoluteFill

Examples

Basic Usage

Combining Styles

Using compose()

Using flatten()

Using hairlineWidth

Using absoluteFill

Responsive Styles

Conditional Styles

Shadows and Elevation

Reusable Style Compositions

Dynamic Styles

Nested Style Arrays

Style Properties

Layout Props

Transform Props

Color and Background

Border Props

Shadow Props (iOS)

Elevation (Android)

Text Props

Performance Tips

Common Patterns

Theme-based Styles

Style Inheritance