Native View Primitives

Import kit primitives from their family subpaths in a nativeViews replacement file. Peach supplies these modules at runtime; your app does not bundle the rendering engine.

#Progressive blur

ProgressiveBlurView reproduces a UIKit UIVisualEffectView with a gradient mask on CAFilter("variableBlur"). The radius changes along the mask. Children render above the blurred backdrop.

// compat/header-blur.tsx
import { ProgressiveBlurView } from 'peach-kit/materials'
import type { ProgressiveBlurViewProps } from 'peach-kit/materials'

export default function HeaderBlur(props: ProgressiveBlurViewProps) {
  return <ProgressiveBlurView {...props} />
}

Point the app’s native view at that file:

// peach.config.ts
import { defineConfig } from 'peachsim/config'

export default defineConfig({
  nativeViews: {
    AppHeaderBlur: { file: './compat/header-blur.tsx' },
  },
})

The app’s existing requireNativeComponent('AppHeaderBlur') receives its own props through the replacement. Translate those props to the kit signature when your native view uses different names.

BlurStyle includes the five system material styles and their explicit Light and Dark variants, plus extraLight, light, dark, regular and prominent. The variable filter replaces the material overlays, so it adds no material tint. The mask follows the cubic gradient shipped in @sbaiahmed1/react-native-blur 6.0.1. The center direction uses two fixed 20% fade bands and an opaque center plateau.

The implementation is checked against native iOS 27 captures on iPhone 17 Pro. The materials family loads as a separate chunk when a bundle or configured replacement needs it.

#Numeric text

Use NumericText when the native view displays a number with SwiftUI’s numeric content transition. It accepts ordinary React Native text props and a text ref.

// compat/balance-label.tsx
import { NumericText } from 'peach-kit/text'
import type { NumericTextProps } from 'peach-kit/text'

export default function BalanceLabel(props: NumericTextProps) {
  return <NumericText {...props} />
}

Register the file in nativeViews with your native component’s name, as in the blur example above. Pass a numeric value, an Intl.NumberFormatOptions format, and an animation transaction such as { kind: 'default' }. A string child preserves text your native adapter has already formatted.

countsDown selects SwiftUI’s explicit direction overload. Omitting it selects the value overload. Omitting animation uses the ambient Swift transaction. The text family loads separately when a guest or replacement file imports it. Native fidelity measurements and remaining limits are recorded in the kit’s acceptance plan.

See Custom Stubs for replacement-file imports and Configuration for the nativeViews slot.