React Native SVG stacking circles not showing inner half

The darker translucent ring should be the same thickness as the brighter one but for some reason isn't The issue starts when I take off the opacity form the 'foregroung' circle. I'm not sure why and would appreciate any input! Thanks in advance!

import { View, Text } from 'react-native'
import SVG, { Circle } from 'react-native-svg';

type RingProgressProps = {
    radius?: number;
    strokeWidth?: number;
}

const color = '#EE0F55';

const RingProgress = ({radius = 100, strokeWidth = 20 }: RingProgressProps) => {
    const innerRadius = radius - strokeWidth/2;
    const circumference = 2 * Math.PI * innerRadius;


    return (
        <View 
        style={{
            width: radius*2, 
            height: radius*2, 
            alignSelf: 'center',
            //backgroundColor: 'green'
            }}
            >
                <SVG>
                    {/*Background*/}
                    <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    //fill={'blue'}
                    strokeWidth={strokeWidth}
                    stroke={color}
                    opacity={ 0.2 }
                    />
                    {/*Foreground*/}
                    <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    //fill={'blue'}
                    strokeWidth={strokeWidth}
                    stroke={color}
                    strokeDasharray={[circumference*.5,circumference]}
                    />

            
                </SVG>


        </View>
    )
}

Add fill="none" in both circle prop, This prevents any fill from overlapping or affecting the appearance of the circles.