[Pay meow] Display all SVG images on UI thread using native libraries

[muttmuure]

Problem

We’re rendering SVGs using react-native-svg library which is not intended for displaying static images from web or assets. It affects our performance hugely, as rendering big SVGs might take a long time - for BackkgroundImage on Android debug build I’ve seen times like 380ms on pretty powerful Pixel 7

Solution

We should display all SVG images on UI thread using native libraries.

Currently, we have react-native-fast-image in place for displaying PNGs. Unfortunately it does not support SVGs.

We could either migrate to another image library (like expo-image) or add SVG support for react-native-fast-image

For the sake of benchmarking, adding basic support for SVGs in react-native-fast-image on android and comparing its performance to react-native-svg shows HUGE results!

For smaller SVGs, namely for Icons on Settings page (which are mostly one path) it also reduces render time hugely, but since base time is small (2-4 ms) it’s not that huge of a deal.

[muttmuure]

#30905

[WojtekBoman]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Long render times of components created from svg assets by react-native-svg-transformer

What is the root cause of that problem?

Currently, all svg assets in the application are transformed by React-Native-SVG-Transformer into components. This process is very demanding and has an impact on the size of the component tree. Each nested element of the svg resource is transformed into a component. For complex assets such as the BackgroundImage on the SignIn Page, the size of the component tree is tremendous. It has a significant influence on the app performance, because the more components we need to render, the more time it will take.

What changes do you think we should make in order to solve the problem?

Let’s use expo-image! It will allow us to remove the react-native-svg-transformer, display .svgs without any transformations, and improve performance of the app. I’ve prepared benchmarks at three levels of complexity and in all cases I achieved better render times with expo-image than with react-native-svg-transformer.
Benchmarks:
https://docs.google.com/document/d/1qhuQn6j_zNtF3frpnJUvFBNvhgnGgU1FBs8eMFWmWvc/edit

What alternative solutions did you explore?

None

[melvin-bot]

@WojtekBoman Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@WojtekBoman 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@WojtekBoman Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[puneetlath]

@muttmuure FYI I'm assigning @akinwale to this issue since he got assigned as C+ on the PR

[melvin-bot]

@akinwale, @WojtekBoman Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@akinwale, @WojtekBoman 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@akinwale, @WojtekBoman 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@akinwale, @WojtekBoman 12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

This issue has not been updated in over 14 days. @akinwale, @WojtekBoman eroding to Weekly issue.

[mallenexpensify]

@muttmuure sorry for confusion, was going to have you do BZ on this but I'm going to do cuz I'm doing some testing.
@akinwale I just sent you an offer but.. I can't access a link to share, please share one if you find one, and let me know when you've accepted the offer. Thx

[mallenexpensify]

@akinwale does this link work for you?
https://www.upwork.com/nx/wm/workroom/35923673/overview

[akinwale]

@akinwale does this link work for you? https://www.upwork.com/nx/wm/workroom/35923673/overview

Yes, I am able to access it without issues.

[akinwale]

@akinwale I just sent you an offer but.. I can't access a link to share, please share one if you find one, and let me know when you've accepted the offer. Thx

@mallenexpensify I have also accepted the offer.

[mallenexpensify]

Contributor+: @akinwale paid $500 via Upwork.

I think that's the only payment do, so I'm closing.
Thx!