UI kit primitives

Shared building blocks live in src/components. Import the kit from the barrel:

import { AppText, Button, Card, Screen, useToast } from '@/components/ui';

Every primitive reads neutrals from useColors() and the accent from useBrandPalette(), and lays out rows with rtlRow. Build screens from these instead of hand-rolling buttons, inputs or rows. A hand-rolled control will not follow the theme, the studio color or the layout direction. Most icon props take an Ionicons glyph name from @expo/vector-icons.

Layout

Screen

The page wrapper. Handles safe area, background, skin backdrop, scrolling, pull to refresh, the keyboard and a pinned footer. It has its own page: Keyboard handling and Screen.

Row

A View with flexDirection: rtlRow.

Prop	Default	Notes
`align`	`'center'`	`alignItems`
`justify`		`justifyContent`
`gap`		Prefer `gap` over physical margins so spacing survives a direction change

Card

A themed surface.

Prop	Default
`padded`	`true`
`style`

SectionHeader

A titleMd heading with an optional trailing link.

Prop	Notes
`title`	Required
`actionLabel`, `onAction`	Renders a `LinkText` when a label is given

BrandTopBar

The header for main screens. The title leads and the studio logo closes the row, so both mirror with the language.

Prop	Notes
`title`	Rendered as `display` text
`leading`	Replaces the title. The home screen puts its greeting here
`action`	A control shown beside the logo

The logo is 132 by 48. On a load error it falls back to the studio name in the brand color.

AmbientGlow

Two soft brand-colored orbs behind a classic screen. Screen renders it by default when no skin is active.

Prop	Notes
`scrollY`	A Reanimated shared value. When given, the orbs fade and drift with scroll

Gradient ids are made unique per mount with useId, because tab screens stay mounted together.

Text

AppText

All text goes through AppText.

Prop	Default	Notes
`variant`	`'body'`	A key of `typography`. See Theming
`color`	Variant default from the active palette
`align`	`rtlTextAlign`	Pass `'center'` explicitly when needed

LinkText

Tappable label text with accessibilityRole="link".

Prop	Default
`label`
`onPress`
`color`	`colors.brand`

Badge

A small pill with optional icon.

Prop	Default	Values
`label`
`tone`	`'neutral'`	`neutral`, `brand`, `success`, `warning`, `danger`, `info`
`icon`		Ionicons name, drawn at 12

Buttons and pressables

Button

Prop	Default	Notes
`label`		Required
`variant`	`'filled'`	`filled`, `tonal`, `outline`, `danger`, `ghost`, `whatsapp`
`size`	`'lg'`	`sm` 40 high, `md` 48, `lg` 56
`loading`	`false`	Shows a spinner and disables the button
`disabled`	`false`	50% opacity
`fullWidth`		`true` stretches. `false` hugs content at the start edge. Unset leaves alignment to the parent
`leftIcon`, `rightIcon`		Ionicons names
`tint`		A `ButtonTint` of `bg`, `pressed`, `fg` and optional `border` that overrides the variant palette

filled and tonal use the studio brand color. whatsapp uses fixed WhatsApp green. Press feedback is a scale to 0.97 that respects the system reduce-motion setting.

IconButton

A round icon-only button.

Prop	Default	Values
`icon`		Ionicons name
`variant`	`'surface'`	`surface`, `tonal`, `ghost`
`size`	`'md'`	`sm` 36, `md` 44, `lg` 52
`disabled`, `accessibilityLabel`, `color`

Always pass accessibilityLabel.

BackButton

A GlassIconButton with the direction-aware back arrow.

Prop	Default
`onPress`	`router.back()` when the router can go back
`icon`	`iconBack` from `@/lib/rtl`
`accessibilityLabel`	`strings.back`
`size`	`40`

PressableScale

The base for custom tappable surfaces. A Pressable that scales down on press.

