bartgryszko / react-native-circular-slider Goto Github PK
View Code? Open in Web Editor NEWReact Native component for creating circular slider :radio_button:
License: MIT License
React Native component for creating circular slider :radio_button:
License: MIT License
I am using this slider to implement 24 hours clock.
I want to make sure that BedTime Marker doesn't move beyond 0 deg and Wake time does move beyond 360 deg
which means both the markers should move between 0 to 360
Any Hack or work around ?
Hi,
can you update it to latest version of react native ? we got many warn and errors when using current version .
thanks
I'm developing react native app using expo environment but after installing this package & using it, this error comes into the picture:
Invariant Violation: "RestApp" has not been registered. This can happen if:
I was messing around with the slider code and noticed that often when you are moving it around the circle it will not properly adjust itself to the exact position it should be in.
Images below show the error being reproduced in an android emulator and i have also tried compiling to native android and running again, still the same issue.
Basically what is happening is that at 12 o'clock the button correctly follows the mouse movements but as i move around the circle it does not perfectly follow the touch position onscreen. i feel this is a maths error since it starts correctly at the 12 position and ill be diving into trying to fix the issue myself after i do some other work but i thought id run it past here in case i can get a nice point to somewhere to start, anything is appreciated.
The red lines in the images are the mouse position. All the movements in the screenshots are counter clockwise bar the 12 0'clock position image so you can tell where the onTouchEnd position is.
Thank you for this great component!
I would like to integrate it within a ScrollView, unfortunately I cannot slide the slider anymore after doing that.
Thank you for you help!
There is many old issues and the package isn't updated to the latest version of react-native causing a lot of problems
is the project dead ?
From what I can tell it's limited to a maximum of 12 hour time range, correct?
If so, have you thought about allowing up to 24 hours?
I'm a little worried with what that would do to the aesthetic, but I thought I'd post here and get the discussion going a little bit.
It seems that the circular slider is not registering the correct location of my presses only when the component is mounted after being navigated to using react-navigation. I was able to identify the issue as being the px value obtained by this._circle.measure in setCircleCenter() of the CircularSlider component. The value of px is different if the component is loaded normally versus if it navigated to using react-navigation. In order to solve this, I simply hardcoded the value for px with the value that is obtained when the component loads normally. However, I am not sure if this solution is going to scale well. Does anyone know of any other solution to this problem that I can attempt? Thanks!
I recommend support for typescript, in my experience, I tried to use it, but I was not successful.
I've tried to run the example app with Exponent , either by scanning QR code or by typing exp://exp.host/@community/bedtime inside of Expo.
But unfortunately the example app seems not compatible with the latest version of Exponent(SDK versions 14.0.0+)
I'll be happy accept help maintaining this package & give write rights to people that would like to help fixing recent bugs / updating package to the newest react / native version, reviewing and merging PRs etc.
When I follow the instructions on the example I get a red screen and:
undefined is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular')
I'm trying to repurpose the circular slider as a temperature thermostat. Is there a way I can limit the travel of one icon to only traveling along a half circle? Or better yet that only a half of a bgCircle
gets rendered?
As it is for iOs (see #30) even on android the component does not work....
@bartgryszko can this library be fixed? In react native there are no other component similar...
I tried the example app in Android (copy index.ios.js
& paste into index.android.js
) and after touching the slider it throws an error described below.
Error while updating property 'd' in shadow node of type: RNSVGPath
updateShadowNodeProp
ViewManagersPropertyCache.java:110
setProperty
ViewManagerPropertyUpdater.java:148
updateProps
ViewManagerPropertyUpdater.java:52
updateProperties
ReactShadowNode.java:246
updateView
UIImplementation.java:216
updateView
UIManagerModule.java:245
invoke
Method.java:-2
invoke
BaseJavaModule.java:318
invoke
JavaModuleWrapper.java:158
run
NativeRunnable.java:-2
handleCallback
Handler.java:739
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:31
loop
Looper.java:148
run
MessageQueueThreadImpl.java:196
run
Thread.java:818
Hi @bgryszko,
I tried the code on snack.expo.io, but it does not seem to work.
here is the link: https://snack.expo.io/r1GlOBFz7
i am using this function to change the this.state.timeLoader2 with setState
but the problem is on every device its acting different
i need to animate the circular progress like a loader to be full after one minute
startCircleAnimation(number,stop) {
if (number > 920 || stop > 9200) {
return
}
Animated.timing(this.state.timeLoader, {
toValue: totalTime / 920 * number,
duration: 50,
}).start(() => {
this.setState({
timeLoader2: this.state.timeLoader._value
}, () => {
this._startCircleAnimation(number + 1, stop + 10)
});
})
}
<CircularProgress
startAngle={0}
angleLength={this.state.timeLoader2}
segments={5}
strokeWidth={3}
radius={calcSize(100)}
gradientColorFrom="#2A818E"
gradientColorTo="#30ABA5"
onUpdate={({startAngle, angleLength}) => console.log(startAngle, angleLength)}
clockFaceColor="#9d9d9d"
bgCircleColor="#D3D3D3"
/>
any idea how to accomplish that ? thanks !
Hi,
I tried using
stopIcon = require('../Images/img1.png') startIcon = require('../Images/img1.png')
but that gives an error. Probably because they are non-SVG images. Any fix for that? To use normal images there?
Also, your component is too exposed. I cant just use the main tags and start using it. I have to import those math functions along. It would be better if you subdivide it in such a way that a user can just use your component tags and give it his wanted values and start using it.
All the angle calculation should be behind the doors as well and the onUpdate
function should just be a callback to change something else in the app and not run the basic working of the component itself.
Awesome component btw, really need to use it in my next project. I would be really glad and thankful if you could improve these functionalities.
I think it's really a react-native svg issue [363] (software-mansion/react-native-svg#363) but thought I would leave it here since I tried this out on Android Nexus 5X and no touch events are captured by the component. If you put a breakpoint in CircularSlider.js (line 238 or so) in the G for either of the ends you will see that PressIn handler is never fired.
RN version 47, Expo version 19
how can i make this work on reactjs ?
Thanks for this great component.
I would love to have a prop to set the color of the start/stop circles. This way they don't have to be the same color as the background circle.
Happy to submit a PR if it would help
I was wondering how I could freeze one of the hands of the slider, leaving only one of the hands workable.
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 2.32 GB / 11.63 GB
Shell: 5.4.2 - /bin/zsh
Binaries:
Node: 8.10.0 - /usr/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 3.5.2 - /usr/bin/npm
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
import CircularSlider from 'react-native-circular-slider';
When I am running my app I am after adding circular slider getting this error
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.