Styling with StyleSheet

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Styling with StyleSheet, no need to be intimidated
Write code yourself and run it on Expo Go
Apply this concept immediately in a real app project

Let's think about this for a moment

StyleSheet.create() is a helper function that validates and optimizes style objects — using a plain object ({ }) directly still works, but StyleSheet.create gives you better performance and shows style-error warnings in development mode. Property names look similar to CSS but are camelCase (background-color → backgroundColor), and units aren't needed (no px — just plain numbers).

Let's connect this to a real scenario

If you want to combine multiple style objects on one component, you can use array syntax — style={[styles.base, styles.active]} applies base style first and then overrides with active style (the last item in the array has the highest priority). This array pattern makes it easy to implement conditional styling (e.g. a button's pressed state).

Prefer StyleSheet.create() over a plain object
Property names are camelCase (backgroundColor, fontSize)
Style array [styles.a, styles.b] = combining/overriding styles

Code Example

javascript

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#f0f0f0',
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1a1a2e',
  },
});

// Combining styles conditionally
<View style={[styles.card, isActive && styles.activeCard]}>
  <Text style={styles.title}>Card Title</Text>
</View>

You should see

You'll be able to style a card component with StyleSheet.create and combine conditional styles using array syntax.

5-Minute Try-It

Write a card style yourself (backgroundColor, borderRadius, padding), then add a conditional style that changes the border color when isActive is true.

A Quick Heads-Up

Don't assume every style property matches CSS exactly — 'display: flex' is already the default for every View, but the default flexDirection is 'column' (unlike CSS on the web, where the default is 'row').

Easy traps

Writing CSS units (px, em) into React Native styles — you should only write plain numbers
Writing kebab-case (background-color) instead of camelCase

Now Try It Yourself

Write a card style yourself (backgroundColor, borderRadius, padding), then add a conditional style that changes the border color when isActive is true.

You'll know it worked when: You'll be able to style a card component with StyleSheet.create and combine conditional styles using array syntax.