This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

TextField

GitHub

Changelog

npm

A SwiftUI TextField component for text input.

iOS

tvOS

A text field component that allows users to enter and edit text.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

import { Host, TextField } from '@expo/ui/swift-ui';

<Host matchContents>
  <TextField autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />
</Host>

See official SwiftUI documentation for more information.

API

Component

`TextField`

iOS

tvOS

Type: React.Element<TextFieldProps>

Renders a TextField component. Should mostly be used for embedding text inputs inside of SwiftUI lists and sections. Is an uncontrolled component.

TextFieldProps

`allowNewlines`

iOS

tvOS

Optional • Type: boolean • Default: true

If true, the text input will add new lines when the user presses the return key.

`autocorrection`

iOS

tvOS

Optional • Type: boolean • Default: true

If true, autocorrection is enabled.

`autoFocus`

iOS

tvOS

Optional • Type: boolean • Default: false

If true, the text input will be focused automatically when the component is mounted.

`defaultValue`

iOS

tvOS

Optional • Type: string

Initial value that the TextField displays when being mounted. As the TextField is an uncontrolled component, change the key prop if you need to change the text value.

`keyboardType`

iOS

tvOS

Optional • Type: TextFieldKeyboardType

`multiline`

iOS

tvOS

Optional • Type: boolean

If true, the text input can be multiple lines. While the content will wrap, there's no keyboard button to insert a new line.

`numberOfLines`

iOS

tvOS

Optional • Type: number • Default: undefined, which means unlimited lines.

The number of lines to display when multiline is set to true. If the number of lines in the view is above this number, the view scrolls.

`onChangeFocus`

iOS

tvOS

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

A callback triggered when user focuses or blurs the TextField.

`onChangeSelection`

iOS 18.0+ tvos 18.0+

Optional • Type:

({ start, end }: {
  end: number, 
  start: number
}) => void

A callback triggered when user selects text in the TextField.

`onChangeText`

iOS

tvOS

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

A callback triggered when user types in text into the TextField.

`onSubmit`

iOS

tvOS

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

A callback triggered when user submits the TextField by pressing the return key.

`placeholder`

iOS

tvOS

Optional • Type: string

A text that is displayed when the field is empty.

`ref`

iOS

tvOS

Optional • Type: Ref<TextFieldRef>

Inherited Props

CommonViewModifierProps

Types

`TextFieldKeyboardType`

iOS

tvOS

Literal Type: string

Determines which keyboard to open. For example, 'numeric'.

Available options:

default
numeric
email-address
phone-pad
decimal-pad
ascii-capable
url
numbers-and-punctuation
name-phone-pad
twitter
web-search
ascii-capable-number-pad

`TextFieldRef`

iOS

tvOS

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

Property	Type	Description
blur	`() => Promise<void>`	-
focus	`() => Promise<void>`	-
setSelection	`(start: number, end: number) => Promise<void>`	Only for: iOS 18.0+ tvos 18.0+ Programmatically select text using start and end indices.
setText	`(newText: string) => Promise<void>`	-