close

How to show SVG file on React Native?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to show SVG file on React Native? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to show SVG file on React Native ?

  1. How to show SVG file on React Native ?

    to show SVG file on React Native After trying many ways and libraries I decided to create a new font (with Glyphs or this tutorial) and add my SVG files to it, then use “Text” component with my custom font.

  2. How to show SVG file on React Native ?

    to show SVG file on React Native After trying many ways and libraries I decided to create a new font (with Glyphs or this tutorial) and add my SVG files to it, then use “Text” component with my custom font.

Method 1

After trying many ways and libraries I decided to create a new font (with Glyphs or this tutorial) and add my SVG files to it, then use “Text” component with my custom font.

Hope this helps anyone that has the same problem with SVG in react-native.

Method 2

I’ve written a new library to be able to use native vector assets based on .svg files called react-native-vector-image. It doesn’t need any custom babel transforms and you can use it like you would for other bitmap based assets, but there is an extra step in transforming the svg to the native equivalents (you only need to run it when you add new assets though).

Using your example the code would look something like this

import VectorImage from 'react-native-vector-image';

<View>
  <VectorImage source={require('./svg/1f604.svg')} />
</View>

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment