0Pricing
React Native Academy · Lesson

StyleSheet.create and Inline Styles

Create style objects using StyleSheet.create for performance, compare them with inline styles, and apply multiple styles using arrays.

How React Native Styles Work

React Native styling is inspired by CSS but uses JavaScript objects instead of CSS files. Property names are camelCase (backgroundColor not background-color), and values for lengths and sizes are numbers representing device-independent pixels — not strings like '16px'. There are no selectors, cascading, or inheritance (except font styles inside nested Text components). Each component is styled individually through a style prop, giving you explicit control over every element's appearance.

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

export default function StyledBox() {
  return (
    // Inline style object directly
    <View style={{
      width: 120,
      height: 120,
      backgroundColor: '#4f86f7',
      borderRadius: 16,
      padding: 16,
    }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
        Hello!
      </Text>
    </View>
  );
}

StyleSheet.create() for Performance

StyleSheet.create() takes an object of named style definitions and returns a processed version. Under the hood, React Native registers these styles with the native layer and sends only an integer ID during subsequent renders, rather than the full style object. This reduces the JavaScript-to-native communication overhead — especially noticeable in lists that re-render frequently. It also runs style validation in development mode, warning you if you use unsupported properties. Always prefer StyleSheet.create over inline objects for styles that don't change.

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

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.body}>Card description text goes here.</Text>
    </View>
  );
}

// Defined once, referenced by name
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#222' },
  body: { fontSize: 14, color: '#666', marginTop: 6, lineHeight: 20 },
});

All lessons in this course

  1. StyleSheet.create and Inline Styles
  2. Flexbox Direction, JustifyContent, AlignItems
  3. flex, flexGrow, and Responsive Sizing
  4. Building a Responsive Card Grid
← Back to React Native Academy