Search code examples
react-nativereact-native-iosreact-native-svgreact-native-stylesheet

How to create a circular slider with breakpoints?

I am new to react-native and i want to achieve the below design in react-native

Image link

I am trying to achieve this

  • The blue circle is a slider to chose the date(Date Picker)
  • The circle inside the slider(Date Picker) changes color when the date is changed
  • and finally an image inside the circle.

it would be great if anyone could provide links for reference or a library which i can use to create the design shown in the image.

thanks in advance.

Solution

  • you have to create a custom SVG Slider just like this one

    I have created a sample for you take a look

    react-native-circular-slider-with-breakpoints

    enter image description here