setValue() has no effect before first render

[linfan68]

It seems like setValue() call before render() function (before the animated value got bind to the UI) has no effect. See repro code below.
Basically I created an animated value with 0 as initial value, right before rendering I use setValue to change it's value to 100 and the value does not change (both from UI and debug log)
But if I wait for 0ms and set value, then the value got updated.

This is tested on 1.20. I'm still testing 1.30, but it seems worse (even with 100 ms delay the value still not got updated)

const animatedValue = new Animated.Value<number>(0)
const Comp: TestCompoment = p => {
  // >>> this does NOT work, log: <<<
  // > animatedValue.setValue(100)
  // > animatedValue: 0
  console.log('animatedValue.setValue(100)')
  animatedValue.setValue(100)

  // >>> Code below works, with log: <<<
  // > animatedValue.setValue(100)
  // > animatedValue: 0
  // > animatedValue: 100
  // setTimeout(() => {
  //   console.log('animatedValue.setValue(100)')
  //   animatedValue.setValue(100)
  // }, 0)
  return <View style={StyleSheet.absoluteFill}>
    <Animated.View style={{
      width: 100,
      height: 100,
      backgroundColor: 'red',
      transform: [
        {translateX: debug('animatedValue:', animatedValue)},
      ],
    }}/>
  </View>
}

[DovletAmanov]

I had same case. I downgraded to version: 1.1.0 and it worked

[linfan68]

The problem is worse than I thought:
basically, when calling setValue() in the same JS loop of render(), things become fishy
I noticed another case that setValue() wither render() got deferred to a later time, and override results by set() running in the node....

[sebqq]

Hello @linfan68 can you try a patch file from issue #417 if it works for you?

[ShaMan123]

I'm having problems with setValue too.
I try to set a few values one after the other. It seems that some calls are dropped.
Did you try using setState / useState to change the value? Does it make a difference? For me it does. I too wish to save on re-rendering but for now it seems to be my best option.
I guess it works because it simply creates a new node.
Do you guys use hooks? Could this be related somehow?

[Freddy03h]

Hello, I'm experiencing a similar issue described in #417 and #415 with a manual set on a value.

I'm on "react-native-reanimated": "1.4.0".

My use case: I have scrollY and offset values used inside a diffClamp. The updated scrollY value update the diffClamp output well. But the manually changed offset value from an useCode hook doesn't update the diffClamp.
I have to scroll to update the scrollY value that will update the diffClamp with the latest and correct offset value.

[linfan68]

Hello @linfan68 can you try a patch file from issue #417 if it works for you?

Sorry I missed your message.. in that thread I saw the fix had been merged, do you happen to know if it’s released or not?

[sebqq]

Yes it is

[osdnk]

Hey, @linfan68
Thank you for this issue. I see this case, but I cannot think of any legitimate use case.
For initial value, you can just initialize animated value with initial value as an argument. Nodes are attached while mounting so you cannot imperatively set value until they're attached.
Can you explain why you need this? Maybe I would be able to suggest another approach.

Thanks again! For now, I close this issue. If you still have a problem, please let me know.

[kkirby]

@osdnk Is there any reason we can't add a check to see if the animation has mounted inside setValue? And if not, then update the startingValue, otherwise use the normal setter logic.

It would just make things easier. My use case is that my component has an update method that updates values based on the state and props. If I call this inside the component's constructor then the values don't update. I can totally just pass in the initial value to the value constructor, but it'd be easier to not have to do that.

[yolpsoftware]

Yes, there are situations where the initial value is not yet loaded when the node gets created. When the value gets loaded, it is just natural to call setValue.

If the value gets updated between the node creation and the first render, this value update won't work because of this bug.

@osdnk in case you think there aren't any legitimate use cases, please consider at least the confusion this bug might cause. I just spent an hour debugging this, and naturally I wasn't expecting the error to be in setValue.

If fixing this bug is complicated, then at least throw an error if setValue gets called before the first render.

[harveyconnor]

I'm getting a similar issue trying to manually setValue whilst utilising a panHandler to manage the value too.
The value ends up getting messed up when I start panning after manually setting and results in a jump.

[Ashoat]

We're also seeing this behavior.

I see this case, but I cannot think of any legitimate use case.

There are plenty of legitimate use cases! In our case, we don't always mount the animated view in question, but we want the value to be correct when we mount it.

It seems pretty clear to me that this is buggy behavior.