Introduction to Styling

How Styling Works in React Native

If you're coming from web development, you're probably used to CSS files, class names, and selectors. React Native does things differently — there are no CSS files. Instead, you write styles as JavaScript objects. It might feel strange at first, but once you get used to it, you'll find it quite logical.

Every style in React Native is a JavaScript object with camelCase properties. Instead of background-color, you write backgroundColor. Instead of font-size, you write fontSize. The values are typically numbers (not strings with px or em units) because React Native uses density-independent pixels.

Inline Styles

The simplest way to style components is inline — directly in the component's style prop. This is like using the style attribute in HTML, but with JavaScript objects.

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

function InlineStyled() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, color: 'blue', fontWeight: 'bold' }}>
        Inline Styled Text
      </Text>
    </View>
  );
}

export default InlineStyled;

Inline styles are quick and easy for simple components. However, they can make your code messy if you have many styles. They also create a new object on every render, which can impact performance in some cases.

StyleSheet.create

The recommended approach is using StyleSheet.create. This defines all your styles in one place, making your code cleaner and more maintainable.

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

function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello</Text>
      <Text style={styles.subtitle}>World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
    marginTop: 8,
  },
});

export default StyledComponent;

StyleSheet.create does two things: it validates your styles at build time (catching typos early) and optimizes them for the native layer. It's the standard way to write styles in React Native and you should use it in almost all cases.

Combining Styles

You can combine multiple style objects using arrays. This is useful for reusable components that accept custom styles or for applying conditional styles.

<View style={[styles.base, styles.highlight]}>
  <Text style={[styles.text, isActive && styles.activeText]}>
    Combined Styles
  </Text>
</View>

When you pass an array of styles, React Native merges them from left to right. Later styles override earlier ones. The && syntax is a common pattern for conditional styling — if isActive is true, styles.activeText is applied.