What is the StyleSheet API in React Native?
Answer
React Native uses a JavaScript-based StyleSheet API instead of CSS. Styles are written as JavaScript objects and applied via the style prop. StyleSheet.create(): creates an optimized style object — validates styles in development, sends style IDs over the bridge (more efficient than raw objects): import { StyleSheet, View, Text } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", padding: 16, }, title: { fontSize: 24, fontWeight: "bold", color: "#333", marginBottom: 8, }, }); export default function App() { return ( <View style={styles.container}> <Text style={styles.title}>Hello World</Text> </View> ); }. Differences from CSS: (1) camelCase properties (backgroundColor not background-color); (2) No class names or selectors — styles applied per component; (3) Numbers without units (pixels by default) — fontSize: 16 not "16px"; (4) No inheritance (except inside Text components for text-related styles); (5) Flexbox is the primary layout system and is default; (6) No shorthand properties in most cases (marginVertical: 8 instead of margin: 8px 0); (7) No CSS cascade — styles don't inherit from parent views. Inline styles: <View style={{ flex: 1, padding: 16 }}> — valid but less efficient (creates new object each render). Style arrays: style={[styles.base, isActive && styles.active]} — merge multiple style objects, falsy values ignored.