Add icons of any external icon library to TextInput component

[willymateo]

In my case I used Iconoir for React Native but you can use any external or custom icon library which React Native supports.

import { Mail } from "iconoir-react-native";
import { TextInput } from "react-native-paper";

functino MyComponent() {
  return (
    <TextInput
        label="Email"
        placeholder="Enter your email account"
        left={<TextInput.Icon name={props => <Mail {...props} />} />}
    />
  );
};

export { MyComponent };

Explain

As @RichardLindhout said in the issue How to add custom elements to TextInput left or right #2305: only TextInput.Icon and TextInput.Suffix are supported by left and right properties of TextInput component. So, you must use the name property of InputText.Icon component to render te custom icon. There, you can pass a function which receive an object with color and size properties and returns a svg icon, so you can return your icon of external library and use that properties.

My dependencies

react: 17.0.2
react-native: 0.68.2
react-native-paper: ^4.12.2
iconoir-react-native: ^5.0.0
react-native-vector-icons: ^9.2.0

My opinion

I think that the name property of the InputText.Icon should be changed to icon or iconComponent because this is more intuitive. It took me a week to find this solution.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.68.2, latest: 0.69.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lukewalczak]

Hey @willymateo, I think renaming that property makes sense – I've just checked the codebase and looks like it's the only place with the type IconSource where the name is name instead of icon. I will discuss it internally and then proceed with the PR.