question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

require('react-native-svg') takes a long time on low end Android

See original GitHub issue

I’m trying to optimize the launch time of my app and I found react-native-svg to be a bottleneck.

On a low end Nokia 2 running Android 7.1.1 in production mode I recorded the following lengths of time. 1449ms, 1292ms, 1285ms, 1215ms, 1178ms, 1167ms.

In my iphoneXR Simulator on a 2018 macbookpro I get 94ms, 89ms, 71ms, 67ms.

My monitoring code is:

const starttime = Date.now();
const reactNativeSvg = require('react-native-svg');
alert(Date.now() - starttime);

“react-native-svg”: “^6.3.1”, “react-native”: “0.57.3”,

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
msandcommented, Jan 15, 2019

v9.0.0 has been released with these changes and various spec conformance fixes included.

2reactions
mrousavycommented, Oct 2, 2020

@msand Hey! With Fabric + TurboModules + JSI coming up “sometime later this year” (hopefully), do you have a full rewrite for a rust implementation planned? I’ve noticed really slow performance when rendering complex SVGs such as react-native-bigheads, even on an iPhone 11 Pro. I don’t want to find out how slow it’s gonna be on a low end Android device.

Read more comments on GitHub >

github_iconTop Results From Across the Web

require('react-native-svg') takes a long time on low end Android
I'm trying to optimize the launch time of my app and I found react-native-svg to be a bottleneck. On a low end Nokia...
Read more >
How to show SVG file on React Native? - Stack Overflow
Since react native does not support the svg file format directly you need to follow some steps to get it working. 1. Install...
Read more >
react-native-svg - npm
react -native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
Read more >
Performance Overview - React Native
Any animations controlled by JavaScript would appear to freeze during that time. If anything takes longer than 100ms, the user will feel it....
Read more >
Slow rendering - Android Developers
... UI thread work is taking for a long time, then you'll need to use Android ... Note: When recording a systrace, each...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found