[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!