This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).
A SwiftUI TextField component for text input.
A text field component that allows users to enter and edit text.
Installation
- npx expo install @expo/uiIf 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
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.
stringInitial 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.
TextFieldKeyboardTypebooleanIf true, the text input can be multiple lines. While the content will wrap, there's no keyboard button to insert a new line.
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.
(focused: boolean) => voidA callback triggered when user focuses or blurs the TextField.
(value: string) => voidA callback triggered when user types in text into the TextField.
Ref<TextFieldRef>Types
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
- web-search
- ascii-capable-number-pad
Acceptable values are: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'ascii-capable' | 'numbers-and-punctuation' | 'url' | 'name-phone-pad' | 'decimal-pad' | 'twitter' | 'web-search' | 'ascii-capable-number-pad'