React-Native: Slider knob jumps to random position when using diffClamp and multiple sliders

Question

I have quite an annoying problem, when developing a custom slider component in react-native. When using just one slider in my app everything is fine. But if I add more than one slider the problem begins: If is use one slider first and then, after finishing the animation, I use the same slider again, everything is fine. But if I use another slider after the first one and then I use the first one again, the slider knob jumps to a random position. If i do not use the "diffClamp" function from react-native-reanimated, then the problem does not occur, even with multiple sliders. But I need the diffClamp to limit the space for the slider knob. I can't figure out why the component behaves like that. I use the react-native-reanimated library as well as the react-native-linear-gradient library for the background of the slider.

I provide a minimal working example in the following:

CustomSlider.js:

    export default class CustomSlider extends Component {

    constructor(){
        super();

        this.dragX = new Value(0);

        this.offsetX = new Value(0);
        this.gestureState = new Value(State.UNDETERMINED);


        this.transX = diffClamp(cond(
            eq(this.gestureState, State.ACTIVE),
            add(this.offsetX, this.dragX), 
            set(this.offsetX, add(this.offsetX, this.dragX))
        ), 0, SliderStyleSheet.linearGradient.width-30);

        this.gestureHandler = event([
            {
                nativeEvent: {
                    translationX: this.dragX,
                    state: this.gestureState
                }
            }
        ]) 

    }
    logValue(){
        console.log(this.gestureHandler.x)
    }
    render(){
        return(
            <View style={{marginTop: 15}}>
                <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                    <Image source={require('../images/CompSigSmile5.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile4.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile3.png')} style={this.props.imageStyle}/>
                    <Image source={require('../images/CompSigSmile2.png')} style={this.props.imageStyle}/>  
                    <Image source={require('../images/CompSigSmile1.png')} style={this.props.imageStyle}/>
                </View>
                <View>
                    <LinearGradient start={{x:0, y:0}} end={{x:3.5, y:0}} colors={this.props.colors} style={SliderStyleSheet.linearGradient}>
                        <PanGestureHandler style={[{height: SliderStyleSheet.linearGradient.height}]} onGestureEvent={this.gestureHandler} onHandlerStateChange={this.gestureHandler} maxPointers={1}>
                            <Animated.View style={[{...StyleSheet.absoluteFillObject, width: SliderStyleSheet.linearGradient.height, height: SliderStyleSheet.linearGradient.height}, {transform: [{translateX: this.transX}]}]} >
                                <CustomSliderButton buttonColor={this.props.buttonColor}></CustomSliderButton>
                            </Animated.View>
                        </PanGestureHandler>
                    </LinearGradient>  
                </View>  
            </View>
        );
    }
}

App.js:

export default class SliderTestApp extends Component {
  constructor(){
    super();
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
        <CustomSlider output={"slider1"} colors={[SliderStyleSheet.white.color, SliderStyleSheet.red.color]} imageStyle={SliderStyleSheet.imageStyle} buttonColor={SliderStyleSheet.red.color}></CustomSlider>
      </View>
    );
  }
}

SliderStyleSheet.js:

export default StyleSheet.create({
    linearGradient: {
        height: 30,
        width: 150,
        borderRadius: 5,
        marginTop: 10
    }, 
    sliderButtonStyle: {
        borderRadius: 8,
        borderColor: "white",
        borderWidth: 2,
    },
    imageStyle: {
        height: 15,
        width: 15,
    },
    red: {
        color: 'rgba(200,59,62, 0.5)'
    },
    green: {
        color: 'rgba(40,148,72, 2.0)'
    },
    blue: {
        color: 'rgba(62,108,177, 0.5)'
    },
    yellow: {
        color: 'rgba(242,205,55, 0.5)'
    },
    orange: {
        color: 'rgba(208,102,28, 0.5)'
    },
    grey: {
        color: 'rgba(134,134,134, 0.5)'
    },
    white: {
        color: 'rgba(255,255,255, 0.5)'
    },
})

Maybe someone has encountered the same problem. I would be very thankful if someone could answer it.

Thanks and greetings!

Answer 1

I adapted the construtor of the CustomSlider.js class as follows:

constructor(){
    super();

    this.dragX = new Value(0);

    this.offsetX = new Value(0);
    this.gestureState = new Value(State.UNDETERMINED);

    this.testlog = this.testlog.bind(this)

    this.gestureHandler = event([
        {
            nativeEvent: {
                translationX: this.dragX,
                state: this.gestureState
            }
        }
    ])
    this.transX = interpolate(cond(
        eq(this.gestureState, State.ACTIVE),
        add(this.offsetX, this.dragX), 
        set(this.offsetX, interpolate(add(this.offsetX, this.dragX), {
            inputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height],
            outputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            extrapolateRight: 'clamp', 
            extrapolateLeft: 'clamp'
        }))), {
            inputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            outputRange: [0, SliderStyleSheet.linearGradient.width-SliderStyleSheet.linearGradient.height], 
            extrapolateRight: 'clamp',
            extrapolateLeft: 'clamp'
    })


}

I used the interpoalte() function instead of the diffClamp() and this did the job for me.