raymondchooi / react-native-circle-slider Goto Github PK

Hey, thanks for the great circle slider you've written!

I was wondering if the number of component re-renderers could be potentially reduced by somehow not storing the angle in the component state?

Or said in other words, do you think that the same circle-slider behavior could be achieved by interpolating the pan responder input or doing some fancy translateX - translateY magic?

The slider only seems to work properly when centred in screen.

This is my Code :
`export default class App extends Component{

constructor(props) {
super(props);
this.state = { progress: 10 };

// Toggle the state every second
setInterval(() => (
  this.setState(previousState => (
    { progress: previousState.progress+10 }
  ))
), 2000)

}

render() {
return (
console.log(this.state.progress),

<CircleSlider
textColor={'#fff'}
textSize={1}
value={this.state.progress}
/>

);
}
}`

Is there any way to stop dragging in the opposite direction? I am making a music application so want to control the user drag or Is there any way to stop dragging at all?

panResponder is not defined at all for the plugin. One has to define it as a property of the class.

export default class CircleSlider extends Component {
	panResponder;
	constructor(props) {
		super(props);

		this.state = {
			angle: this.props.value,
		};

		this.panResponder = PanResponder.create({
...

Hi,
can you update it to latest version of react native ? we got many warn and errors when using current version .

thanks

Hi @raymondchooi I want to make a customized slider for an app.

Is there a way to customize it accordingly?

I've just installed library, but I'm getting error about some Hook. I'm using the basic example placed in the Usage paragraph and the problem is just when I'm using this component. Any solution to this?

RN Version 0.64

Thank you!

How to rotate slider?

Wrapping into <G rotation={angle}> doesn't work becouse handlers are getting wrong position.

As i mentioned on title, im trying to get a 24 hours of the time. Is it possible to get values up to 720? right now even if i give max: 719, it resets after 359.

Hi @raymondchooi :

I tried the project, I congratulate you I wanted to ask you how I could make some changes.

1. Make sure that when you get to 359,360,0,1.
   How far you get to 360 freezes, and the only way to get to 0 or 1, you have to go back and not go forward.

2. Make sure to set a min and max.
   For example, min, can also be a negative value: -50
   For example the max, can be a value different from 360.

I did a test, here is the link: https://snack.expo.io/B1lpHUFMX

Hi @raymondchooi :
when I use the circle slider I often get this error. what can it depend on?
thx

2019-04-09 17:37:30.863 18373-18373/com.xxxx.mobile.rtl E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.xxxx.mobile.rtl, PID: 18373
java.lang.IndexOutOfBoundsException: Index: 1, Size: 1
at java.util.ArrayList.remove(ArrayList.java:503)
at com.horcrux.svg.GlyphContext.popContext(GlyphContext.java:268)
at com.horcrux.svg.GroupView.popGlyphContext(GroupView.java:74)
at com.horcrux.svg.GroupView.drawGroup(GroupView.java:120)
at com.horcrux.svg.GroupView.draw(GroupView.java:81)
at com.horcrux.svg.RenderableView.render(RenderableView.java:309)
at com.horcrux.svg.GroupView.drawGroup(GroupView.java:99)
at com.horcrux.svg.GroupView.draw(GroupView.java:81)
at com.horcrux.svg.UseView.draw(UseView.java:67)
at com.horcrux.svg.RenderableView.render(RenderableView.java:309)
at com.horcrux.svg.GroupView.drawGroup(GroupView.java:99)
at com.horcrux.svg.GroupView.draw(GroupView.java:81)
at com.horcrux.svg.RenderableView.render(RenderableView.java:309)
at com.horcrux.svg.SvgView.drawChildren(SvgView.java:279)
at com.horcrux.svg.SvgView.drawOutput(SvgView.java:232)
at com.horcrux.svg.SvgView.onDraw(SvgView.java:89)

The max and min props are working for values much greater than the respective min and max props, however fails when the max and min props are very close to the start and end degrees.

Examples:
{ ... max={359} min={0} ... }

The above props if provided as min and max values respectively, will still make the button to cycle on both sides. That's from 0 - 359 and 359 - 0

I'm sure you're probably already aware of this, but https://www.npmjs.com/package/react-native-circle-slider indicates that is a "continuation" of this repository (i.e. not pristine) by exomemphiz.

The most recent release is also a year old and I don't see a repository linked for the actual source code used.

At the very least, it could cause confusion for people new to react-native-circle-slider. Even most of the props are different.

@raymondchooi , do you have any interest in publishing releases to npmjs? If so, have you tried to reach out to @ExoMemphiz ? (I notice that there is an account on GitHub with the same name and profile image.) @ExoMemphiz, where is your source repository for the npmjs package? Also, should you maybe rename the npmjs package to avoid this confusion?

@raymondchooi, you might want to add some instructions to install this package from the GitHub source (e.g. "npm install https://github.com/raymondchooi/react-native-circle-slider" or "yarn add https://github.com/raymondchooi/react-native-circle-slider"), so people can easily get the unmodified version. I'm guessing that otherwise, some (most?) people would try to just run "npm install react-native-circle-slider" or "yarn add react-native-circle-slider", which would pull in the modified version, resulting in issues like #9 .

Adding the library in React Native 0.64.0 causes the following error:

index.js: Transformer is not a function

After some debugging from this issue (facebook/react-native#29301) and running npm ls metro-config. This library causes metro to resolve to an older version of 0.59.0

-- [email protected]
  `-- [email protected]
    `-- @react-native-community/[email protected]
      +-- [email protected]
      | `-- [email protected]  deduped
      `-- [email protected]

When using multiple instances of the circle slider, the dial does not respond correctly to the touch positions. The script looks at touch events on the whole screen, and not on the circle slider itself.