4

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.

Rizwan Veanka Software
  • 43
  • 4

2 Answers2

5

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

Rizwan Ahmed Shivalli
  • 1,483
  • 8
  • 37
-1

Well this is a custom slider which has some break point values. As the slider changes there is a change in the state and based on that the below description view is rendered.

Use this slider and give some css colors and styles to make it round

Rishav Kumar
  • 4,979
  • 1
  • 17
  • 32