How to display a right icon inside a TextInput?

I’m struggling to display a right icon inside a text-input. From this article announcing version 4.0, it looks like it is possible. But there is no clear instruction in docs on how to achieve it. On the documentation page, for TextInput, there are left and right props which I suppose should display e.g an icon. This is my view (Expo + React-Native):

<TextInput label="__label__" right={() => <FontAwesome5 name="edit" size={24} color="red" />}  />

I also tried this way:

<TextInput label="__label__" right={<FontAwesome5 name="edit" size={24} color="red" />}  />

In both cases nothing is displayed. What is the use of properties left and right and how to display an icon inside a TextInput? Thank you for support.

react-native (expo version): https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz react-native-paper: ^4.0.1 @expo/vector-icons: ^10.0.0

[rizshivalli]

I was also having the same issue

i fixed it using <TextInput.Icon name="Icon-Name" /> You can pass the name of an icon from MaterialCommunityIcons. This will use the react-native-vector-icons library to display the icon.

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

const InputComponent = () => {
 const element = <TextInput.Icon name="lock-outline" />
  return (
    <TextInput
      label="Email"
      mode='outlined'
      style={{ backgroundColor: 'transparent' }}
      right= {element}
      left={element}
    />
  );
};

export default InputComponent;

[pixelass]

this should really be covered somewhere in the docs which IMHO are not useful in many cases.

@rizshivalli do you want to document things like this? are you open to PRs that add better docs for components?