There are no CSS files or selectors. A style is a JavaScript object in a component's style prop, with camelCase names (backgroundColor) and unitless numbers in density-independent pixels (dp). Nothing cascades, except that nested Text inherits font properties (Nesting and Styling Text), and flexbox defaults to flexDirection: 'column'. StyleSheet.create returns the object you give it; its value is type checking of names and values. The style prop also takes an array, merged left to right with false, null and undefined skipped, so a conditional style is style={[styles.card, selected && styles.selected]}. Four helpers cover the rest:
import { StyleSheet } from 'react-native';
const base = StyleSheet.create({ title: { fontSize: 18, color: '#212121' } });
const accent = { color: '#1565c0', fontWeight: '700' };
console.log('flatten:', StyleSheet.flatten([base.title, false, accent]));
console.log('compose keeps identity:', StyleSheet.compose(base.title, null) === base.title);
console.log('hairlineWidth:', StyleSheet.hairlineWidth);
console.log('absoluteFill:', StyleSheet.absoluteFill);Imported from App.js, the module logs to the terminal running Metro:
LOG flatten: {"color": "#1565c0", "fontSize": 18, "fontWeight": "700"}
LOG compose keeps identity: true
LOG hairlineWidth: 0.38095238095238093
LOG absoluteFill: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}flatten merges an array the way the style prop does, for when code must read a final value. compose(a, b) returns the other style unchanged when one is falsy, so memoized children see the same object and skip re-rendering. hairlineWidth is one physical pixel: this emulator has 2.625 pixels per dp (420 dpi), so it is 1 / 2.625 = 0.381, and it differs between devices. absoluteFill is the overlay pattern. Keep StyleSheet.create at module level so the objects are built once, and keep design tokens in one module, as BookNest's src/theme.js does (Scaffolding BookNest); NativeWind adds Tailwind-style classes with NativeWind.