foregroundStyle

`foregroundStyle(style)`

Parameter	Type	Description
`style`	Color \| { color: Color, type: 'color' } \| { style: 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'quinary', type: 'hierarchical' } \| { colors: Color[], endPoint: { x: number, y: number }, startPoint: { x: number, y: number }, type: 'linearGradient' } \| { center: { x: number, y: number }, colors: Color[], endRadius: number, startRadius: number, type: 'radialGradient' } \| { center: { x: number, y: number }, colors: Color[], type: 'angularGradient' }	The foreground style configuration. Can be: . *Simple Color (`Color`):

Hex colors: '#FF0000', '#RGB', '#RRGGBB', '#AARRGGBB'
Named colors: 'red', 'blue', 'green', and so on.
React Native color values like PlatformColor('label')

. Explicit Color Object: .

{ type: 'color', color: PlatformColor('label') }

. Hierarchical Styles (Semantic): Auto-adapting semantic styles that respond to light/dark mode and accessibility settings: .

{ type: 'hierarchical', style: 'primary' }    // Most prominent (main content, headlines)
{ type: 'hierarchical', style: 'secondary' }  // Supporting text, subheadlines
{ type: 'hierarchical', style: 'tertiary' }   // Less important text, captions
{ type: 'hierarchical', style: 'quaternary' } // Subtle text, disabled states
{ type: 'hierarchical', style: 'quinary' }    // Most subtle (iOS 16+, fallback to quaternary)

. Linear Gradient: .

{
  type: 'linearGradient',
  colors: [PlatformColor('systemPink'), '#0000FF', '#00FF00'],
  startPoint: { x: 0, y: 0 },    // Top-left
  endPoint: { x: 1, y: 1 }       // Bottom-right
}

. Radial Gradient: .

{
  type: 'radialGradient',
  colors: [PlatformColor('systemPink'), '#0000FF'],
  center: { x: 0.5, y: 0.5 },    // Center of view
  startRadius: 0,                // Inner radius
  endRadius: 100                 // Outer radius
}

. Angular Gradient (Conic): .

{
  type: 'angularGradient',
  colors: [PlatformColor('systemPink'), '#00FF00', '#0000FF'],
  center: { x: 0.5, y: 0.5 }     // Rotation center
}

Sets the foreground style of a view with comprehensive styling options.

Replaces the deprecated foregroundColor modifier with enhanced capabilities including colors, gradients, and semantic hierarchical styles that adapt to system appearance.

Returns: ModifierConfig

A view modifier that applies the specified foreground style

See: Official SwiftUI documentation.

Example

// Simple usage
<Text modifiers={[foregroundStyle('#FF0000')]}>Red Text</Text>

// Adaptive hierarchical styling
<Text modifiers={[foregroundStyle({ type: 'hierarchical', style: 'secondary' })]}>
  Supporting Text
</Text>

// Linear gradient
<Text modifiers={[foregroundStyle({
  type: 'linearGradient',
  colors: ['#FF6B35', '#F7931E', '#FFD23F'],
  startPoint: { x: 0, y: 0 },
  endPoint: { x: 1, y: 0 }
})]}>
  Gradient Text
</Text>

Works with

This modifier works with any view. These components accept it:

Sources

The original Expo docs for this page:

foregroundStyle (Modifiers) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)