Sizing & Defaults

Glyx follows one principle everywhere: use the defaults or override them — never fight them. This page is the contract. If a component ever behaves differently, that's a bug.

Flex semantics (React Native, not CSS)

flex: N means grow N, shrink 1, basis 0, no automatic minimum size — exactly like React Native/Yoga:

• A flex: 1 chain inside a fixed window always fits the window; content never forces it taller.
• A flex: 1 ScrollView gets the leftover space and scrolls its overflow.
• CSS's "flex item can't shrink below its content" rule does not apply. You never need minHeight: 0 hacks.

The layout root is always exactly the window size, so flex: 1 chains are reliable from the top down.

Views

A bare View in a column stretches horizontally (alignItems stretch) and sizes to its content vertically — same as a web div.

Text

Text auto-sizes: single line when there's room, wraps when constrained, never needs an explicit width. Alignment is left by default; textAlign: 'center' | 'right' are opt-in.

ScrollView

Give it a size (flex: 1 or height) — it clips and scrolls whatever overflows. Content height is measured natively from real layout, so auto-sized children scroll correctly. Wheel, scrollbar thumb drag, track-click jump, and keyboard navigation all work out of the box. Never set a ScrollView's width to something larger than its container: its hit area follows its layout rect.

Form controls — the width cascade

Every fixed-footprint control (TextInput, Select, DatePicker, TimePicker, DateTimePicker) resolves its width with the same three-step cascade:

1. Explicit width prop — always wins.
2. Width-affecting style — if your style contains any of width, flex, flexGrow, minWidth, or alignSelf, the control applies no default at all; layout decides.
3. Fallback default — with nothing else, the control renders compact (alignSelf: 'flex-start') at its default width.

To make any control fill its container, one style is enough:

<Select options={opts} style={{ alignSelf: 'stretch' }} />   // full width in a column
<TextInput style={{ flex: 1 }} />                            // share a row

Heights

• Single-line TextInput: 44px unless height is given.
• Multiline TextInput: auto-grows with content between minLines (default 3) and maxLines (default 10); an explicit height opts out and the field scrolls instead (wheel, scrollbar, caret-follow).
• Button, Checkbox, Switch, chips: content-sized — padding, not fixed heights.

One chrome per field

TextField (in @glyx-dev/design) draws exactly one bordered surface. Bare, the input itself is the box; with leftIcon/rightIcon the row container is the box and the inner input goes transparent. If you see nested boxes, something is double-styling — pass inputStyle overrides rather than wrapping inputs in your own bordered views.

Theme contrast rules

• colors.surface is for cards/panels and input interiors — it always contrasts with colors.bg.
• colors.border is visible against both bg and surface.
• colors.surfaceHover is for list-row hover states.
• Never use colors.bg as a control's interior — it disappears into the page.