Photo by Alexander Schimmeck on Unsplash

The SVGs inside React Native 0.61.5, 0.62 and Storybook

During my recent work with Storybook, I found small problems with SVG and react-native-svg package. So I thought I will share a few ideas that could save time for anybody else.

I needed to install

  • react-native-svg (12.0.3)
  • react-native-svg-transformer (0.14.3)

Then, I slightly modified metro.config.js:

Now, we can render SVGs directly in stories or React Components:

  • Search.svg contains only XML metadata (as they were exported from Sketch)
  • ES6-import support for SVG files
  • Rendering SVGs it was React Component

This works for traditional on-Device Storybook UI. If you want to know more about how to create a static Storybook web app from React Native components also with SVG support, check this post:

Hi, I am Stefan Majiros, serverless and React Native freelancer. You can follow me on Twitter (@stefanmajiros), or hire me for your project using https://stefan-majiros.com where you could schedule 30min video call with me to consult your project — for free.

Senior React Native Developer @stefan-majiros.com (Mobile MVP Dev Agency). Working w/ AWS Amplify and Firebase. Open to remote dev projects w/ my own clients!