How to set initial step?

[alantoa]

How to set initial step?

[alantoa]

Thanks for all of your feedback! I have just merged @computerjazz's PR and did a tiny improment, and i have also released a new version here!

[efstathiosntonas]

How volumeLevel is fed to useSharedValue? Is it coming from state? What happens if you hard code this value?

[wilmxre]

yes, it is coming from a state passed from its father component. i tried hardcoding 1 or 2, but the slider stays at step 0
if i console log the progress.value i get the value of the actual volumeLevel
in #46 i just saw that if you don't specify the step prop, it works like intended, so i tried it out and it works that way

[wilmxre]

i don't really know how the slider was implemented, but i noticed that if i pass the progress.value directly to const thumbIndex = useSharedValue(progress.value - 1); (in my case progress.value -1, because i am starting from 1 instead of 0) it works how it is supposed to

also i am using:

"react-native-reanimated": "~3.3.0",
"react-native-gesture-handler": "~2.12.0",

if this issue is related to the version of reanimated at all

[wilmxre]

i also realized that if the progress is fed from a state, it doesn't jump to the respective step at all.
so let's say the parent component can control the value of progress from outside, the useSharedValue of the progress variable will not update the slider component at all, because it will always stay at the initial value of the state passed from the parent

[efstathiosntonas]

check useDerivedValue https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/hooks/useDerivedValue/

something like this:

 const progress = useSharedValue(volumeLevel);

  const derived = useDerivedValue(() => {
    return progress
  }, [volumeLabel]);

<Slider
          step={4}
          progress={derived}

[wilmxre]

i tried it out with:

const progress = useSharedValue(volumeLevel);

const derived = useDerivedValue(() => {
    'worklet';
    return progress.value;
  }, [volumeLevel]);
  
  <Slider
          step={4}
          progress={derived}

but the value still stays at the initially passed one.
these are my logs when the volumeLevel changes:

 DEBUG   [ANDROID] VolumeLevel:  1
 LOG   [ANDROID] Progress:  1
 INFO   [ANDROID] Derived:  1
 
 DEBUG   [ANDROID] VolumeLevel:  3
 LOG   [ANDROID] Progress:  1
 INFO   [ANDROID] Derived:  1
 
 DEBUG   [ANDROID] VolumeLevel:  4
 LOG   [ANDROID] Progress:  1
 INFO   [ANDROID] Derived:  1

[computerjazz]

I think the issue is that thumbIndex is only updated within the gesture callback, but it is used to set the slider index.

I changed this line:

react-native-awesome-slider/src/slide.tsx

Line 266 in a7a68d8

const thumbIndex = useSharedValue(0);

to:

  const thumbIndex = useSharedValue(snapToStep && step ? progress.value - 1 : 0);

and it started working as expected. Not sure if this fix is correct in every case (ie do we want to set the thumbIndex whenever progress value changes?)