HelperText

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

Usage

import * as React from 'react';
import { View } from 'react-native';
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
Type: 'error' | 'info'
Default value: 'info'

Type of the helper text.

visible
Type: boolean
Default value: true

Whether to display the helper text.

padding
Type: 'none' | 'normal'
Default value: 'normal'

Whether to apply padding to the helper text.

children (required)
Type: React.ReactNode

Text content of the HelperText.

style
Type: StyleProp<TextStyle>
theme
Type: Theme
testID
Type: string

TestID used for testing purposes