'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 |
|---|
