How to use TextInput.Icon(?)

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?

[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” />}

[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