Repository navigation
Apply border radius to inner view(progress bar) when applying padding to <Progress.Bar /> #240
Description
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
Reacted by c.goettert, dsc-jerome-dc, Erick G, Paulo Lopes, Desorbais Anthony, Nazar, palmashruwala, pncuong03 and Nery Cano
Activity
erickgtzh commentedon Mar 8, 2022
Did you find a solution?
matandin commentedon Mar 22, 2022
@erickgtzh @hardik-wts Did you guys find a solution?
paulolopesrb commentedon Apr 14, 2022
Has anyone got a solution? I have the same issue.
Srijan67 commentedon Jan 27, 2023
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 commentedon Jul 31, 2023
And somebody know how do the same with Circle? Thanks!
pncuong03 commentedon Jan 24, 2025
If this happens in the production environment, it will be lost. This method is not very good. Does anyone handle it differently? @Srijan67