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.

<TextInput style={commonstyles.primaryInput}
mode='outlined'
label="Label Name"
placeholder="Enter placeholder"
left={<TextInput.Icon name="info" color={"#ff0000"} onPress={() => {}} />}
/>

[github-actions]

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

[amwebexpert]

Also unusual that a name attribute is expecting a function 🤔 ...

[ahmetgsu]

react-native-paper v.4.9.2 does not support FontAwesome5 with TextInpnut.Icon

[rupalpatel0008]

Here is my take on this:
<TextInput placeholder="Text goes here" theme={{ colors: { text: Colors.primaryText } }} activeOutlineColor={Colors.primaryCTA} autoCorrect={false} style={styles.input} right={ <TextInput.Icon name={() => ( <TouchableOpacity style={styles.searchButton} onPress={onSearch}> <ExploreIcon focused focusedColor={Colors.inputBackground} /> </TouchableOpacity> )} /> } />

[Gabriel-Jesusvix]

@hbiede passe o nome como uma função

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

this it works for me. Documentation sometimes does't contribuites much.

[yathu]

react-native-paper: v5.2.0 - Using Icon prop we can use custom SVG icon

          <TextInput
            placeholder="Reply"
            right={<TextInput.Icon icon={() => <SendIcon/>} />}   
          />

TextInputIconProps :

export type Props = $Omit<
  React.ComponentProps<typeof IconButton>,
  'icon' | 'theme' | 'color'
>