Comments (2)
So i came up with a solution which works for me: i calculate the center of the circle, instead of manually supplying values or resort to the default (center of the device screen).
In CircleSlider.js i edited:
componentWillMount() {
let xCenter, yCenter;
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (e,gs) => true,
onStartShouldSetPanResponderCapture: (e,gs) => true,
onMoveShouldSetPanResponder: (e,gs) => true,
onMoveShouldSetPanResponderCapture: (e,gs) => true,
onPanResponderGrant: (e,gs) => {
this.refs.circleslider.measure( (fx, fy, width, height, px, py) => {
xCenter = px + (width/2);
yCenter = py + (height/2);
});
},
onPanResponderMove: (e,gs) => {
let xOrigin = xCenter - (this.props.dialRadius + this.props.btnRadius);
let yOrigin = yCenter - (this.props.dialRadius + this.props.btnRadius);
let a = this.cartesianToPolar(gs.moveX-xOrigin, gs.moveY-yOrigin);
this.setState({angle: a});
}
});
}
This works great for me. Even with multiple instances in a ScrollView.
I can make a pull request if you'd like.
from react-native-circle-slider.
Hey, thanks for coming up with this option! The x/y center can be changed through props with a default of the screen center. This can be changed depending on your use or the user experience you are going for.
I'll keep this out of the slider for now to keep it for more general use but can confirm that this method does work for multiple instances.
from react-native-circle-slider.
Related Issues (20)
- The react-native-circle-slider package on npmjs is not from this GitHub repository HOT 3
- How to rotate slider? HOT 1
- Slider circles to 360 and returns to back to 0 - max and min props not working in all cases HOT 2
- Optimizing or reducing the re-renders possible?
- Is it possible to circle it twice to get 720 degree? Im trying to make a clock app.
- In TypeScript panResponder is not defined (Line 13) HOT 2
- Block slider from draging opposite side ?
- Block slider from dragging opposite side ? HOT 1
- update needed HOT 2
- Some informations HOT 1
- Transformer is not a function (RN 0.64+)
- Invalid hook call HOT 2
- Customized slider
- Can I take the circular slider value and show it on another component of mine HOT 1
- If slider is not centred in screen then it does not respond correctly
- Block animation drag in determinate value? HOT 2
- I want the same for 33, 100 ,1000 instead of 360 .Do any one has any idea? HOT 4
- Slider doesn't update on StateChange HOT 2
- IndexOutOfBoundsException HOT 1
- IndexOutOfBoundsException HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-circle-slider.