Displaying Base64 svg in react native

Question

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>

Answer 1

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>