How to add circle to React Native progress bar

I've got an issue with the design.

This is design:

Are there any ways that we can add a circle to the top of the progress bar like this design?

I'm using react-native-circular-progress library.

I use almost props of the library.

This is my code:

const Progress = ({fill}: Types) => {
  const {translations} = useContext(LocalizationContext);

  return (
    <>
      <View style={PropertyDetailStyles.dailyCapWrapper}>
        <AnimatedCircularProgress
          size={240}
          fill={fill}
          arcSweepAngle={181}
          rotation={270}
          lineCap="round"
          tintColor={fill >= 100 ? TERTIARY_YELLOW : SECONDARY_BLUE}
          backgroundColor={TERTIARY_GREY}
          width={10}
          backgroundWidth={10}
          duration={1000}
          children={() => {
            return (
              <Text style={PropertyDetailStyles.dailyCapText}>
                {fill >= 100
                  ? translations.visitDetail.dayPassUnLock
                  : translations.visitDetail.dayPass}
              </Text>
            );
          }}
          childrenContainerStyle={
            PropertyDetailStyles.dailyCapChildrenContainer
          }
        />
        <Image
          style={PropertyDetailStyles.dailyCapImage}
          source={
            fill >= 100
              ? require('../../../../../assets/image/lineProgressMax.png')
              : require('../../../../../assets/image/lineProgress.png')
          }
        />
      </View>
    </>
  );
};

export default Progress;

You will need to use the component property renderCap which will only take a custom SVG element. So you could for instance import Circle component from the library react-native-svg and do the following:

import * as React from 'react';
import { Text, View } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import { Circle } from 'react-native-svg';


export default function App() {
  return (
    <View>
      <AnimatedCircularProgress
        size={120}
        width={15}
        fill={100}
        tintColor="#00e0ff"
        backgroundColor="#3d5875"
        padding={10}
        arcSweepAngle={180}
        // This is the property you are looking for:
        renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
        
      />
    </View>
  )
}

By applying this property to your component you will be able to get your desired result. See a live demo of how it looks here.