View Stable WINMACLNX

The fundamental layout primitive. Every UI in VeloxKit is built from nested View components.

View maps to a native flexbox container. It has no visual appearance by default — use style to apply background colors, borders, padding, and layout.

Import

import { View } from 'veloxkit'

Basic usage

<View style={{ flex: 1, padding: 24 }}>
  <Text>Hello</Text>
</View>

Props

Prop	Type	Default	Description
`style`	`ViewStyle`	`{}`	Layout and appearance styles
`onLayout`	`(event: LayoutEvent) => void`	—	Called when the view's layout changes
`testID`	`string`	—	Used by testing utilities
`accessible`	`boolean`	`true`	Whether the view is accessible
`accessibilityLabel`	`string`	—	Label for screen readers
`accessibilityRole`	`string`	—	ARIA-equivalent role hint
`pointerEvents`	`'auto' \| 'none' \| 'box-none'`	`'auto'`	Controls hit testing

CSS-compatible flex defaults

View uses the same flex defaults as CSS:

Property	Default	CSS equivalent
`flexDirection`	`'column'`	`flex-direction: column`
`justifyContent`	`'flex-start'`	`justify-content: flex-start`
`alignItems`	`'stretch'`	`align-items: stretch`

Children without an explicit cross-axis size stretch to fill their container width (column) or height (row), just as in a browser. To center children, pass alignItems: 'center' explicitly.

Style properties

View supports all flexbox layout properties plus visual styling:

<View style={{
  // Layout
  flex: 1,
  flexDirection: 'row',    // 'column' (default), 'row', 'row-reverse', 'column-reverse'
  flexWrap: 'wrap',
  alignItems: 'center',    // 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
  justifyContent: 'space-between',
  gap: 12,
  rowGap: 8,
  columnGap: 16,
 
  // Sizing
  width: 200,
  height: 100,
  minWidth: 100,
  maxWidth: '80%',         // percentages supported
 
  // Spacing
  padding: 16,
  paddingHorizontal: 20,
  paddingVertical: 12,
  margin: 8,
 
  // Visual
  background: '#1A1A26',
  borderRadius: 8,
  borderWidth: 1,
  borderColor: '#2A2A3A',
  opacity: 0.9,
 
  // Shadows
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.3,
  shadowRadius: 8,
 
  // Positioning
  position: 'absolute',
  top: 0,
  left: 0,
  zIndex: 10,
  overflow: 'hidden',      // clips children
}} />

Layout event

<View
  onLayout={(e) => {
    const { x, y, width, height } = e.nativeEvent.layout
    console.log(`View is ${width}×${height} at (${x}, ${y})`)
  }}
/>

onLayout fires after the layout pass, which happens asynchronously relative to the React commit. Use it for measuring, not for computing initial styles (which would cause a layout loop).

Accessibility

<View
  accessible
  accessibilityRole="button"
  accessibilityLabel="Submit form"
>
  <Text>Submit</Text>
</View>

VeloxKit exposes accessible views to the OS accessibility tree (VoiceOver on macOS, Narrator on Windows, AT-SPI on Linux).

Build Modes Text