Slider inside ScrollView is not smooth in both iOS and Android

[shivamtiwari8736]

trafficstars

Sliding in iOS and Android is not smooth. It leaves thumb while scrolling. I have taken Range Slider inside ScrollView. On top there is Range Slider and after that a list from API. When there is less items that no scroll needed, Range Slider works with absolute beauty. But when there is enough data in list that makes scroll view to scroll, the problem Occurs on both android and iOS.

[githuboftigran]

@shivamtiwari8736 , thanks for reporting. I will have a look on this weekend.

[shivamtiwari8736]

Hi @githuboftigran , Any update buddy?

[githuboftigran]

@shivamtiwari8736 , sorry dude, couldn't find some time on this weekend... I will add a comment here when I find the problem

[shikhawebvillee]

@githuboftigran, Any update on this issue?

[githuboftigran]

@shikhawebvillee , nope... I asked some developers, they couldn't help

[ChandanCBL]

Facing the same issue. Anyone found the solution for this ?

[DanielMalak]

For those having the same issue you can use the onTouchStart and the onTouchEnd functions to enable and disable the scrollview this is my implementation this.state = { allowScroll:true, }

    <ScrollView scrollEnabled={this.state.allowScroll}>

      <RangeSlider
      min={10}
      max={1000}
      step={10}
      onTouchStart={()=>{this.setState({allowScroll:false})}}
      onTouchEnd={()=>{this.setState({allowScroll:true})}}/>
    </ScrollView>

[githuboftigran]

@shivamtiwari8736 , @DanielMalak @ChandanCBL @shikhawebvillee , just published v2. Now PanResponder is used for touches. Is this issue still in there?

[haruhiroYakumo]

There is one more thing that I recommend. If you are using some state management library like redux, do not update store from onValueChanged function. It slows down the system a lot. Instead, it's performance-wise to launch update function from onTouchEnd function.

[Great-hijack]

@githuboftigran same issue with v2.

[KingDoxik]

I have similar problem, but in modal using React Navigation on iOS. I was not able to find any way to temporarily disable the swipe to dismiss.

[Nehal-Sanklecha]

@KingDoxik I'm facing the same issue, did you find any solution?

[KingDoxik]

@Nehal-Sanklecha I switched to full screen modal. It is not the best solution, but the only one I came up with to temporarily fix this issue.

[mrshahzeb7]

it was not smooth in scrollView for me ,while moving slider scroll starts to move! (especially iOS) I solved it by scrollview property "disableScrollViewPanResponder={true}"

[githuboftigran]

Hey all, just published a new version: 2.2.1. Now slider captures touches when movement is more horizontal, than vertical (ratio is 2, so it will capture touches, if dx > 2 * dy)