Prop	Default	Notes
`scaleTo`	`0.97`
`pressedStyle`		Merged in while pressed
`style`		Must be a static value or array

Reanimated does not apply function-form style props on animated components. Use pressedStyle instead of style={({ pressed }) => ...}.

Chip

A selectable pill.

Prop	Default
`label`
`selected`	`false`
`onPress`, `icon`, `disabled`
`fullWidth`	`false`. When true the chip grows to share a row equally

ActionRow and ActionCard

A navigation row: icon tile, title, optional subtitle, and a forward chevron that follows the reading direction. ActionCard is the same row inside a Card.

Prop	Notes
`icon`, `title`, `onPress`	Required
`subtitle`
`iconColor`, `iconTint`	Default to the brand color and brand tint

PlanSwitcher

A horizontal row of plan chips used by the workouts and nutrition tabs when a trainee has more than one plan.

Prop	Notes
`plans`	`{ id, name, kind?, pdfUrl? }`
`selectedId`, `onSelect`

A plan with kind: 'file' shows a badge. filePlanSource(pdfUrl) decides between the link badge and the file badge.

Inputs

TextField

A TextInput with label, error and optional leading icon. Forwards its ref.

Prop	Default	Notes
`label`		Shown above the field
`labelInline`	`false`	Puts the label inside the field and aligns the value to the end edge
`error`		Shows a red border and message
`leftIcon`		Ionicons name
`multiline`, `maxLines`	`maxLines` 8	A multiline field grows with its content up to `maxLines`

Text alignment uses surfaceStart and surfaceEnd, because TextInput.textAlign is a prop and React Native does not mirror props. See RTL and language.

SearchField

TextField with a search icon, returnKeyType="search", no autocorrect and no autocapitalize. Pair it with foldForSearch, searchTerms and matchesSearchTerms from src/lib/search.ts for Hebrew-aware matching: those fold niqqud, final letter forms, accents and punctuation before comparing.

PasswordField

A secure TextInput with a show and hide toggle. Not used by the trainee sign in, which has no passwords.

OtpInput

Six cells drawn over one hidden input.

Prop	Default
`value`, `onChangeText`
`length`	`6`
`error`
`autoFocus`	`true`
`onComplete`	Called with the digits when the last one is entered

It sets textContentType="oneTimeCode" and autoComplete="sms-otp" for system autofill.

Progress and loading

ProgressBar

Prop	Default	Notes
`progress`		Clamped to 0 to 1
`color`	`colors.brand`
`trackColor`
`height`	`8`
`animate`, `animateDelay`	`false`, `0`	Animates from 0 over 720 ms
`glow`	`false`	A soft halo around the fill

The glow uses boxShadow. React Native only draws outset box shadows on Android from API 28, and the app’s minSdkVersion is 26, so on older Android the bar draws three concentric translucent layers instead.

Ring

A circular progress ring drawn with react-native-svg.

Prop	Default
`progress`	Clamped to 0 to 1
`size`	`sizes.ring` (88)
`stroke`	`sizes.ringStroke` (9)
`color`, `trackColor`	`colors.brand`, `colors.ringTrack`
`value`, `unit`	Text in the centre
`animate`, `animateDelay`	`false`, `0`

Skeleton

Pulsing placeholders. Four exports:

Component	Props
`Skeleton`	`width` (default `'100%'`), `height` (16), `borderRadius`
`SkeletonText`	`lines` (2), `widths`, `height` (12), `gap`
`SkeletonCircle`	`size` (44)
`SkeletonRow`	`thumbnail` (`'square'`, `'circle'` or `false`), `thumbnailSize` (48), `lines` (2), `trailing`

Confetti

Confetti takes a numeric trigger. It renders nothing while the value is 0 or less, and replays each time the number changes. Sixteen pieces fall for 1500 ms in the brand color plus four fixed colors.

Feedback

ToastProvider and useToast

ToastProvider is mounted once in the root layout. Anywhere below it:

