'How to display SVG from a Module

I am using this library react-native-bigheads. I want to display the individual svg from which the final "avatar" is drawn. They can be seen here src/components and look like this

import React from 'react'
import { useTheme } from '../../themeContext'
import { ClothingProps } from './types'
import { Path } from 'react-native-svg'
import { Polygon } from 'react-native-svg'

export const Front = ({ color }: ClothingProps) => {
  const { colors, skin } = useTheme()

  const { base } = colors.clothing[color]

  return (
    <>
      <Path
        d="M329.09,794.17c56.12,35.58,168.48,75.53,168.48,75.53l-.16,14S397,879.36,316.32,844.9C316.32,814.38,329.09,794.17,329.09,794.17Z"
        fill={base}
        stroke={colors.outline}
        strokeMiterlimit={10}
        strokeWidth="12px"
      />
...

This is how I am trying to render them

import React from 'react';
import {
    View,
    ViewStyle
} from 'react-native';
import { Front } from 'react-native-bigheads/src/components/clothing/Dress.tsx'

const Foo = () => {

return <View
           style={{ width: 100, height: 100, ...ViewStyle }}>
               <Front
                   color='blue' />
       </View>

But the <View /> stays empty, nothing renders. Why is that?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source