Add a gradient fill to an Expo SVG Circle

[airomo123]

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 (
      <View>
        <Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 100 100">
          <Defs>
            <LinearGradient id='grad' colors={['blue', 'green']}  >
               
            </LinearGradient>

          </Defs>

          
          <Circle
            cx="50"
            cy="50"
            r="45"
            fill="url(#grad)"
          >
            <Text>
              Test
            </Text>
          </Circle>
        </Svg>



      </View>

    );
  }
}

[adamjnav]

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.

Cheers,

Adam

[airomo123]

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.