TextInput

TextInputs allow users to input text.

Unfocused
Focused

Usage

import * as React from 'react';
import { TextInput } from 'react-native-paper';

class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
      />
    );
  }
}

Props

disabled
Type: boolean
Default value: false

If true, user won't be able to interact with the component.

label
Type: string

The text to use for the floating label.

placeholder
Type: string

Placeholder for the input.

error
Type: boolean
Default value: false

Whether to style the TextInput with error style.

onChangeText
Type: Function

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

underlineColor
Type: string

Underline color of the input.

selectionColor
Type: string

Color for the text selection background. Defaults to the theme's primary color.

multiline
Type: boolean
Default value: false

Whether the input can have multiple lines.

numberOfLines
Type: number

The number of lines to show in the input (Android only).

onFocus
Type: () => mixed

Callback that is called when the text input is focused.

onBlur
Type: () => mixed

Callback that is called when the text input is blurred.

value
Type: string

Value of the text input.

style
Type: any
theme
Type: Theme
...TextInput props

Methods

isFocused

Returns true if the input is currently focused, false otherwise.

clear

Removes all text from the TextInput.

focus

Focuses the input.

blur

Removes focus from the input.