CODEWITHSUNDEEP
react-nativesvg
Dawker
Dawker

Reputation: 75

React Native how to render svg from url

I'm trying to render svg file path from @dicebear/avatars

  let svg = createAvatar(style, {
    seed: 'random',
    // ... and other options
  });

svg variable has this value = enter image description here

But when i try to render in react-native is not showing even if i use a library called react-native-render-html I'm trying to render using the library like this

<View style={styles.container}>
  <HTML source={{ html: svg }} />

  <StatusBar style="white" />
</View>

When i do this this is what i get[what i see when i try to render1

Upvotes: 2

Views: 1342

Answers (1)

Rohit Aggarwal
Rohit Aggarwal

Reputation: 1188

You can do this using react-native-svg. Steps:

  1. Install the library using npm install react-native-svg
  2. Rebuild the app after clearing the cache.
  3. Now use the XML like
import React from 'react';
import {createAvatar} from '@dicebear/avatars';
import * as style from '@dicebear/avatars-identicon-sprites';
import {SvgCss} from 'react-native-svg';

const xml = createAvatar(style, {
  seed: 'custom-seed',
});

export default function App() {
  return <SvgCss xml={xml} width="100%" height="100%" />;
}

Upvotes: 3

Related Questions