Slider is laggy

Description

1. Explain what you did

Implemented a slider to set a value.

2. What you expected to happen

Expect it to work perfectly (smoothly, value changes)

3. What actually happens

Value does change, but it’s super laggy.

Steps I took:

• Tested out on both iOS 11 and Android 8.0, and the slider is lagging.
• I tried out a couple other libraries for the slider
• Switched to production mode on Expo, still lags.

react-native-elements version: ^0.16.0

Reproduction Steps and Sample Code

I used CRNA to create my app, so it’s currently running on Expo.

<Slider
minimumValue={1}
maximumValue={50}
minimumTrackTintColor={"#C6C6C4"}
maximumTrackTintColor={"#C6C6C4"}
step={1}
value={this.state.value}
// BUG: This causes the lagginess
// onValueChange={(value) => this.setState({value})}
trackStyle={styles.trackStyle}
thumbStyle={styles.thumbStyle}
/>

Solution

I have a temporary solution, that is to use onSlidingComplete instead of onValueChange. It works, but it just doesn’t update real time anymore, and I’m just wondering if there’s a better way.

Culprit

Found out that the culprit was the fact that the slider has to change its value as it moves.

I’m still currently in the process of fixing it, but I feel like this is probably my fault for not understanding react-native well enough. Appreciate any resources that anyone can point to!

[ujeenator]

I’m reducing the number of updates with a timer

onValueChange={value => {
  clearTimeout(this.sliderTimeoutId)
  this.sliderTimeoutId = setTimeout(() => {
    this.setState({value})
  }, 20)
}}

[Norfeldt]

@xavier-villelegier debouncing workings, but I can’t get your code suggestion to work. I have to declare it in the constructor.

...
import { debounce } from lodash
...
  constructor(props){
    super(props)
    ...
    this.debounceUpdate = debounce( this.updateValue, 20 )
  }

  updateValue(value) {
    this.setState({ value })
  }

  ...
  render() {
    ...
    return (
      ...
      <Slider
        ...
        value={this.state.value}
        onValueChange={(value) => this.debounceUpdate(value)}
      />
    ...
  )}