Add a gradient fill to an Expo SVG Circle

import React, { Component } from 'react';
import { View, StyleSheet, Text, Dimensions } from 'react-native';
import { Constants, Svg, LinearGradient, } from 'expo';
const {Circle, Defs, Stop, G, Polygon} = Svg;

const { width, height } = Dimensions.get('window');

export default class SVG extends Component {
  render() {
    return (
        <Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 100 100">
            <LinearGradient id='grad' colors={['blue', 'green']}  >





Hey @airomo123,

I’m not sure what’s going on here. Does this not work? Does it and you’re sharing with the community how it’s done?

Just posting a snippet of code with no additional context or information isn’t very helpful. :upside_down_face:



I am trying to get put a gradient fill on my svg circle but it isn’t working. When I set the fill as “ur;(#grad)” on ios it does not even render the svg circle and on android it has the svg circle filled with black.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.