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

Vim Minute #1

Typescript Cookbook

Export Objects Array as CSV using TypeScript

Create Singly Linked Lists using Javascript

Recursion: Brief Historical Introduction and Basic JS Methods

Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)

Create a React Native App with Google Map using Expo.io

How to keep React components small

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

Now You’re Thinking With (React) Portals

ReactJS VS React Native: Key Differences

Why is my z-index not working? Let’s fix it

React Modal the reusable way (TS)