1

I am wanting to create a circular slider in React Native for a project of mine. Although I am not entirely sure on how to create one. Could someone help me out?

Here is a little sketchup of what I want it to look like:

I did some searching on the interwebs and found some posts about circular sliders in React Native. But these posts seem to be dated and the projects linked/provided in these posts would not work for me.

1. https://stackoverflow.com/questions/51058669/react-native-circular-slider
2. https://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react-native


Note: I am fairly new to the world of React and React Native but do have decent experience with JavaScript. Right now I am still learning about React and React Native.

Mart
  • 13
  • 7
  • is it possible to use the jQuery plugin? if so you try the roundSlider plugin (https://roundsliderui.com/) which is capable to do the mentioned customisation. – Soundar Mar 04 '20 at 18:43
  • Thanks Soundar! I will have a look and see if it's possible to implement this into my app – Mart Mar 05 '20 at 07:18
  • So far no luck. Could you let me know if it is indeed possible to implement this in React Native? And how it is done exactly? This seems like a sketchy way on how to implement a circular slider in React Native – Mart Mar 05 '20 at 11:12
  • you'll probably want to use react-native-svg, which has moved (now here https://github.com/react-native-community/react-native-svg) and changed a bit since I wrote the answer you referred to in 2, but is probably the only way to do this unless you want to drop down to writing native code for all target platforms. – Stevie Mar 10 '20 at 16:45

2 Answers2

1

Your best best is probably svg via react-native-svg, since that will allow you to declaratively draw and animate arbitrary shapes without having to write platform-specific native code.

Note that setting up react-native-svg is slightly different if you are working with expo or have ejected, which may explain why some of those older examples you mentioned don't work (they pre-date expo).

Drawing with SVG is generally straight-forward, although you will need to use arc's in paths, which is about as awkward as SVG gets (but still not too bad).

The trickiest parts of a circular slider are capturing the touch input with PanResponder and converting coordinates between cartesian (x,y) coordinates of the touch input and polar (angle,distance) coordinate systems in order to know where to move the slider to.

In your case it looks like you want to lock the movement of the slider to specific increments around the clock so you'll also need to find the nearest increment to the polar-coord of the current touch, but that should be easy in polar coords - just find the increment with the closest angle to that of the touch.

Here is an Expo project that illustrates the slider part. It looks like this:

enter image description here

Stevie
  • 7,957
  • 3
  • 30
  • 29
0

Based on the comments, if you are comfortable with the jQuery roundSlider then you can simply do the customization based on your need. Here I just make a mock up design, check the below demo:

DEMO

Circular slider in React Native

Also if you want this as an React component then you can make a simple wrapper like below, and can directly use in any React applications.

https://stackblitz.com/edit/react-jquery-round-slider

hope this will helps you, or will give you some idea to move in a direction.

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Hey @Soundar, I really appreciate all of the effort but how am I going to get this to work in my React Native app? I did mention that I am relatively new to React Native, so my capabilities are still limited. – Mart Mar 06 '20 at 12:59
  • @Marty2105 actually I am not aware of React Native, but I believe we can use the React components with that. But I am not sure... you may check the possibilities to include the jQuery components in React Native app.. best luck... – Soundar Mar 06 '20 at 20:08