Icons from react native paper not appearing on web

Can’t seem to get any icons to appear on web? No issues when I used react native elements instead. Any ideas?

1 Like

What SDK are you using and can you post some sample code? Also is this in a project running locally on your machine or on snack.expo.io?

In an app of mine I have some React Native Paper buttons with icons on them and the icons do show on the web.

Using the latest SDK and also tried previous ones. Both on Snack. I just tried including the standards Appbar and couldn’t get any of the icons showing on web. On native I see the goBack button but the other two action buttons appear as question marks.

Please post a link to the snack.

https://snack.expo.io/@cgcoss/react-native-paper-test!Screenshot from 2019-12-16 08-03-54|240x500

Looks like a weird snack glitch. I was getting the same issue with your snack.

One thing, though. I think the React Native Paper docs for the Appbar are mistakenly referencing the wrong icon names. By default RNP uses MaterialCommunityIcons and there are no MaterialCommunityIcons called “search” or “more-vert”. So the first thing I did was change those to “magnify” and “menu”. That fixed the question marks on my phone, but did not fix the missing icons in the web preview.

Then, while fiddling with it I added some MaterialCommunityIcons using Expo’s built-in icon functionality and that magically fixed the React Native Paper Appbar icons! Even after I removed the manually added icons the other icons still worked.

So it seems to be a strange bug in snack.

Here’s my working snack:

Thanks so much for taking the time to look into it! Weird glitch, but I’m really grateful/happy you found that workaround!

Actually I tried again to remove the manually added icons and when I reloaded the web preview the Appbar icons broke again, so it’s not enough to add and then remove them.

By the way, as mentioned in my first comment on this thread I have code similar to this that does work locally with expo start --web, so the problem seems to be confined to snack.

That’s actually good to know, snack is usually more reliable than my local setup, but there are obviously exceptions to this rule!

I’m sure this issue will be fixed soon, although with it being close to Christmas it might take longer than usual.

Has a fix been found for this yet?

I’m still having issues with Firefox

It’s still an issue for me in Chrome as well.

Unfortunately I think the Expo team has been too busy with other work to get to the bottom of this issue.

workaround.

import { Ionicons } from '@expo/vector-icons';
import { Provider as PaperProvider } from 'react-native-paper';

<PaperProvider settings={{
    icon: props => <Ionicons {...props} />,
}}>...

Thanks for the step by step tutorial. This works really well for us, thank you!

or use react-native-vector-icons.

from paper doc,

You can pass the name of an icon from MaterialCommunityIcons . This will use the react-native-vector-icons library to display the icon.

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Provider as PaperProvider } from 'react-native-paper';

<PaperProvider settings={{
    icon: props => <Icon {...props} />,
}}>
  <App/>
</PaperProvider>

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.