{"id":"l-rn-2-1","courseId":"react-native-apps","lang":"en","kind":"lesson","summary":"Style Trailhead with StyleSheet, style arrays and design tokens, using unitless points and longhand properties in a system with no cascade, selectors or media queries.","html":"

The first time you style a React Native screen, you reach for things that aren’t there: a class name, a :hover, a media query, font-family on body so everything inherits it. React Native has none of them. What it has instead is smaller and more predictable: plain objects, applied directly to the component that needs them, in an order you control.

\n

Style objects and StyleSheet.create

\n

A style is a JavaScript object with camelCase keys. You can pass it inline, but most code collects styles with StyleSheet.create, which gives you autocompletion, type checking and a single place to read a component’s styles:

\n
src/components/HikeCard.tsx
import { StyleSheet, Text, View } from 'react-native';\n\nexport function HikeCard({ name, distanceKm }: { name: string; distanceKm: number }) {\n  return (\n    <View style={styles.card}>\n      <Text style={styles.title}>{name}</Text>\n      <Text style={styles.meta}>{distanceKm} km</Text>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  card: {\n    backgroundColor: '#ffffff',\n    borderRadius: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 16,\n    borderWidth: 1,\n    borderColor: '#e2e8e4',\n  },\n  title: { fontSize: 18, fontWeight: '600', color: '#1d2a22' },\n  meta: { fontSize: 14, color: '#5c6b62', marginTop: 4 },\n});
\n

Defining styles below the component is a convention, and a good one: the JSX comes first when you open the file.

\n

Is StyleSheet.create faster than inline objects? Not in any way you’ll measure today. The real costs of inline objects are readability and new object identities on every render, which matter only when you pass styles into memoized children. A sensible default: static styles go in StyleSheet.create, and the few values that depend on props or state go inline or in the style array next to them.

\n

Numbers without units

\n

borderRadius: 12 means 12 density-independent points, not physical pixels. A 12-point corner looks the same size on a cheap Android phone and on an iPhone with three times the pixel density; the platform multiplies for you. Percentages work as strings (width: '50%'), and that’s it: no px, rem, em or vh.

\n

Shorthands that take several values don’t exist either. Instead of margin: '8px 16px' you write marginVertical: 8, marginHorizontal: 16. The same pattern covers padding (paddingTop, paddingHorizontal), borders (borderTopWidth, borderBottomColor) and corners (borderTopLeftRadius). Single-value shorthands like margin: 8 and borderRadius: 12 work as you’d expect.

\n

Modern React Native also supports several properties web developers miss: gap, rowGap and columnGap for spacing children, boxShadow with a CSS-like string, and filter. Older tutorials use separate shadowColor/shadowOffset props for iOS and elevation for Android, which you’ll still see in existing codebases.

\n\n

Style arrays: order is the only rule

\n

The style prop accepts an array. React Native merges it left to right, later keys win, and falsy entries (false, null, undefined) are skipped. That turns conditional styling into one line:

\n
TSX
<View style={[styles.card, isFavorite && styles.favorite, isSelected && styles.selected]} />
\n

There’s no specificity to reason about, no !important, and no style arriving from a parent three files away. If a card looks wrong, the reason is in that array.

\n

Use the same rule to make your own components adjustable. Accept a style prop and put it last:

\n
TSX
import type { StyleProp, ViewStyle } from 'react-native';\n\ntype Props = { name: string; distanceKm: number; style?: StyleProp<ViewStyle> };\n\nexport function HikeCard({ name, distanceKm, style }: Props) {\n  return (\n    <View style={[styles.card, style]}>\n      {/* …title and meta as before */}\n    </View>\n  );\n}\n\n// A caller nudges one instance without forking the component:\n<HikeCard name=\"Ridge Loop\" distanceKm={8.4} style={{ marginBottom: 24 }} />
\n

StyleProp<ViewStyle> is the type that accepts an object, an array, or a falsy value, exactly like the built-in components.

\n

Tokens instead of a cascade

\n

Without inheritance, consistency comes from two places: components (one HikeCard, one PrimaryButton, one AppText) and a small tokens file they all import.

\n
src/theme.ts
export const colors = {\n  bg: '#f6f8f6',\n  surface: '#ffffff',\n  text: '#1d2a22',\n  textMuted: '#5c6b62',\n  primary: '#2f6f4e',\n  border: '#e2e8e4',\n};\n\nexport const space = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 };\nexport const radius = { sm: 8, md: 12, lg: 20 };
\n

Now the card reads borderRadius: radius.md and paddingHorizontal: space.lg, and a designer’s change lands in one file.

\n\n

Why no cascade is a feature

\n

On a large web app, the hardest styling bugs come from rules you didn’t write reaching elements you didn’t expect. React Native removes that whole category. A component’s look is its own style plus whatever its caller passes in, and nothing else. It’s more typing at first, and much less debugging later. Teams that want class-like ergonomics add a library such as NativeWind (Tailwind classes compiled to style objects), but underneath it’s still these same objects.

\n

Next you’ll lay those styled boxes out with flexbox, where React Native’s defaults differ from the web in ways that explain most “why is this squashed?” moments.

