How does styling work in React Native?

React Native does not use CSS files or selectors. Every component accepts a style prop, which can be an object, an array of objects, or a registered style. Property names are camelCase and values are numbers or strings, with numbers interpreted as density-independent pixels unless a percentage string is used.

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

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 12, backgroundColor: "#fff" },
  title: { fontSize: 18, fontWeight: "700" },
  muted: { color: "#6b7280" },
});

export function Card({ title, subtitle }: { title: string; subtitle: string }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={[styles.title, styles.muted]}>{subtitle}</Text>
    </View>
  );
}

What is different from CSS

• No cascading or inheritance except for text styles inside a Text tree
• No pseudo-classes; use component state such as pressed or focused
• No media queries; use useWindowDimensions and conditional styles
• Shadows differ: iOS uses shadowColor and shadowOffset, Android uses elevation
• Transform arrays are objects, such as { translateX: 10 }

Keep styles close to the component or in a shared theme module. A design system with spacing, colour and typography tokens prevents the drift that happens when every screen hard-codes values.