Styling Elements in React Native

An overview of the most important styling techniques before we dive into concrete UI patterns: combining style objects, reusable style constants, and flexbox alignment.

1. Description

Besides a single StyleSheet entry per style prop, React Native also supports ARRAYS of styles (later values override earlier ones) and shared constants for colors/spacing, to keep consistency across an entire app.

2. Short example

// Combining multiple styles: the array is "merged" left to right
<View style={[styles.base, isActive && styles.active]} />

3. Complete project: shared design constants

npx create-expo-app styling-demo
cd styling-demo

theme.js

export const COLORS = {
  primary: '#2563eb',
  background: '#f9fafb',
  text: '#111827',
  textMuted: '#6b7280',
  border: '#e5e7eb',
};

export const SPACING = { small: 8, medium: 16, large: 24 };

App.js

import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { COLORS, SPACING } from './theme';

const CATEGORIES = ['All', 'Shoes', 'Bags', 'Jackets'];

export default function App() {
  const [selected, setSelected] = useState('All');

  return (
    <View style={styles.container}>
      <View style={styles.chipRow}>
        {CATEGORIES.map((category) => (
          <TouchableOpacity
            key={category}
            style={[styles.chip, selected === category && styles.chipActive]}
            onPress={() => setSelected(category)}
          >
            <Text
              style={[styles.chipText, selected === category && styles.chipTextActive]}
            >
              {category}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.background, paddingTop: 60, paddingHorizontal: SPACING.medium },
  chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: SPACING.small },
  chip: { paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, borderWidth: 1, borderColor: COLORS.border },
  chipActive: { backgroundColor: COLORS.primary, borderColor: COLORS.primary },
  chipText: { color: COLORS.textMuted },
  chipTextActive: { color: '#fff', fontWeight: '600' },
});

4. Explanation

theme.js exports ordinary JavaScript constants – no special React Native feature, works exactly like any other module export.
[styles.chip, selected === category && styles.chipActive] – an array of styles; if the condition is false, that false entry is simply ignored (React Native silently skips non-object entries).
Styles later in the array override same-named properties of earlier ones – that's why chipActive comes AFTER chip.

5. Outputs

Ausgabe

A row of rounded "chips" ("All", "Shoes", "Bags", "Jackets"). "All" starts filled blue with white text, the others have only a gray border with gray text. Tapping another chip colors IT blue and resets the previous one.

Tipp: A central theme.js file with colors/spacing is especially valuable in larger apps: if the brand color changes, ONE line change is enough instead of dozens of individual StyleSheet blocks.