React-native-paper: How to use custom icons in TextInput.Icon component

[sureshavv]

Is it possible to use custom icons in TextInput.Icon component and which icon library supports for this component.

mode='outlined'
label="Label Name"
placeholder="Enter placeholder"
left={}
/>

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[italomlp]

You can pass your own component in the name prop, like saw in #2255.

<TextInput style={commonstyles.primaryInput}
  mode='outlined'
  label="Label Name"
  placeholder="Enter placeholder"
  left={
    <TextInput.Icon
      name={<Icon name="info" color="#ff0000" />} // where <Icon /> is any component from vector-icons or anything else
      onPress={() => {}}
    />
  }
/>

It seem like that it's not too clear in the documentation, but we always can open a PR to contribute.

[hbiede]

This isn't an option currently since a release hasn't been cut yet

[italomlp]

@hbiede For me, it already works, even the TS giving me an error message for name prop. I'm using version 4.2.0

Edit: Seems like 4.3.0 just launched minutes ago \o/.

[ikaccc]

@hbiede pass the name as a function

<TextInput
   right={<TextInput.Icon name={() => <Icon name={'camera'} size={20} />} />}
   style={styles.input}
   label={'Label'}
/>

[hbiede]

@ikaccc yep, it’s working now. It hadn’t been at the time as the change hadn’t been published. Thanks, though.

[tylerthedeveloper]

this didnt work for me and IMO very confusing design, this doesnt follow any standards or share any similarities to other components in the library

[hbiede]

The fact that it requires a callback instead of a component is quite weird