const toast = useToast();
toast.show(strings.saved);
toast.show(strings.saveFailed, 'error');

The variant is 'success' (default) or 'error'. A toast shows for 2200 ms at the top of the screen. A new toast replaces the current one.

Icons

Icon

Renders an SVG from assets/icons by name.

<Icon name="check" size={22} color={accent.brand} />

iconRegistry.ts imports each SVG as a component through react-native-svg-transformer, which is wired in metro.config.js. IconName is the union of registry keys. src/types/svg.d.ts declares the module type. The kit mixes two icon sources. Icon covers the custom set. Most components take Ionicons names directly. lucide-react-native is also a dependency.

Tabs

AndroidTabsLayout and AndroidTabBar build the Android tab bar: a floating glass dock, at most 560 wide, with a haptic tick on change and tabBarHideOnKeyboard. iOS uses native tabs instead. See Route tree.

Glass primitives

src/components/glass wraps expo-glass-effect. LIQUID_GLASS in glass/utils.ts is computed once from liquidGlassAvailable() in src/lib/liquidGlass.ts, which requires both isLiquidGlassAvailable() and isGlassEffectAPIAvailable() and returns false if either throws.

Component	Use	Fallback when glass is unavailable
`GlassSurface`	A panel that clips its content	`BlurView` from `expo-blur` under a `glassFill` tint with a `glassStroke` border
`LiquidGlassTouchable`	An interactive glass button with tap and 500 ms long press through gesture handler	A plain touchable surface
`GlassIconButton`	A round glass icon button	Same as above
`GlassPill`	A text pill with optional icon	Same as above

GlassSurface props: radius, tint, interactive, native (set false to force the fallback), glassStyle, fallbackIntensity (default 28), borderWidth. GlassIconButton props: icon, accessibilityLabel, onPress, onLongPress, iconColor, size (44), iconSize (22), active, solid. Rules carried over from mobile/docs/liquid-glass.md that the code still follows:

Do not put backgroundColor on a glass view. splitTint() lifts it out of the style and passes it as the native tintColor.
Inside sheets and modals native glass does not composite. Pass solid to GlassIconButton so it renders an opaque sheetCardSurface button.
active renders a solid brand-colored button.

App-level components

These sit next to the kit in src/components.

Component	Purpose
`SplashGate`	JS overlay that continues the native splash until the app is ready, then fades out
`IconLoader`	The animated Perform mark, drawn with SVG and Reanimated so it needs no native Lottie module
`SystemNavigationBar`	Sets the Android navigation bar style. Loads `expo-navigation-bar` lazily and renders nothing if the module is missing
`phone/*`	`CountryCodeButton`, `CountryPickerSheet`, `NonIsraeliCheckbox`, `usePhoneCountry` for phone fields

​Layout

​Screen

​Row

​Card

​SectionHeader

​BrandTopBar

​AmbientGlow

​Text

​AppText

​LinkText

​Badge

​Buttons and pressables

​Button

​IconButton

​BackButton

​PressableScale

​Chip

​ActionRow and ActionCard

​PlanSwitcher

​Inputs

​TextField

​SearchField

​PasswordField

​OtpInput

​Progress and loading

​ProgressBar

​Ring

​Skeleton

​Confetti

​Feedback

​ToastProvider and useToast

​Icons

​Icon

​Tabs

​Glass primitives

​App-level components

Layout

Screen

Row

Card

SectionHeader

BrandTopBar

AmbientGlow

Text

AppText

LinkText

Badge

Buttons and pressables

Button

IconButton

BackButton

PressableScale

Chip

ActionRow and ActionCard

PlanSwitcher

Inputs

TextField

SearchField

PasswordField

OtpInput

Progress and loading

ProgressBar

Ring

Skeleton

Confetti

Feedback

ToastProvider and useToast

Icons

Icon

Tabs

Glass primitives

App-level components