2

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

Dawker
  • 75
  • 1
  • 10

1 Answers1

3

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%" />;
}
Rohit Aggarwal
  • 1,048
  • 1
  • 14
  • 32
  • @Dawker I think you messed up with import or export for any component. Please make sure you're doing it correctly, this error has nothing to do with this library. – Rohit Aggarwal May 15 '21 at 03:53