are there any cheap alternatives to react-native-svg? i don’t like that its draw shows up in every frame in a significant way. always thought “svg in react native” is too good to be true, and apparently it is - ThreadSky

danabra.mov • 96 days ago

are there any cheap alternatives to react-native-svg? i don’t like that its draw shows up in every frame in a significant way. always thought “svg in react native” is too good to be true, and apparently it is

Reposted from Andrei Shikov

This is the long draw - I can see some images / text
But all of the gray stuff on the picture is interesting - that's SVG drawing

Comments

axelinternet.bsky.social•96 days ago

What is the main draw of using svgs in RN? I've not used them for a while to avoid the hassle and can't say I've missed them but maybe that's just my use cases?

danabra.mov•96 days ago

oh just cross-platform icons. svg is very convenient for web

axelinternet.bsky.social•96 days ago

That makes sense! I never leave the safe chaos of mobile

shirakaba.bsky.social•96 days ago

Meanwhile Apple’s standard for vector icons in native apps is tiny PDFs.

(I’m not kidding – this was the requirement for icons when I was preparing a legacy Safari App Extension)

siddharthagolu.com•96 days ago

Wait, is https://bsky.app powered by expo web? That's sick!

danabra.mov•96 days ago

yup

brandondail.com•94 days ago

I don’t think it’s worth it tbh, I’d highly recommend just setting up an image pipeline where it generates .png files for mobile from the source vector files.

we’ve got something like that which pulls straight from Figma and it’s made managing icons a lot easier

alanbsmith.bsky.social•94 days ago

Agreed. We’ve been wrestling SVGs in Android for the last few months, and I’ve come to this conclusion. PNG is a more reliable format (for us).

seanmclements.com•96 days ago

Same draw as web. Maintain clarity and quality when being stretched or squished to smaller or larger sizes. Can be visually large without storing or sending more data. Don’t need new or separate duplicated assets between web and RN.

atlj.dev•96 days ago

If this is for drawing icons, I've been exploring using font files to render icons. This method was more efficient than drawing svgs but not as flexible.
https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#custom-fonts

donmackinnon.dev•95 days ago

Yeah if you are loading svg icons, this is the go to package.

deck.blue•96 days ago

i was about to suggest this, flutter uses icon font files by default and it's really cool

aiight.bet•96 days ago

what are you doing with it? if you’re using it for drawing check out react native skia

danabra.mov•96 days ago

just icons lol. need something lighter

stoobs.dev•96 days ago

Guess fonts it is!

coolsoftware.dev•96 days ago

We just switched over to a font face for icons on a project I’m on and it made a huge difference. You can still get at sizing and color, although there’s a little less control if you need to color stroke and fill.

coolsoftware.dev•96 days ago

Some accessibility concerns though, especially for web. But if you can get screen readers to ignore them with a wrapper, that helps.

shikasd.bsky.social•96 days ago

Android uses vector drawables natively, so maybe there's a wrapper?

shikasd.bsky.social•96 days ago

Quick search gives me this: https://github.com/klarna-incubator/react-native-vector-drawable

metalhaze.bsky.social•96 days ago

Wait, this is cross platform or android only?

shikasd.bsky.social•96 days ago

Don't think so, vector drawables are an Android concept

metalhaze.bsky.social•96 days ago

Sorry designer working on RN and conveying info to my team….So these same SVG performance issues potentially don’t exist on iPhone? So this is to solve an Android-only problem? Is it being suggested to have two different ways of managing SVG’s for your cross-platform app based on platform?

danabra.mov•96 days ago

this looks like it generates for both platforms

danabra.mov•96 days ago

sick, thank u

oblador.bsky.social•96 days ago

Use with this lib (I wrote both) https://github.com/oblador/react-native-vector-image (note: not same lib as vector icons that i also wrote)

danabra.mov•96 days ago

ohhhhh nice

oblador.bsky.social•96 days ago

Lmk if you have any feature requests/feedback 😄 Most annoying thing is you have to generate the native assets. Would be cool to have a metro plugin instead of a separate step.

peterp.bsky.social•95 days ago

Expo image?

m1kc.bsky.social•96 days ago

By the way, the app is great! Can't even tell it's not native.

alexmachin.bsky.social•96 days ago

Oh no, I thought react-native-svg was to tier quality. I haven't found any decent alternatives 🫠

danabra.mov•96 days ago

i assume it’s good for actually displaying graphics (not a lot) but in my case we’re just rendering some icons many times in list rows, and it does not seem optimized for that

mager1794.bsky.social•96 days ago

Maybe Skias ImageSVG could work here? They’re not great for complex SVGs but I’ve had great luck with simple ones like this.

shearer.co•96 days ago

👀

kzzzf.bsky.social•96 days ago

Using expo image is going to be much better with static svg files. React Native SVG package only makes sense when you want to dynamically control the svg elements from react which in my experience is a relatively rare use case

shirakaba.bsky.social•96 days ago

React Native SVG is the only one with React Native Windows support, though 🥲

danabra.mov•96 days ago

wait, expo image supports SVG??

tsapeta.dev•96 days ago

Yes, it does. However you may see some differences and some elements/attributes may just not work. Sadly, both iOS and Android render SVGs differently. It's not as good as in webview.

hirbod.dev•95 days ago

It does. And it’s crazy performant. We use it 99,99% of the time. And we avoid JSX SVGs whenever possible.

danabra.mov•95 days ago

for local resources, does it guarantee being shown immediately? i.e. no empty state

hirbod.dev•95 days ago

As long as the ressource is bundled, it’s rendered immediately (iOS/Android). On web, it’s downloaded and treated as a regular image.

saadnajmi.bsky.social•95 days ago

Do you have any idea what's different about it's implementation that makes rendering SVGs faster?

hirbod.dev•95 days ago

@tsapeta.dev knows best, but I believe it’s rasterizing and treating it like a bitmap. Unlike react-native-svg, that’s treating it like a vector and redraw all the time.

tsapeta.dev•95 days ago

No no, expo-image on Android also renders them as a vector, on iOS it is rasterized only if you use `tintColor` prop. Rasterization would make it slower.

nanniii.bsky.social•96 days ago

i need a subscribe to a thread so i can follow all the answers to your thread, learning so much on perf ahah

seanmclements.com•96 days ago

I find myself wondering how performant the new DOM components would be. 🤷😅

roessner.tech•96 days ago

500 IQ

dbkable.bsky.social•96 days ago

Using webp instead of SVG was the solution for us, but those were complex SVGs... But even for lightweight ones I believe rendering small SVGs n times is a use case for switching to webp, I learned this from a colleague while debugging rendering performance.

p.sho.mov•95 days ago

We convert our Figma icons to SVG and from there to fonts. Then we use expo-fonts to load them. Have not checked performance but should be good.
It took me a while to perfect the icon conversion process, though, but it was worth it.

danabra.mov•95 days ago

what do you use to convert to fonts?

p.sho.mov•95 days ago

And this was really helpful - https://levimcg.com/blog/more-control-over-figma-svg-exports/

p.sho.mov•95 days ago

https://github.com/jaywcjlove/svgtofont

codevictor.bsky.social•78 days ago

Awesome solution!
Can you share your setup? It would really help me

p.sho.mov•78 days ago

Sure, here is the script we use to convert SVG to fonts and the typescript enums to go with those - https://gist.github.com/pshomov/95286b6a9f828df7ed6e7b515039193c

codevictor.bsky.social•78 days ago

Thanks a lot man! I really appreciate it

plrdev.bsky.social•94 days ago

We are using expo-image and it has been able to display the icon svgs we have.

Comments

Posting Rules

Reply