Repository navigation
[Pay meow] Display all SVG images on UI thread using native libraries #29067
Description
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.
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
muttmuure commentedon Nov 23, 2023
#30905
WojtekBoman commentedon Nov 27, 2023
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 commentedon Dec 4, 2023
@WojtekBoman Eep! 4 days overdue now. Issues have feelings too...
melvin-bot commentedon Dec 6, 2023
@WojtekBoman 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
melvin-bot commentedon Dec 8, 2023
@WojtekBoman Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!
puneetlath commentedon Dec 11, 2023
@muttmuure FYI I'm assigning @akinwale to this issue since he got assigned as C+ on the PR
11 remaining items
[-]Display all SVG images on UI thread using native libraries[/-][+][Pay meow] Display all SVG images on UI thread using native libraries[/+]mallenexpensify commentedon Jan 5, 2024
@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 commentedon Jan 5, 2024
@akinwale does this link work for you?
https://www.upwork.com/nx/wm/workroom/35923673/overview
akinwale commentedon Jan 5, 2024
Yes, I am able to access it without issues.
akinwale commentedon Jan 5, 2024
@mallenexpensify I have also accepted the offer.
mallenexpensify commentedon Jan 5, 2024
Contributor+: @akinwale paid $500 via Upwork.
I think that's the only payment do, so I'm closing.
Thx!