SVG
Software Mansion's production SVG patterns for React Native using React Native SVG.
For API details on specific components and props, webfetch https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md
Svg
by software-mansion-labse3f00cdb3494No license291 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago
Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app.
AI-generated overview
Guides SVG rendering in React Native apps using the react-native-svg library.
- What it does
- Provides Software Mansion's production patterns for rendering SVG content in React Native with react-native-svg. It covers installing the library, loading SVGs from URIs, XML strings, or files, applying filters, handling touch events, performance considerations, and known issues. It also helps decide between react-native-svg, expo-image, @expo/vector-icons, Skia, and Lottie.
- When to use it
- Use when rendering vector graphics, icons, charts, illustrations, or other SVG content in a React Native app. It is also useful when choosing among SVG and image rendering libraries for a React Native project.
- Requirements
- No scripts; instructions only. The agent may need network access to fetch the referenced react-native-svg usage documentation.
Source and attribution
Source:software-mansion-labs/skillsinskills/react-native-best-practices/references/svgat commite3f00cd
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from software-mansion-labs/skills
Rich Text
software-mansion-labs
Guides building rich text editors and HTML or Markdown renderers in React Native using Software Mansion's enriched libraries.
Software Development291updated 10 days ago
Jsi
software-mansion-labs
Reference guidance for writing React Native JSI C++ code that bridges native code and the JavaScript engine.
Software Development291updated 10 days ago
Gestures
software-mansion-labs
Best practices for implementing touch gestures in React Native apps with React Native Gesture Handler.
Software Development291updated 10 days ago
Enable Worklets Bundle Mode
software-mansion-labs
Enables react-native-worklets Bundle Mode in a React Native or Expo app, including the required metro patches.
Software Development291updated 10 days ago
Audio
software-mansion-labs
Best-practice guidance for implementing audio playback, recording, effects and analysis in React Native apps.
Software Development291updated 10 days ago
Animations
software-mansion-labs
Reference patterns for building production animations in React Native with Reanimated 4, Skia, WebGPU and TypeGPU.
Software Development291updated 10 days ago
More in Software Development
Playground
anthropics
Featured
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
Software Development37Kupdated today
M5 Onboard
anthropics
Featured
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Software Development37Kupdated today
Cardputer Buddy
anthropics
Featured
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Software Development37Kupdated today
Web Design Guidelines
vercel-labs
Featured
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Software Development32Kupdated 5 weeks ago
Vercel React Native Skills
vercel-labs
Featured
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Software Development32Kupdated 5 weeks ago
Vercel React Best Practices
vercel-labs
Featured
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.
Software Development32Kupdated 5 weeks ago