Skip to content

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

@hardik-wts

Description

@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
Screenshot

Current behaviour
current_output
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions