How to use TextInput.Icon(?)

[jordyandreas]

Hello guys, I'm new using this for developing my apps.

I'm using TextInput for phone number and wanna include some icon.
but when I try to implementation like in the docs,
the Icon showing missing icon like 'X'.

"react-native": "0.60.5",
"react-native-paper": "^4.1.0",
"react-native-vector-icons": "^7.1.0",

here my app.js

import React, { Component } from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import Navigation from './src/navigasi/navigation';

// export const store = configureStore()

export default class App extends Component {
  render() {
    return (
      <PaperProvider>
        <Navigation />
      </PaperProvider>
    )
  }
}

here's my navigation.js

const HomeNav = () => (
    <Stack.Navigator
        headerMode='none'
        initialRouteName="SplashScreen"
    >
        <Stack.Screen options={ModalAnimate} name='SplashScreen' component={SplashScreen} />
        <Stack.Screen options={SlideAnimate} name='Login' component={Login} />
        <Stack.Screen options={SlideAnimate} name='HomeDashboard' component={HomeDashboard} />
    </Stack.Navigator>
)

here my implementation the textinput in login.js.

function TextInput_() {
    const [text, setText] = React.useState('');
    return (
        <TextInput
            label="No. Handphone"
            value={text}
            onChangeText={text => setText(text)}
            left={
                <TextInput.Icon
                    name="heart"
                />
            }
        />

    )
}

here's the image:

so, I wanna ask how to using this TextInput.Icon or what I've missing?

[github-actions]

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

• react-native

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

[github-actions]

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

• react-native (found: 0.60.5, latest: 0.63.2)

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

[ignaciolopez12]

Same problem

[raajnadar]

Make sure the icons are loading properly this is not react native paper issue. https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android

[LuizCristino]

I'm having the same problem, if I use vector-icons directly it works, using TextInput.Icon does not

[raajnadar]

Check the docs https://callstack.github.io/react-native-paper/text-input-icon.html

[developer-Shivi]

If it's your local image just add

left={<TextInput.Icon name={require('../../assets/newIcons/expert.png')} />}

for vector icon:
right={<TextInput.Icon name="eye" />}

[capella55]

"name" was changed to "icon" from 5.x.

[lonewolf73]

If it's your local image just add

left={<TextInput.Icon name={require('../../assets/newIcons/expert.png')} />}

for vector icon: right={<TextInput.Icon name="eye" />}

Hello @developer-Shivi .... I was trying to use : icon= {isPasswordSecure ? ("eye").toString() : ("eye-slash").toString()} to change icon to slashed icon to back to secured mode but seems this "eye-slash" is not found but I have in my package.json those : "@react-native-vector-icons/common": "^11.0.0", "@react-native-vector-icons/fontawesome5": "^5.15.4", "@react-native-vector-icons/ant-design": "4.4.2" so it should be found that eye-slash...... or maybe does it have a different name? ..... Thanks to all !! Cheers!