You Might Not Need React Native SVG
Article Summary
Wojciech Lewicki from Software Mansion just dropped a truth bomb: the SVG library his team maintains for three years might not be the best choice for your React Native app. Here's when to ditch it.
Software Mansion took over react-native-svg three years ago and has been fixing issues and adding features ever since. But after watching how developers actually use it, they're seeing anti-patterns everywhere. This article breaks down when you should (and shouldn't) use their own library.
Key Takeaways
- react-native-svg creates entire React component trees for static images (massive overhead)
- Expo Image delegates to native libraries, keeping just one component in your tree
- Each SVG element triggers native redraw with zero caching (performance killer)
- Use react-native-svg only when you need dynamic control over SVG parts with state
- Lottie, Rive, or even WebView often outperform SVGs for animations
For static SVGs, Expo Image beats react-native-svg by avoiding unnecessary React reconciliation and leveraging native rendering libraries.
About This Article
react-native-svg creates entire React component trees even for static SVG files. Each element goes through reconciliation algorithms and native view hierarchies without actually drawing anything. This causes memory leaks, especially on iOS where deeply nested prop dependencies make the problem worse.
Software Mansion suggests using Expo Image instead. It delegates SVG rendering to native libraries like Glide on Android and SDWebImage on iOS. This reduces the React tree to a single component and supports most of the SVG standard.
Developers can avoid unnecessary reconciliation overhead and memory issues by using Expo Image for static SVGs. The tradeoff is that loading happens asynchronously, which can cause blinking on larger images unless you preload them first.