CODEWITHSUNDEEP
react-native
Ritesh Bansal
Ritesh Bansal

Reputation: 141

SVG Image in react native

I want to use svg image in react-native. I am using WebView to display the mage. But it is showing some fluctuation while scrolling. Here is my sample code : 

'use strict';
var React = require('react-native');
var {AppRegistry,Alert,WebView,View,ScrollView} = React;

var Sample = React.createClass({
    render: function () {
        var data = [
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"},
            {uri: "http://www.kameleon.pics/img/pill-svg.svg"}
        ];
        var dataToShow = data.map((record, index)=> {
            return (
                <WebView key={`ic_`+index} source={{uri:record.uri}} style={{height:80,width:80}}></WebView>
            )
        });
        return (
            <ScrollView>
                {dataToShow}
            </ScrollView>
        );
    }
});
AppRegistry.registerComponent('MyApp', () => Sample);

Is there any other way better than WebView to use svg image?

Upvotes: 2

Views: 2096

Answers (1)

Jagadish Upadhyay
Jagadish Upadhyay

Reputation: 1264

First of all create icons from SVG. You can create icons from IcoMoon. After that use react-native-vector-icons in your projects. You have to follow installation steps correctly. After that you can use your custom font icons in your app.

Upvotes: 1

Related Questions