How do I convert SVG linearGradient to React Native?

Paste SVG with linearGradient defs and click Convert LinearGradient.

Do stop colors map to Stop components?

Yes — stops typically become react-native-svg Stop children.

Check aspect tools like Fix SVG Gradient Stretch in Flexbox on the web SVG first.

FAQ

Quick answers

How do I convert SVG linearGradient to React Native?: Paste SVG with linearGradient defs and click Convert LinearGradient.
Do stop colors map to Stop components?: Yes — stops typically become react-native-svg Stop children.
Gradient looks stretched in layout after convert?: Check aspect tools like Fix SVG Gradient Stretch in Flexbox on the web SVG first.
Is LinearGradient conversion free?: Yes. Free browser tool.

Path to RN → Path to RN Path → Circle to RN → Rect to RN →

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B