Skip to main content

TextInput.Affix

A component to render a leading / trailing text in the TextInput

Usage​

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

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

  return (
    <TextInput
      mode="outlined"
      label="Outlined input"
      placeholder="Type something"
      right={<TextInput.Affix text="/100" />}
    />
  );
};

export default MyComponent;

Props​

text (required)​

Type: string

Text to show.

onLayout​

Type: (event: LayoutChangeEvent) => void

onPress​

Type: (e: GestureResponderEvent) => void

Function to execute on press.

accessibilityLabel​

Type: string

Default value: text

Accessibility label for the affix. This is read by the screen reader when the user taps the affix.

textStyle​

Type: StyleProp<TextStyle>

Style that is passed to the Text element.

theme​

Type: ThemeProp