SecureField

Expo UI SecureField matches the official SwiftUI SecureField API and provides a text field that masks user input for passwords and other sensitive text.

Usage

Basic secure field

import { useState } from 'react';
import { Host, SecureField } from '@expo/ui/swift-ui';

export default function BasicSecureFieldExample() {
  const [password, setPassword] = useState('');

  // A secure field stretches to the width it is given, so give the host a size.
  return (
    <Host style={{ flex: 1 }}>
      <SecureField
        placeholder="Password"
        onTextChange={setPassword}
      />
    </Host>
  );
}

An empty secure field showing the placeholder Password

Submit handling

Use the submitLabel and onSubmit modifiers to handle form submission from the keyboard.

import { useState } from 'react';
import { Host, SecureField } from '@expo/ui/swift-ui';
import { submitLabel, onSubmit } from '@expo/ui/swift-ui/modifiers';

export default function SecureFieldSubmitExample() {
  const [password, setPassword] = useState('');

  return (
    <Host style={{ flex: 1 }}>
      <SecureField
        placeholder="Password"
        onTextChange={setPassword}
        modifiers={[
          submitLabel('done'),
          onSubmit(() => console.log('Login submitted')),
        ]}
      />
    </Host>
  );
}

A focused secure field above the keyboard, whose submit key shows the done checkmark

Imperative ref

Use a ref to imperatively set text, focus, or blur the secure field.

import { useRef } from 'react';
import {
  Host,
  SecureField,
  SecureFieldRef,
  Button,
  HStack,
  VStack,
} from '@expo/ui/swift-ui';
import { buttonStyle } from '@expo/ui/swift-ui/modifiers';

export default function ImperativeSecureFieldExample() {
  const ref = useRef<SecureFieldRef>(null);

  return (
    <Host style={{ flex: 1 }}>
      <VStack>
        <SecureField ref={ref} placeholder="Password" />
        <HStack spacing={12}>
          <Button
            modifiers={[buttonStyle('bordered')]}
            onPress={() => ref.current?.focus()}
            label="Focus"
          />
          <Button
            modifiers={[buttonStyle('bordered')]}
            onPress={() => ref.current?.blur()}
            label="Blur"
          />
          <Button
            modifiers={[buttonStyle('bordered')]}
            onPress={() => ref.current?.setText('secret123')}
            label="Set text"
          />
        </HStack>
      </VStack>
    </Host>
  );
}

A secure field above a row of Focus, Blur, and Set text buttons

API

import { SecureField } from '@expo/ui/swift-ui';

Component

`SecureField`

Type: React.Element<SecureFieldProps>

Renders a SwiftUI SecureField for password input.

SecureFieldProps

`autoFocus`

Optional • Type: boolean • Default: false

If true, the secure field will be focused automatically when mounted.

`children`

Optional • Type: ReactNode

Slot children - supports <SecureField.Placeholder> with a <Text> child

`maxLength`

Optional • Type: number

Maximum number of characters allowed. Truncates natively as the user types.

`onFocusChange`

Optional • Type: (focused: boolean) => void

A callback triggered when the field gains or loses focus.

`onTextChange`

Optional • Type: (text: string) => void

A callback triggered when the text value changes.

If the callback is marked with the 'worklet' directive, it runs synchronously on the UI thread; otherwise it is delivered asynchronously as a regular JS event.

`placeholder`

Optional • Type: string

A text that is displayed when the field is empty.

`ref`

Optional • Type: Ref<SecureFieldRef>

`text`

Optional • Type: ObservableState<string>

An observable state that holds the current text. Create one with useNativeState('') or useNativeState('initial value'). If omitted, the field manages its own internal state.

Inherited props

CommonViewModifierProps

Types

`SecureFieldRef`

Can be used for imperatively setting text and focus on the SecureField component.

Property	Type	Description
blur	() => Promise<void>	-
clear	() => Promise<void>	Clear the current text.
focus	() => Promise<void>	-
setText	(newText: string) => Promise<void>	-

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Expo UI lets you put any of the 89 modifiers for any view on SecureField, but not all of them do something here.

70 change what you see on SecureField.
6 have no visible effect on SecureField.
13 work only in one place, such as a widget or a Grid.

Modifier	Why nothing happens
`accessibilityElement`	It joins the child views into one accessibility element, and SecureField takes no child views.
`containerShape`	It sets the shape that the child views use for `containerRelativeShape`, and SecureField takes no child views.
`geometryGroup` iOS 17+	It works on the child views that you give the component, and SecureField takes none.
`imageScale`	It changes only SF Symbols, and SecureField shows none.
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and SecureField does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

Sources

The original Expo docs for this page:

SecureField (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/securefield.md)