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.

closed #4

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