Fixing Figma SVG Crashes in React Native (2026 Guide)

React Native's `react-native-svg` library is powerful, but it's not a browser. Figma exports often contain hidden metadata, unsupported tags, and CSS that cause immediate crashes on iOS or Android.

The Crash: "Text strings must be rendered within a <Text> component"

This is the #1 error developers see. You export an icon, drop it in, and your app red-screens.

The Cause: Figma often exports invisible `<text>` tags or metadata comments that React Native interprets as raw text nodes. Since React Native can't render text outside a `<Text>` component, it crashes.

The Silent Killer: ID Collisions

Figma likes to name elements `id="clip0_123"`. If you have two icons on the same screen with the same ID (because you exported them from the same Figma frame), one might mask the other, or the gradients will swap places.

In extreme cases, circular ID references caused by copy-pasting vectors in Figma can cause the SVG parser to enter an infinite loop and freeze the JS thread.

3 Steps to Sanitize Your SVGs

1. Flatten Text in Figma

Before exporting, select your vector and press `Cmd + E` (Mac) or `Ctrl + E` (Windows) to flatten text into vector paths. React Native handles paths fine; it hates text.

2. Remove XML Metadata

Open your SVG in VS Code. Delete everything that isn't a <path>, <circle>, <rect>, or <g>. Specifically, remove:

• <metadata>...</metadata>
• <defs> (unless using gradients)
• <title> and <desc>
• style="..." attributes (convert to props)

3. Convert `stroke-width` to camelCase

React Native (via JSX) requires camelCase props. `stroke-width="2"` is ignored; `strokeWidth=2` works. If you forget this, your icons will look "thin" or broken.

Summary

Treat Figma exports as "raw material", not production code. Always sanitize them. Or better yet, let a machine do it.