setValue() has no effect before first render

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>
}

[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.

[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.