Reference version

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

A Jetpack Compose TextInput component for text input.

Android

A text input component that allows users to enter and edit text using native Android text fields.

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 { TextInput } from '@expo/ui/jetpack-compose'; <TextInput autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />

See Official Jetpack Compose documentation for more information.

API

Component

TextInput

Android

Type: React.Element<TextInputProps>

Renders a TextInput component.

TextInputProps

autoCapitalize

Android
Optional • Literal type: string • Default: none

Options to request software keyboard to capitalize the text. Applies to languages which has upper-case and lower-case letters.

Available options:

  • characters: Capitalize all characters.
  • none: Do not auto-capitalize text.
  • sentences: Capitalize the first character of each sentence.
  • unspecified: Capitalization behavior is not specified.
  • words: Capitalize the first character of every word.

Acceptable values are: 'characters' | 'none' | 'sentences' | 'unspecified' | 'words'

autocorrection

Android
Optional • Type: boolean • Default: true

If true, autocorrection is enabled.

defaultValue

Android
Optional • Type: string

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

keyboardType

Android
Optional • Literal type: string • Default: default

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

Available options:

  • default
  • numeric
  • email-address
  • phone-pad
  • decimal-pad
  • ascii-capable
  • url
  • password
  • password-numeric

Acceptable values are: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'ascii-capable' | 'url' | 'decimal-pad'

modifiers

Android
Optional • Type: ExpoModifier[]

Modifiers for the component

multiline

Android
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

Android
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.

onChangeText

Android
Type: (value: string) => void

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

ref

Android
Optional • Type: Ref<TextInputRef>

Can be used for imperatively setting text on the TextInput component.

style

Android
Optional • Type: StyleProp<ViewStyle>

Additional styles to apply to the TextInput.

Types

TextInputRef

Android
PropertyTypeDescription
setText(newText: string) => Promise<void>
-