Text Stable WINMACLNX

Renders text. The only component that can contain string literals.

Import

import { Text } from 'veloxkit'

Basic usage

<Text style={{ fontSize: 16, color: '#F0F0F2' }}>Hello, world!</Text>

Mixed content (expressions + strings)

Text flattens all children to a single string before rendering, so mixing string literals and expressions works as expected:

<Text>{count} items</Text>
<Text>= {result}</Text>
<Text>Hello, {name}!</Text>

Nested text (inline styles)

Text components can be nested for inline styling:

<Text style={{ fontSize: 16 }}>
  Hello,{' '}
  <Text style={{ fontWeight: 700, color: '#00A878' }}>VeloxKit</Text>
  !
</Text>

Props

Prop	Type	Default	Description
`style`	`TextStyle`	`{}`	Typography and layout styles
`numberOfLines`	`number`	`undefined`	Cap layout height to N lines and clip overflow
`ellipsizeMode`	`'tail' \| 'head' \| 'middle' \| 'clip'`	`'tail'`	Where to truncate
`selectable`	`boolean`	`false`	Allow text selection
`onPress`	`() => void`	—	Tap handler (use `Pressable` for complex interactions)
`accessibilityRole`	`string`	`'text'`	—

Style properties

<Text style={{
  fontSize: 24,
  fontWeight: '700',         // '100'–'900' or 'bold', 'normal'
  fontStyle: 'italic',
  fontFamily: 'JetBrains Mono',   // must be loaded via veloxkit.config.ts
  color: '#F0F0F2',
  lineHeight: 32,             // absolute px, not a multiplier
  letterSpacing: -0.5,
  textAlign: 'center',        // 'left', 'right', 'center', 'justify'
  textDecorationLine: 'underline',
  textTransform: 'uppercase',
}} />

Custom fonts

export default defineConfig({
  fonts: [
    { family: 'JetBrains Mono', path: './assets/fonts/JetBrainsMono-Regular.ttf' },
    { family: 'JetBrains Mono', path: './assets/fonts/JetBrainsMono-Bold.ttf', weight: 700 },
  ],
})

Then use them in style.fontFamily.

Line clamping

<Text numberOfLines={2} ellipsizeMode="tail">
  This is a very long string that will be truncated after two lines with an
  ellipsis at the tail end of the text.
</Text>

Selectable text

<Text selectable style={{ fontFamily: 'monospace' }}>
  npx veloxkit-cli create my-app
</Text>

View Pressable