search

MrToph / react-native-progress-circle

A light-weight progress circle indicator for React Native.
MIT License
191 stars 83 forks source link

Transparent circle #2

Closed tezqa closed 7 years ago

tezqa commented 7 years ago

Hello,

Any idea to add transparency inside the circle?

Thank you for your work!

MrToph commented 7 years ago

Hi,

unfortunately it's not possible with the way the current implementation works. I would need to completely rewrite it which I have no plans to do right now.

In my cases it was often enough to just set the progress-circle's bgColor to match the View's background color to make it look like it is transparent.

gitlovenotwar commented 7 years ago

+1 for transparent background

kevinEsherick commented 6 years ago

@tezqa @gitlovenotwar It actually is possible with just some minor changes to the current source code. Only took me a dozen or so lines to implement. You simply add border width and border color props to each circle and set the background color of each to transparent. Then set a prop of borderRightWidth: 0 in the half circle styles object. This makes the borders that would normally cut across the middle of the circle disappear. You could alternatively set borderRightColor: 'transparent' and I think that would work too. Lastly, the borderWidth of the outer circle causes the half circles to shift, so you change their positioning to -this.props.borderWidth (negative). Set the positioning info within the half circle render method rather than the styles object so you have access to this.props.

tezqa commented 6 years ago

@kevinEsherick @gitlovenotwar I finally ended up with my own circular slider. It handles transparency. Thank you for your help :)

Dellybro commented 4 years ago

@tezqa @gitlovenotwar It actually is possible with just some minor changes to the current source code. Only took me a dozen or so lines to implement. You simply add border width and border color props to each circle and set the background color of each to transparent. Then set a prop of borderRightWidth: 0 in the half circle styles object. This makes the borders that would normally cut across the middle of the circle disappear. You could alternatively set borderRightColor: 'transparent' and I think that would work too. Lastly, the borderWidth of the outer circle causes the half circles to shift, so you change their positioning to -this.props.borderWidth (negative). Set the positioning info within the half circle render method rather than the styles object so you have access to this.props.

Could you paste some code?

zuhairnaqi commented 4 years ago

@tezqa @gitlovenotwar It actually is possible with just some minor changes to the current source code. Only took me a dozen or so lines to implement. You simply add border width and border color props to each circle and set the background color of each to transparent. Then set a prop of borderRightWidth: 0 in the half circle styles object. This makes the borders that would normally cut across the middle of the circle disappear. You could alternatively set borderRightColor: 'transparent' and I think that would work too. Lastly, the borderWidth of the outer circle causes the half circles to shift, so you change their positioning to -this.props.borderWidth (negative). Set the positioning info within the half circle render method rather than the styles object so you have access to this.props.

Can you please share your changes?. It'll be helpful

zuhairnaqi commented 4 years ago

This library is amazing if you also want transparent background Link Package: rn-animated-progress-circle