Question 32973 in React native Question posted in
The official React Native documentation can be found here.

icon is not working in react native paper text input

Code

<TextInput
    mode="outlined"
    label="Enter Password"
    outlineColor="#000"
    activeOutlineColor="#0073D9"
    right={<TextInput.Icon name="eye" />}
    style={{
        backgroundColor: '#eee', marginRight: scale(20),
        marginLeft: scale(20),
    }}
    value={Pass}
    onChangeText={(text) => setPass(text)}
/>

Output

enter image description here

How to add an icon in react native paper text input?

Tags:

2

Answers


  1. 0

    add secureTextEntry in TextInput and for more Icons – https://pictogrammers.com/library/mdi/

    <TextInput
      label="Password"
      secureTextEntry
      right={<TextInput.Icon icon="eye" />}
    />
    Login or Signup to reply.
  2. 0

    You need to use icon prop instead of name.

    your example

        <TextInput
    mode="outlined"
    label="Enter Password"
    outlineColor="#000"
    activeOutlineColor="#0073D9"
    right={<TextInput.Icon name="eye" />}
    style={{
        backgroundColor: '#eee', marginRight: scale(20),
        marginLeft: scale(20),
    }}
    value={Pass}
    onChangeText={(text) => setPass(text)}/>

    the right way:

        <TextInput
    mode="outlined"
    label="Enter Password"
    outlineColor="#000"
    activeOutlineColor="#0073D9"
    right={<TextInput.Icon icon="eye" />}
    style={{
        backgroundColor: '#eee', marginRight: scale(20),
        marginLeft: scale(20),
    }}
    value={Pass}
    onChangeText={(text) => setPass(text)}/>

    and if you want to know what value you could use, here is the source:

    https://callstack.github.io/react-native-paper/docs/guides/icons/

    I hope this help 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search