Back to React Native Paper

HelperText

docs/public/3.0/helper-text.html

5.15.11.4 KB
Original Source

HelperText

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

Usage

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

const MyComponent = () => {
  const [text, setText] = React.useState('');

   const onChangeText = text => setText(text);

  const hasErrors = () => {
    return !text.includes('@');
  };

 return (
    <View>
      <TextInput label="Email" value={text} onChangeText={onChangeText} />
      <HelperText type="error" visible={hasErrors()}>
        Email address is invalid!
      </HelperText>
    </View>
  );
};

export default MyComponent;

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

Edit this page