The SVGs inside React Native from 0.61.5 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:

	const {getDefaultConfig} = require('metro-config');
	module.exports = (async () => {
	const {
	resolver: {sourceExts, assetExts},
	} = await getDefaultConfig();

	return {
	transformer: {
	babelTransformerPath: require.resolve('react-native-svg-transformer'),
	},
	resolver: {
	assetExts: assetExts.filter(ext => ext !== 'svg'),
	sourceExts: [...sourceExts, 'svg'],
	},
	};
	})();

view raw React Native SVG example hosted with ❤ by GitHub

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: