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

Vue.js 입문자를 위한 vue.js 설치, 프로젝트 생성하는 방법

Recording a List of Seeds as Migrations do on Sequelize

Functional JS #2: Functions. Duh!

The Basics of Building Accessible Forms

Everything I learned | Week 23 | Encora / Nearsoft Academy

Angular — Fast Development Reference

Angular Coding, blue screen, mug, quotes

Using MongoDB as a realtime database with change streams

4. Registering Custom Components

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

Higher Order Component for listing data using FlatList in React Native

React Native & Typescript | Imports & Exports

Customizable Bottomtab React Native

Installing Redux in a React Native App(Expo Based)