raymondchooi / react-native-circle-slider

React Native circle slider for Android and iOS

React Native Circle Slider

React native circle slider using react-native-svg and PanResponder.

Install

This component is built with React Native 0.69+ and works for Android and iOS.

Install with npm:

npm i --save react-native-circle-slider

Install with yarn:

$ yarn add react-native-circle-slider

Usage

Basic Usage(github file)

import React, { Component } from "react";
import { View } from "react-native";
import CircleSlider from "react-native-circle-slider";

export default class CircleSliderContainer extends Component {
	render() {
		return (
			<View
				style={{
					flex: 1,
					justifyContent: "center",
					alignItems: "center",
				}}
			>
				<CircleSlider value={90} />
			</View>
		);
	}
}

Properties

Property name	Type	Default	Description
btnRadius	number	15	The radius of the small button
dialRadius	number	130	The radius of the circle slider
dialWidth	number	5	The width of the slider line
meterColor	string	'#0cd'	The color of slider line
fillColor	string	'none'	The color of circle fill
onValueChange	function	x => x	Value to print on button (x=degrees)
textColor	string	'#fff'	The color of the button text
textSize	number	10	The size of the button text
strokeColor	string	'#fff	The color of stroke above the line
strokeWidth	number	0.5	The size of stroke above the line
value	number	0	The value of the slider (degrees)
min	number	0	The min limit of the slider (degrees)
max	number	359	The max limit of the slider (degrees)
xCenter	number	Screen center	The x coordinates of rotation center
yCenter	number	Screen center	The y coordinates of rotation center

Notes

There seems to be an error in the React Native code where locationX and locationY do not update themselves and stay as the coordinates of the first touch. A small work-around was used for now by setting the coordinates for the rotation center.

License

GNU General Public License v3.0

react-native-circle-slider's Issues

Customized slider

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

Is there a way to customize it accordingly?

IndexOutOfBoundsException

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)

Slider doesn't update on StateChange

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}
/>

);
}
}`

The react-native-circle-slider package on npmjs is not from this GitHub repository

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 .

If slider is not centred in screen then it does not respond correctly

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

Invalid hook call

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!

Transformer is not a function (RN 0.64+)

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]

Multiple instances on same screen don't work properly

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.

Can I take the circular slider value and show it on another component of mine

Optimizing or reducing the re-renders possible?

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?

Slider circles to 360 and returns to back to 0 - max and min props not working in all cases

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

update needed

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

thanks

In TypeScript panResponder is not defined (Line 13)

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({
...

Block slider from dragging opposite side ?

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?

IndexOutOfBoundsException

How to rotate slider?

How to rotate slider?

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

Block animation drag in determinate value?

Some informations

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

I want the same for 33, 100 ,1000 instead of 360 .Do any one has any idea?

Is it possible to circle it twice to get 720 degree? Im trying to make a clock app.

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.

Block slider from draging opposite side ?