Can't render Svg icons in custom React Native Component

Question

I'm having problems rendering an icon I'm supplying through a prop in a custom component. Here is my custom component:

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export class MoreIcon extends React.Component {
  render() {
    return(
        <View style={styles.topViewStyle}>
            <View style={styles.circleStyle}>
                <Image source={this.props.iconSource} style={styles.iconStyle} />
            </View>
            <Text style={styles.moreIconText}>{this.props.iconText}</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    topViewStyle: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    moreIconText: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#fff',
        lineHeight: 1.17,
        height: 14,
    },
    iconStyle: {
        width: 30,
        height: 30,
    },
    circleStyle: {
        width: 58,
        height: 58,
        borderRadius: 50,
        borderColor: 'rgba(255, 255, 255, 0.3)',
        borderWidth: 2,
    }
});

The problem is, when I supply a source attribute in the component like this:

<MoreIcon iconText='Home' iconSource={require('../../assets/icons/dashboard.svg')} />

Nothing shows up in the circle, and it looks like this:

What am I doing wrong to where the prop I'm supplying doesn't show up in the MoreIcon tab? (the path is correct fyi)

V. Dimitrov · Accepted Answer · 2018-11-06 19:55:49Z

1

You'll need to convert your SVGs to be compatible with the react-native-svg library. Luckily, there are a few great examples on the Usage section of the readme.

There's also a great example on Snack

After you've converted them, you'll be able to import them as normal constants.

EDIT:

As per Adam's comment below, using the react-native-svg-uri library now seems like the simpler approach to the SVG problem.

edited Nov 6, 2018 at 19:55

answered Nov 5, 2018 at 17:28

V. Dimitrov

1421 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam McGurk Over a year ago

100%, that was the problem. I had no idea that SVGs didn't render on React Native. I've used this library from Github (that looks pretty good) github.com/vault-development/react-native-svg-uri to get my files to render! It was plug and play!

V. Dimitrov Over a year ago

@AdamMcGurk awesome! I didn't even know that existed, but I might try that the next time I run into this issue myself. I've added the link you shared in case anyone else needs an alternative solution.

Collectives™ on Stack Overflow

Can't render Svg icons in custom React Native Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related