OnComplete - Feature Request

[jonny561201]

Based on the current behavior I observed, the onComplete function seems to pass in the initial value of the slider when the change began. If I am wrong I would greatly appreciate any assistance!

Issue:
I am attempting to build a temperature slider. Component state is set using the onChange function just like the README.md examples. I am attempting to make an API call to a backend to update the desired temperature using the onComplete. However, it appears that the onComplete is firing before the final async onChange event has completed and the API call is made with a "stale" value.

Proposed Solution:
I would like to request that the final selected value get passed into the onComplete function. The API could be called onChange, but that could potentially call the API hundreds of times within a few seconds.

Simplified Example:

import React, { useState, useEffect } from 'react';
import { RadialSlider } from 'react-native-radial-slider';

export default function TemperatureDial() {
    const [desiredTemp, setDesiredTemp] = useState(70);

    const updateComplete = async (value)  => {
        console.log(value);  //<----appears to be initial slider value
        await apiCallUpdateTemp(desiredTemp);
    }

    return (
        <RadialSlider
            value={desiredTemp}
            min={50}
            max={90}
            onChange={setDesiredTemp}
            onComplete={updateComplete}
            unit="&deg;"
        />
    )
}

[gokhantiknaz]

i got the same problem? is there any solution ?

[gokhantiknaz]

Here is the solution. but i dont want to modify inside library.
Change the method in useSilderAnimation.js in node modules / rn-radialslider/lib/components/radialslider/hooks
const handlePanResponderEnd = (_e,gestureState) => {

    if (disabled) {
        return;
    }
    let {x, y} = startCartesian;
    x += gestureState.dx;
    y += gestureState.dy;
    const radian = cartesianToPolar(x, y, radius, sliderWidth, thumbRadius, thumbBorderWidth);
    const ratio = (moveStartRadian - radian) / ((Math.PI - radianValue) * 2);
    const diff = max - min;
    let nValue;
    if (step) {
        nValue = moveStartValue + Math.round((ratio * diff) / step) * step;
    } else {
        nValue = moveStartValue + ratio * diff;
    }
    nValue = Math.max(min, Math.min(max, nValue));
    setValue((prevState) => {
        prevValue.current = Math.round(Math.abs(nValue - prevState) > diff / 4 ? prevState : nValue);
        return Math.round(Math.abs(nValue - prevState) > diff / 4 ? prevState : nValue);
    });
    // onChange(prevValue.current);
    onComplete(prevValue.current)
    //
    // if (disabled) {
    //     return;
    // }
    // onComplete(props.value);
};