Apply vertical linearGradient to svg Lines and Circles

Question

I try to create a SVG circle with vertical linear gradient on it using react-native-svg according to the docs. This is how the code looks:

<View style={style}>
   <Svg height={boxHeight} width={boxWidth}>
        <Defs>
            <LinearGradient
                id="grad"
                x1={boxWidth / 2}
                y1="0"
                x2={boxWidth / 2}
                y2={boxHeight}>
                <Stop
                    offset="0%"
                    stopColor={theme['color-primary-400']}
                />
                <Stop
                    offset="100%"
                    stopColor={theme['color-info-400']}
                />
            </LinearGradient>
        </Defs>
        <Circle cx={boxWidth / 2} cy={boxHeight / 2} r="15" fill="url(#grad)" />
    </Svg>
</View>

My aim is for the gradient on the circle to be vertical, going from "#F3455F" to "#4A75D5" (the colors are defined in the theme file and used as variables). BoxWidth is equal to '30', while boxHeight is '70'.

However, the circle renders as solid "#F3455F" colored figure.

What is wrong with how I define the gradient?

Answer 1

I have found the way. The coordinates for the gradient should be:

x1='0%'
y1='0%'
x2='0%'
y2='100%'

Works alright if you set these in LinearGradient props.