How to add circle to React Native progress bar

Question

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 can use this library https://github.com/bartgryszko/react-native-circular-progress — shammi, Aug 02 '21 at 06:28
@HarshitMadhav I'm using [https://github.com/bartgryszko/react-native-circular-progress](https://github.com/bartgryszko/react-native-circular-progress). I got issue with circle on the top of progress — Trí Lâm, Aug 02 '21 at 07:38
@shammi I'm using this library, but the design makes me add circle to the top of progress like design. — Trí Lâm, Aug 02 '21 at 07:40
Just like @HarshitMadhav stated, it would be highly beneficial if you could post the code of the component in which you are trying to use this library. Not the library itself, but rather the code you have written so far. — Fluous, Aug 02 '21 at 09:02

score 1 · Accepted Answer · answered Aug 02 '21 at 09:25

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.

How to add circle to React Native progress bar

1 Answers1