slow rendering of icons

[Niryo]

I am using React Native Elements to display a checkbox, but for some reason the checkbox rendered really slow. I tried to track down the problem and I it looks like a problem in the vector icon.

I created a small app that demonstrates the problem: https://github.com/Niryo/TestReactNativeElementsCheckbox you can clone it and after npm install just run expo start and run it on an android simulator. you can see that any time you refresh the simulator, the checkboxes flicker.

Here is a gif that demonstrates the problem: (you can see that it is being rendered slowly only on the first render, when coming from dead state)

[brentvatne]

hello! sorry for the slow reply, we don't monitor this repo as often as expo/expo. this is a common thing to see in expo client because the icon font is loaded on demand over http the first time it's used. this isn't an issue when you do a standalone app build because it's bundled in the binary.

to get rid of this delay in expo client you can preload the font: https://github.com/expo/expo/blob/c8a6b90f678483ac8b6f6ca2041059a616c3e232/templates/expo-template-tabs/App.js#L29-L33

see more about assets in this guide: https://docs.expo.io/guides/preloading-and-caching-assets/

[papb]

Hi @brentvatne I am facing this issue with the standalone app build as well...

[kaushik-prasanna]

@brentvatne , same case here. Cannot find any documentation that says how we can make sure the icons are bundled in the build.

[brentvatne]

you can run expo build:ios or expo build:android and extract the archive and look inside to see which assets are included, or look at the bundledAssets key in your manifest (link to it is logged when you run expo publish - "📝 Manifest: https://exp.host/@example/exampleslug Learn more."). it's a bit hard to match up to the asset name because those are the hashes, but you can go to, eg: https://d1wp6m56sqw74a.cloudfront.net/~assets/276ee4e65ded9a91cfe0be813e95e42d to see what the asset is

[alimertcakar]

you can run expo build:ios or expo build:android and extract the archive and look inside to see which assets are included, or look at the bundledAssets key in your manifest (link to it is logged when you run expo publish - "📝 Manifest: https://exp.host/@example/exampleslug Learn more."). it's a bit hard to match up to the asset name because those are the hashes, but you can go to, eg: https://d1wp6m56sqw74a.cloudfront.net/~assets/276ee4e65ded9a91cfe0be813e95e42d to see what the asset is

React-native-vector-icons are not bundled in my app. How do i make sure they are bundled (and not all of them)?