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.

Installing packages

I needed to install

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

Then, I slightly modified metro.config.js:

Voilà, result

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!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Slash in URL variable for dynamic paths

Slash in URL variable for dynamic paths

YDKJS — Scopes and Closures — Part4

Solving: Split Two Strings to Make Palindrome

28.05. Morning limit delete test — 3

Datepicker

Decision Making and Loops in JavaScript

ReactJS Tutorial for Beginners -13

Two States : The story of react-native to react-native-web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stefan Majiros

Stefan Majiros

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!

More from Medium

Writing tests for Redux actions

MVVM Pattern In React

Use of Higher Order Component (Hoc) in React

Working with Stack Navigation in React Native with Typescript