\n","toc":[{"id":"sec-1","text":"Style objects and StyleSheet.create","level":2},{"id":"sec-2","text":"Numbers without units","level":2},{"id":"sec-3","text":"Style arrays: order is the only rule","level":2},{"id":"sec-4","text":"Tokens instead of a cascade","level":2},{"id":"sec-5","text":"Why no cascade is a feature","level":2}],"takeaways":["Styles are JavaScript objects with camelCase keys and unitless numbers measured in density-independent points.","CSS shorthands with several values, such as margin '8px 16px', don’t exist; use marginVertical and marginHorizontal.","In a style array later entries win and falsy entries are skipped, which makes conditional styles a one-liner.","Reuse happens through components and a tokens object, not through selectors or a global stylesheet.","Accept a style prop and append it last so callers can adjust a component without forking it."],"further":[{"title":"Style","url":"https://reactnative.dev/docs/style"},{"title":"StyleSheet","url":"https://reactnative.dev/docs/stylesheet"},{"title":"useColorScheme","url":"https://reactnative.dev/docs/usecolorscheme"}],"quiz":[{"q":"

What renders for style={[styles.card, isFavorite && styles.favorite, { padding: 8 }]} when isFavorite is false and both styles set padding?

","options":[{"text":"The app throws, because false isn’t a valid style.","why":"Falsy entries in a style array are skipped on purpose; that’s what makes the && pattern safe here."},{"text":"styles.card’s padding, because the first entry has priority.","why":"Priority goes the other way. Later entries override earlier ones, like Object.assign."},{"text":"styles.favorite’s padding, because named styles beat inline objects.","why":"There is no specificity in React Native. Order is the only rule, and favorite was skipped anyway."},{"text":"A padding of 8, because the last entry in the array wins.","why":"Correct. false is ignored, and the inline object comes last, so its padding overrides the card’s."}],"answer":3},{"q":"

Which style object is valid React Native?

","options":[{"text":"{ margin: '8px 16px', fontSize: '16px' }","why":"Multi-value shorthands and px strings are CSS syntax. React Native wants one number per property."},{"text":"{ marginVertical: 8, marginHorizontal: 16, fontSize: 16 }","why":"Correct. Longhand keys with unitless numbers, measured in points."},{"text":"{ 'margin-vertical': 8, 'font-size': 16 }","why":"Keys are camelCase JavaScript property names, not kebab-case CSS names."}],"answer":1},{"q":"

Trailhead needs every card to use the same corner radius and spacing. What’s the idiomatic approach?

","options":[{"text":"A theme.ts file exporting tokens (colors, spacing, radius) that components import into their StyleSheets.","why":"Correct. Tokens give you one source of truth without needing a cascade, and they’re easy to swap for dark mode."},{"text":"A global stylesheet loaded in the root layout that targets every View.","why":"React Native has no selectors, so there’s nothing that can target “every View”."},{"text":"Copying the numbers into each component and keeping them in sync by search and replace.","why":"It works until the designer changes the radius from 12 to 14 across forty files."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Merge a React Native style value into one plain object.\n// A style can be an object, a falsy value, or an array of styles (arrays can nest).\nfunction flattenStyle(style) {\n if (Array.isArray(style)) {\n return Object.assign(style[0], ...style.slice(1));\n }\n return style;\n}\n\nconst card = { padding: 12, borderRadius: 12 };\nconsole.log(flattenStyle([card, false, { padding: 8 }]));\n"},"solution":{"js":"function flattenStyle(style) {\n if (!style) return {};\n if (!Array.isArray(style)) return { ...style };\n const result = {};\n for (const entry of style) {\n Object.assign(result, flattenStyle(entry));\n }\n return result;\n}\n\nconst card = { padding: 12, borderRadius: 12 };\nconsole.log(flattenStyle([card, false, { padding: 8 }]));\n"},"checks":[{"id":"single-object","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return typeof flattenStyle === 'function' && eq(flattenStyle({ padding: 4 }), { padding: 4 });"},{"id":"later-wins","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ padding: 12, color: 'green' }, { padding: 8 }]), { padding: 8, color: 'green' });"},{"id":"skips-falsy","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ a: 1 }, false, null, undefined, { b: 2 }]), { a: 1, b: 2 });"},{"id":"nested-arrays","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ a: 1 }, [{ b: 2 }, [false, { a: 3 }]]]), { a: 3, b: 2 });"},{"id":"no-mutation","test":"const base = { padding: 12 }; const extra = { padding: 8 }; flattenStyle([base, extra]); flattenStyle(base).padding = 99; return base.padding === 12 && extra.padding === 8;"},{"id":"falsy-input","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle(null), {}) && eq(flattenStyle(false), {}) && eq(flattenStyle([]), {});"}],"title":"Write your own style flattener","prompt":"

React Native merges a style prop the same way every time: arrays are read left to right, later keys win, falsy entries are skipped, and arrays can nest. Implement flattenStyle(style) so it follows those rules and returns one new plain object.

\n\n

The starter is close but has three bugs. Find them.

\n","hints":["Object.assign(style[0], …) writes into the first object. What happens to a shared styles.card the next time it’s used?","Handle the simple cases first: falsy input returns {}, and a non-array object returns { ...style }.","For arrays, start from const result = {} and Object.assign(result, flattenStyle(entry)) for each entry; the recursive call takes care of nesting and falsy entries."],"explanation":"

The solution is recursive: every entry is flattened on its own, which handles nested arrays and falsy values with the same two base cases, and is merged into a fresh object so the caller’s styles are never touched. Mutating style[0] is the dangerous bug: styles.card is shared by every card, so one favorite card would quietly change all of them. This is the same contract as StyleSheet.flatten, and knowing it lets you predict exactly what any style array will render.

\n","checkLabels":{"single-object":"A single object comes back with the same keys","later-wins":"Later entries override earlier ones","skips-falsy":"false, null and undefined entries are skipped","nested-arrays":"Nested arrays are flattened in order","no-mutation":"Input style objects are never modified","falsy-input":"Falsy input and empty arrays return {}"}},"words":705,"readMinutes":3}