The 5-minute React Native Custom Slider Last ned

Send til vennene dine
Legg til
  • 2. mai 2019

  • In this video, we are building a custom slider in 5 minutes using React Native. Hope that you will enjoy the video! 😀 Let me know what you think. Wanna learn the fundamentals of Gesture Handler and Reanimated? Check out my online course at The full example is available at You can check it out on GitHub as well at Do you like the series? You can support the channel by buying me a coffee at ☕️. Want to build your best app yet? Check out Are you sometimes asking yourself "Can it be done in React Native"? Send me your suggestions at


  • William Candillon
    William Candillon For 6 md. siden

    Updated Version:

  • Mikhail
    Mikhail For 1 år siden

    Perfect, unfortunately the link to buy you a coffee is broken.

  • Ansh Gujral
    Ansh Gujral For 1 år siden

    Hi! Thanks for the wonderful tutorials. You have removed the support of Interactive. So how to create this version with the latest version of react-native-redash?

  • Kevin Jacyna
    Kevin Jacyna For 1 år siden

    Thank you for the awesome lesson! I have a question I'd really appreciate some help with - I'd love to be able to read the value of index as it updates, so I can update other text I have based on what index the slider is at. I've tried using index.addListener which doesn't seem to work with reanimated, and I've tried the call function, call([index], this.indexHandler) however indexHandler never gets called. If you have any insights I'd really appreciate it, thank you again !

  • Surajit Das
    Surajit Das For 1 år siden

    You're truly genius sir. It would be great to get a separate in depth video for 'react-native-reanimated' and 'react-native-redash' if you get time. love and respect. really appreciate your time and effort. Thanks a lot.

  • Abdelrahman Abdelhafez
    Abdelrahman Abdelhafez For 1 år siden

    Amazing video, William, thank you very much! 👏 One question, please, though: the Interactable component doesn't exist anymore in react-native-redash, how can I work around that?

  • Naresh Naresh
    Naresh Naresh For 6 md. siden

    Thanks for a great tutorial. William, could you please extent it for MultiSlider? Ex slider with MinVaulue and MaxValue, and user pickup value in-between. Also, how we can use slider increment for fraction values such as 4.1, 4.2, 4.3, 4.4 for a small range 4 & 5 ( MinValue= 4 and MaxValue=5)

  • Pablete
    Pablete For 1 år siden

    Great work! I love your videos. One question/proposal for future videos: Using React Native one can also target the web (using react-native-web). Expo itself has recently announced web support. However, I am not sure how to tackle animations when targeting the web. Most of your videos use DangerZone.Animated which is really react-native-reanimated and I guess that does not have web support. Moreover, I think that react-native-web implementation of Animated is based on JS only and does not support useNativeDriver so I guess would not be very performant. How would you target the web platform using React Native and have performant animations at the same time? Can it be done in React Native? :)) I would love if you could tackle this issue in a future video with an example. I guess it will require platform-dependent code, but let's see your take on it :D

  • Peter Rattew
    Peter Rattew For 1 år siden

    How would you do it if the slider was a circle or a different shape? Also the link to support the channel is broken so i cant buy you a coffee!

  • Mahesh Jaganiya
    Mahesh Jaganiya For 1 år siden

    talk bout pure skills!

  • Josh Arrowsmith
    Josh Arrowsmith For 1 år siden

    incredible videos ! Im having issues with Retext on android saying cannot be cast to a number but other than that amazing work :)

  • Nibiru
    Nibiru For 1 år siden

    Very cool! Have you talked about redash before? Or is your lib brand new?

  • AZ阿仁
    AZ阿仁 For 8 md. siden (redigert)

    Help me much! Thx!! Is there example with how to use withSpring() to replace Interactable component ?

  • diego suarez
    diego suarez For 1 år siden

    Youuu are a craaasck broh!!!

  • Tai C
    Tai C For 1 år siden

    Is there a way to get the animated value as string so I can put it into my component state. I try to use call, but it freeze my animation.

  • Olsi Gjeci
    Olsi Gjeci For 1 år siden


  • Kamil Nowak
    Kamil Nowak For 1 år siden

    It look really nice

  • Burak Tarım
    Burak Tarım For 1 år siden

    We think you are awesome William

  • Godwin ebikwo
    Godwin ebikwo For 1 år siden

    Great video, still waiting for the Apple store animation video😬😬👍👍

  • Ameer Taghavi
    Ameer Taghavi For 1 år siden

    What’s your VS Code Theme name?