Circular border disappears when one side is set to transparent

Question

For context, I'm trying to make a progress circle following this article; essentially, I'm overlaying coloured semi-circles made from borders on top of a base circular border to represent progress. These semi-circle borders are theoretically made by setting the bottom and left borders to transparent, but when I do this the entire border disappears.

This is the simplified portion of the code that I'm working with:

import { StyleSheet, View } from 'react-native';

export default function App() {
    return (
      <View style={styles.semicircle}></View>
    );
}

const styles = StyleSheet.create({
    semicircle: {
        width: 200,
        height: 200,
        borderWidth: 20,
        position: 'absolute',
        borderLeftColor: 'transparent',
        borderBottomColor: 'transparent',
        borderRightColor: '#3498db',
        borderTopColor: '#3498db',
        borderRadius: 100
    }
});

When I set the transparent border sides to black instead, the entire circle is visible like so, but having any transparent borders causes the entire border to disappear. How do I fix this? Any help would be greatly appreciated.