Apply border radius to inner view(progress bar) when applying padding to <Progress.Bar />

[hardik-wts]

Que : How to apply border raduis to inner view of progress bar

Version

"react": "16.13.1",
"react-native": "0.63.4",
"react-native-progress": "^5.0.0",

Expected output

Current behaviour

Code

<Progress.Bar
  color={'rgb(128,0,128)'}
  progress={0.5}
  borderWidth={1}
  borderColor={'rgba(128,0,128,0.2)'}
  unfilledColor={'white'}
  height={10}
  borderRadius={7.5}
  width={200}
  style={{ padding: 2, }}
/>

So after applying style with padding 2 I'll get the space for inner view
but when I try below code it wont work for me

style={{ padding: 2,borderRadius:10 }}

So how apply border radius for inner view as per expected output

[erickgtzh]

Did you find a solution?

[matandin]

@erickgtzh @hardik-wts Did you guys find a solution?

[paulolopesrb]

Has anyone got a solution? I have the same issue.

[Srijan67]

I had similar problem, I solved it by going to react-native-progress/bar file and adding borderRadius to progressStyle. It will give similar border as your outer container.

[luisfuertes]

And somebody know how do the same with Circle? Thanks!