HelperText

Helper text is used in conjuction with input elements to provide additional hints for the user.

Usage

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

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

  render(){
    return (
      <View>
        <TextInput
          label="Email"
          value={this.state.text}
          onChangeText={text => this.setState({ text })}
        />
        <HelperText
          type="error"
          visible={!this.state.text.includes('@')}
        >
          Email address is invalid!
        </HelperText>
      </View>
    );
  }
}

Props

type (required)
Type: 'error' | 'info'
Default value: 'info'

Type of the helper text.

visible
Type: boolean
Default value: true

Whether to display the helper text.

children (required)
Type: React.Node

Text content of the HelperText.

style
Type: any
theme
Type: Theme