CODEWITHSUNDEEP
react-nativereact-native-paper
Sam
Sam

Reputation: 30344

Icons not showing in React Native + React Native Paper app

This is a fresh React Native app using React Native Paper. I followed the instructions at https://callstack.github.io/react-native-paper/getting-started.html and installed react-native-paper and react-native-vector-icons.

For some reason, none of the icons are showing in the app -- see below: enter image description here

For example, I have a Searchbar at the top of this screen with the following code. As far as I can see, I don't even have to specify an icon there. It should automatically display a magnifying glass but no icon is showing.

<Searchbar placeholder="New to do item..." />

Any idea why and how to fix it?

Upvotes: 10

Views: 16670

Answers (4)

Mathesh Yogeswaran
Mathesh Yogeswaran

Reputation: 51

import { Icon } from 'react-native-paper';

return(
<>
 <Icon source="car" size={30} />
 </>
)

Here this is the sample code and for this install the

npm i react-native-paper

and also in android/app/build.gradle add

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

This works for me

Upvotes: 5

Sufiyan Khan
Sufiyan Khan

Reputation: 35

After referring the answer from Daviskitavi, what I just needed to do was to add this line as last line in android/app/build.gradle and rebuild the project. That's it.

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

Upvotes: 0

Daviskitavi
Daviskitavi

Reputation: 41

Just follow the installation steps as described here: https://github.com/oblador/react-native-vector-icons#android

React-native-paper uses MaterialCommunityIcons so remember to add it in the iconFontNames list in the steps above.

Upvotes: 3

mayur
mayur

Reputation: 321

Stop your application. Then go to project directory > open cmd > run npx react-native link react-native-vector-icons

cmd will show you linking is successful

Now run your app again

Upvotes: 32

Related Questions