Displaying Base64 svg in react native

user_9700096 0
Viewed 2360

I am currently trying to display flags in flatlist . But flags don't display on screen.The code is like below. What can I do to fix this

<View style={styles.container}>
   <StatusBar backgroundColor="grey" barStyle="light-content"/>
   <Image source={{uri:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgMyAyIj4NCjxwYXRoIGZpbGw9IiMwMDk1NDMiIGQ9Im0wLDBoM3YyaC0zeiIvPg0KPHBhdGggZmlsbD0iI2ZiZGU0YSIgZD0ibTAsMmwyLTJoMXYyeiIvPg0KPHBhdGggZmlsbD0iI2RjMjQxZiIgZD0ibTMsMHYyaC0yeiIvPg0KPC9zdmc+DQo="}} style={{width:100,height:100}}/>
 </View>
react-native base64 svg
3 Answers

decode base 64 string using atob().

install below npm package.

import { SvgXml } from 'react-native-svg';

const DATA_IMAGE = atob('some base 64 string')


<View style={ProfileStyles.footer}>
   <SvgXml xml={DATA_IMAGE} width='50%' height='50%' /> </View>
user_81949770

It is working for me like below

import { SvgXml } from 'react-native-svg';
import base64 from 'react-native-base64'

getBasse64SvgImg(icon) {
        let finalbase64String = "";
        finalbase64String = "data:image/svg+xml;base64," + base64.decode(icon);
        return finalbase64String;
    }

let finalBase64String = this.getBasse64SvgImg(item.SvgIcon);

In View we have show like below :

<SvgXml xml={finalBase64String} width={20} height={20} />
user_43776720

With react-native-flags package;

import Flag from "react-native-flags";

         <View
            style={{
              padding: 10,
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <View width={75} height={35}>
            
              <Flag code={item.alpha2Code} size={32} type="shiny" />
            </View>
           
          </View>

alpa2Code attribute comes from api: https://restcountries.eu/rest/v2/all

user_97000960
Related