StyleSheet — what it is, creating styles in React Native

What is StyleSheet?

StyleSheet — a built-in React Native API for defining component styles. Unlike CSS in web development, RN uses JavaScript objects to describe styles. StyleSheet.create — the key method — accepts a style object and returns an object with numeric identifiers.

StyleSheet is part of the React Native core and does not require installing additional packages. According to Meta (2026), 95% of React Native projects use StyleSheet.create for static styles. Alternatives: styled-components, Emotion, NativeWind (Tailwind for RN) — but the built-in StyleSheet remains the standard for the core.

History and evolution

In the early versions of React Native (2015), styles were defined exclusively as inline objects. StyleSheet.create appeared in RN 0.4 as an optimization. The concept is borrowed from CSS: separate styles from logic for readability and performance. Over the years, the API expanded: absoluteFill, hairlineWidth, flatten were added.

StyleSheet.create vs inline styles

The difference between StyleSheet.create and inline styles is critical for performance. An inline style is a plain JavaScript object created on every component render. StyleSheet.create — an object created once during module load and converted to a numeric ID.

When passing an inline style, React Native sends the entire object through the JavaScript-Native bridge each time. For a component with complex styles, this means dozens of properties transferred on every render. StyleSheet.create passes only a numeric identifier, reducing bridge load.

// StyleSheet.create — optimized approach
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — creates a new object on every render
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

When to use inline: for dynamic styles that depend on state (pressed, selected, active). For static styles, always use StyleSheet.create. Rule: static → create, dynamic → inline function.

Flexbox layout with StyleSheet

Flexbox — the only layout mechanism in React Native (CSS Grid is not supported, float is absent). StyleSheet.create is used to describe flex containers and their children. Key properties: flex (fill coefficient), flexDirection (row | column), justifyContent, alignItems.

By default, flexDirection in React Native is column (in CSS — row). This is the first thing to remember when switching from web development. All View components are flex containers by default. To center an element, use alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Important: in React Native, all sizes are specified without units (just a number). Percentages work but only for width and height relative to the parent. margin and padding accept numbers. For responsiveness, use flex instead of percentages — it is more reliable across different screens.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API includes several methods besides create. StyleSheet.flatten merges an array of styles into a single object — useful for composition and passing styles to third-party components. StyleSheet.hairlineWidth returns the minimum visible line width on the device.

StyleSheet.absoluteFill — a predefined style { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Used for overlay layers, modal windows, and absolute positioning across the entire screen. StyleSheet.absoluteFillObject — the same but as an object for extension.

// flatten — merge styles
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — minimal line
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth is useful for separators and borders — it always looks like 1 physical pixel regardless of screen density. On Retina displays this is 0.5 logical points, on regular — 1 point. Do not use hairlineWidth for elements that must be strictly a specific size.

Responsive layout with Dimensions API

Dimensions API is used together with StyleSheet for responsive layout across different screen sizes. Dimensions.get('window') returns the window width and height. For reactive updates on screen rotation, use the useWindowDimensions hook from React Native.

Although StyleSheet.create does not support media queries like CSS, you can compute values based on Dimensions inside create or use dynamic styles through a function. For breakpoints, create separate styles for different width ranges.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions automatically updates on screen rotation and window size changes on tablets with Split View. For SSR (React Native Web), make sure Dimensions.get is called after component mounting to avoid discrepancies between server and client.

Organizing styles in a project

StyleSheet organization in a project affects maintainability and code reuse. Three approaches: local styles inside the component (styles.js next to the component), global styles (theme.js with color, spacing, typography constants), and modular styles through composition.

Recommended structure: theme.js with color, size, and typography constants; Component.styles.js next to each component for its specific styles; StyleSheet.flatten for combining base and specific styles. For large projects, use a Design System with theme generation.

// theme.js — global constants
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Benefits of modular organization: single source of truth for colors and spacing, simplified refactoring (change primary — all buttons update), style reuse through flatten, readability and code predictability. For TypeScript projects, add types for the theme via declare module.