Search code examples
react-nativesliderstyling

react-native slider styling on disabled


We have a react-native slider component that we don't want the user to be able to update. However, when we set the slider to disabled, our slider is greyed out, which we do not want. How can we disable sliding for the slider while keeping the original styling (not having the slider grayed out)?

edit: using react-native slider component https://facebook.github.io/react-native/docs/slider.html


Solution

  • <Slider /> is backed by the native UISlider and grays out when disabled for accessibility reasons. What <Slider disabled={true} /> does is to set .enabled = NO in the native implementation. What you're looking to do instead is to have it set .userInteractionEnabled = NO. Unfortunately the current implementation of RCTSliderManager (as of React Native 0.44) does not currently support this but it should be super trivial to open a PR with this change.