docs/public/4.0/helper-text.html
Helper text is used in conjuction with input elements to provide additional hints for the user.
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;
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: ReactNativePaper.Theme
testID
Type: string
TestID used for testing purposes