What is react-native-svg and when do you use it?

react-native-svg brings SVG rendering to React Native. The Image component can't display SVG files natively — react-native-svg provides SVG primitives that render using native drawing APIs. Installation: npm install react-native-svg. Basic SVG usage: import Svg, { Circle, Rect, Path, Text, G, Defs, LinearGradient, Stop } from "react-native-svg"; function Logo() { return ( <Svg width={100} height={100} viewBox="0 0 100 100"> <Defs> <LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <Stop offset="0%" stopColor="#667eea" /> <Stop offset="100%" stopColor="#764ba2" /> </LinearGradient> </Defs> <Rect width={100} height={100} fill="url(#gradient)" rx={20} /> <Circle cx={50} cy={50} r={30} fill="white" opacity={0.9} /> <Path d="M30,50 L50,30 L70,50 L50,70 Z" fill="#667eea" /> </Svg> ); }. SVG files: import .svg files as components with react-native-svg-transformer: // metro.config.js: module.exports = { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; // Now import SVG as component: import Logo from "./assets/logo.svg"; <Logo width={100} height={100} />. Animated SVGs: combine with react-native-reanimated for animated SVG paths (loading indicators, charts, icon animations): const AnimatedCircle = Animated.createAnimatedComponent(Circle); <AnimatedCircle r={radius} />. Charts: victory-native and react-native-gifted-charts use react-native-svg for cross-platform chart rendering.