Styles, Components, (and TypeScript!)

Core components accept a style prop. The names and values feel close to CSS, but property names use camelCase: backgroundColor instead of background-color.

The style prop can be a plain JavaScript object. You can also pass an array of styles; later styles have precedence, which makes it useful for layering defaults and overrides.

Every <View> is a flex container by default — no need to write display: flex. A few defaults differ from CSS:

• flexDirection defaults to column, not row
• alignContent defaults to flex-start, not stretch
• flexShrink defaults to 0, not 1

Otherwise, it's the Flexbox you know. flex: 1 to fill available space works exactly as expected.

StyleSheet is React Native's helper for organizing styles when objects start getting too large to leave inline.

Let's create a custom Box component that accepts a color prop so we can reuse it with different colors. Notice the style prop takes an array — so we can merge a base style with a dynamic one, just like how CSS lets styles cascade down to child elements.

The red squiggles you're seeing in VS Code, that's TypeScript doing its job. Think of it as a helpful spell-checker for your code. Right now it's flagging two things:

1. styles.box doesn't exist yet — we haven't added it to the stylesheet.
2. TypeScript doesn't know what kind of value color should be (a string? a number?).

Notice the app still runs despite the warnings. TypeScript errors are not crashes — they're early warnings to help you catch mistakes before they become bugs.

Let's fix the first error by adding box to the stylesheet:

That clears the first warning. We'll deal with the second one later! In the meantime, try rendering Box with and without the prop.