Why Figma SVGs Kill React Native Performance

You followed the best practices: you're using `react-native-svg`, you've componentized your icons, but your list scroll is still choppy. The culprit? Those "Copy as SVG" exports from Figma.

The JS Thread Bottleneck

Unlike on the web where the browser's C++ engine handles SVG rendering in a separate process, React Native often has to parse and bridge SVG data through the JavaScript thread. When you have a list of 20 items, each with 3-4 unoptimized icons, you're sending massive amounts of redundant data across the bridge every time the list moves.

3 Ways Figma Bloats Your Bundle

1. Path Over-Precision

Figma exports coordinates with up to 15 decimal places (e.g., `12.000000000004`). In a mobile app, a precision of 1 decimal place is usually indistinguishable from 15, but those extra characters double the size of your SVG string.

2. Deep Group Nesting

Figma preserves your layer structure. If your icon is inside a Frame, inside a Group, inside another Group, your SVG will have nested `<g>` tags. `react-native-svg` has to create a native view for every single group tag, leading to a "Deep View Hierarchy" that slows down layout calculation.

3. Hidden "Ghosts"

Ever noticed an icon file size is 50KB when it should be 2KB? Figma often includes non-visible elements, export settings, and proprietary metadata that the React Native parser still has to read through before it can start rendering.

The Performance Checklist

• Simplify Paths: Use tools to reduce the number of points in your vector paths without losing visual quality.
• Flatten Everything: Before exporting from Figma, use `Cmd+Alt+C` to outline strokes and `Cmd+E` to flatten layers.
• Use `currentColor`: Instead of hardcoding hex values, use `fill="currentColor"`. This makes the SVG respond to the parent component's style, reducing the need for re-renders.
• Limit use of `<G>`: If a group doesn't have a transform or a common style, it shouldn't be there.

Conclusion

Performance on mobile is a game of inches. By cleaning up your SVGs, you reduce memory usage and keep the JS thread free for what actually matters: your app's logic.