Back to React Native Paper

TextInput.Affix

docs/public/4.0/text-input-affix.html

5.15.1964 B
Original Source

TextInput.Affix

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

Usage

js
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

textStyle Type: StyleProp<TextStyle>

Style that is passed to the Text element.

theme Type: ReactNativePaper.Theme

Edit this page